Merge pull request #443 from shahdivyank/shahdivyank/zustand

State Management Setup
shahdivyank · Sep 2, 2024 · 6aa47c2 · 6aa47c2
2 parents 34ee41d + 88296c3
commit 6aa47c2
Show file tree

Hide file tree

Showing 13 changed files with 297 additions and 193 deletions.
diff --git a/components/create/details.tsx b/components/create/details.tsx
@@ -7,6 +7,9 @@ import { Image } from "expo-image";
 import * as Location from "expo-location";
 import * as ImagePicker from "expo-image-picker";
 import Icon from "../Icon";
+import { useUser } from "@/hooks/useUser";
+import { useDrops } from "@/hooks/useDrops";
+import { router } from "expo-router";
 
 const colors = [
   "bg-beatdrop-tag-orange",
@@ -37,12 +40,42 @@ const Details = ({
   const [location, setLocation] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
+  const [coordinates, setCoordinates] = useState({
+    longitude: 0.0,
+    latitude: 0.0,
+  });
+
+  const user = useUser((user) => user);
+  const { addDrop } = useDrops(({ addDrop }) => ({ addDrop }));
 
   const handleAdd = () => {
     addTag(tag);
     setTag("");
   };
 
+  const onSubmit = () => {
+    const drop = {
+      ...user,
+      song,
+      artist,
+      image,
+      tags: tags,
+      description: description,
+      comments: [],
+      timestamp: new Date(),
+      likes: 0,
+      location,
+      coordinates,
+      did: String(Math.random()),
+    };
+
+    addDrop(drop);
+    setDescription("");
+    handleBack();
+
+    router.replace("/dashboard");
+  };
+
   useEffect(() => {
     const getCurrLocation = async () => {
       setLoading(true);
@@ -53,12 +86,14 @@ const Details = ({
         return;
       }
 
-      const location = await Location.getCurrentPositionAsync({});
+      const {
+        coords: { latitude, longitude },
+      } = await Location.getCurrentPositionAsync({});
+      setCoordinates({ latitude, longitude });
 
-      //get city and state
       const reverseGeocode = await Location.reverseGeocodeAsync({
-        latitude: location.coords.latitude,
-        longitude: location.coords.longitude,
+        latitude,
+        longitude,
       });
 
       setLocation(`${reverseGeocode[0].city}, ${reverseGeocode[0].region}`);
@@ -170,7 +205,10 @@ const Details = ({
         </View>
       </View>
 
-      <Pressable className="bg-beatdrop-primary py-4 rounded-full w-full absolute bottom-4">
+      <Pressable
+        onPress={onSubmit}
+        className="bg-beatdrop-primary py-4 rounded-full w-full absolute bottom-4"
+      >
         <Text className="text-center text-white text-xl">Post Beatdrop</Text>
       </Pressable>
     </View>

diff --git a/components/create/index.tsx b/components/create/index.tsx
@@ -9,7 +9,6 @@ import MapView from "react-native-maps";
 const CreateScreen = () => {
   const ref = useRef<BottomSheet>(null);
   const snapPoints = useMemo(() => ["90%"], []);
-
   const [beat, setBeat] = useState<beat>({
     song: "",
     artist: "",

diff --git a/components/dashboard/comment.tsx b/components/dashboard/comment.tsx
@@ -1,17 +1,19 @@
 import { View, Pressable, TextInput, InputAccessoryView } from "react-native";
-import { Image, ImageSource } from "expo-image";
-import { beat, drop, comment } from "@/types";
+import { Image } from "expo-image";
+import { comment, beatdrop } from "@/types";
 import { useState } from "react";
 import Icon from "../Icon";
+import { useUser } from "@/hooks/useUser";
 interface props {
-  photo: ImageSource;
-  beat: Record<string, never> | (beat & drop);
+  beat: Record<string, never> | beatdrop;
   setBeat: any;
 }
 
-const Comment = ({ photo, beat, setBeat }: props) => {
+const Comment = ({ beat, setBeat }: props) => {
   const [message, setMessage] = useState("");
 
+  const { photo } = useUser(({ photo }) => ({ photo }));
+
   const handlePress = () => {
     if (message.length === 0) return;
 

diff --git a/components/dashboard/index.tsx b/components/dashboard/index.tsx
@@ -8,156 +8,38 @@ import { Image } from "expo-image";
 import Beat from "@/components/global/beat";
 import moment from "moment";
 import Search from "./search";
-import { comment, drop, beat } from "@/types";
+import { comment, beatdrop } from "@/types";
 import Toolbar from "./toolbar";
 import Toaster from "@/utils/toast";
 import Comment from "@/components/dashboard/comment";
 import Icon from "../Icon";
 import MapView, { Marker } from "react-native-maps";
 import PinImage from "@/assets/__mock__/pin.png";
 import * as Location from "expo-location";
-
-const comments: comment[] = [
-  {
-    timestamp: new Date("2024-08-09T03:24:00"),
-    username: "bobbyyy57",
-    likes: 190,
-    comment:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus facilisis, justo ut facilisis mollis, turpis enim euismod ipsum, bibendum ",
-    photo: {
-      uri: "https://media.licdn.com/dms/image/C5603AQFRF-WuzzVSPw/profile-displayphoto-shrink_200_200/0/1648079904789?e=2147483647&v=beta&t=iQ5MB_agi9aY0JUDxSXlAEa3icdQWn8l9twByRP5ItQ",
-    },
-  },
-  {
-    timestamp: new Date("2024-08-02T03:24:00"),
-    username: "bobbyyy57",
-    likes: 150,
-    comment:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus facilisis, justo ut facilisis mollis, turpis enim euismod ipsum, bibendum ",
-    photo: {
-      uri: "https://media.licdn.com/dms/image/C5603AQFRF-WuzzVSPw/profile-displayphoto-shrink_200_200/0/1648079904789?e=2147483647&v=beta&t=iQ5MB_agi9aY0JUDxSXlAEa3icdQWn8l9twByRP5ItQ",
-    },
-  },
-  {
-    timestamp: new Date("2024-08-02T03:24:00"),
-    username: "bobbyyy57",
-    likes: 150,
-    comment:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus facilisis, justo ut facilisis mollis, turpis enim euismod ipsum, bibendum ",
-    photo: {
-      uri: "https://media.licdn.com/dms/image/C5603AQFRF-WuzzVSPw/profile-displayphoto-shrink_200_200/0/1648079904789?e=2147483647&v=beta&t=iQ5MB_agi9aY0JUDxSXlAEa3icdQWn8l9twByRP5ItQ",
-    },
-  },
-  {
-    timestamp: new Date("2024-08-01T03:24:00"),
-    username: "bobbyyy57",
-    likes: 150,
-    comment:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus facilisis, justo ut facilisis mollis, turpis enim euismod ipsum, bibendum ",
-    photo: {
-      uri: "https://media.licdn.com/dms/image/C5603AQFRF-WuzzVSPw/profile-displayphoto-shrink_200_200/0/1648079904789?e=2147483647&v=beta&t=iQ5MB_agi9aY0JUDxSXlAEa3icdQWn8l9twByRP5ItQ",
-    },
-  },
-  {
-    timestamp: new Date("2024-07-01T03:24:00"),
-    username: "bobbyyy57",
-    likes: 150,
-    comment:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus facilisis, justo ut facilisis mollis, turpis enim euismod ipsum, bibendum ",
-    photo: {
-      uri: "https://media.licdn.com/dms/image/C5603AQFRF-WuzzVSPw/profile-displayphoto-shrink_200_200/0/1648079904789?e=2147483647&v=beta&t=iQ5MB_agi9aY0JUDxSXlAEa3icdQWn8l9twByRP5ItQ",
-    },
-  },
-];
+import { useDrops } from "@/hooks/useDrops";
 
 interface item {
-  item: beat & drop;
+  item: beatdrop;
 }
 
-const beats: (drop & beat)[] = [
-  {
-    uid: "0",
-    name: "Robert Lerias Jr.",
-    username: "robert.lerias",
-    location: "San Jose, CA",
-    photo: {
-      uri: "https://media.licdn.com/dms/image/C5603AQFRF-WuzzVSPw/profile-displayphoto-shrink_200_200/0/1648079904789?e=2147483647&v=beta&t=iQ5MB_agi9aY0JUDxSXlAEa3icdQWn8l9twByRP5ItQ",
-    },
-    timestamp: new Date("2024-08-09T03:24:00"),
-    likes: 100,
-    image: {
-      uri: "https://images.genius.com/839942f1ff5a5b7a21e8ca9813f8c446.1000x1000x1.png",
-    },
-    song: "I Want That",
-    artist: "G(I)-DLE",
-    description:
-      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
-    comments: [],
-    coordinates: {
-      latitude: 37.330048,
-      longitude: -121.955171,
-    },
-  },
-  {
-    uid: "1",
-    name: "Vincent Raimondi",
-    username: "vincent.raimondi",
-    location: "San Francisco, CA",
-    photo: {
-      uri: "https://media.licdn.com/dms/image/D5603AQGrXfnyW2o10g/profile-displayphoto-shrink_200_200/0/1691721890338?e=2147483647&v=beta&t=ZJss3qCbRLmbHVGzYlXdFJYd7WQhLOk35IrFSQPICR4",
-    },
-    timestamp: new Date("2024-08-03T03:24:00"),
-    likes: 57,
-    image: {
-      uri: "https://i1.sndcdn.com/artworks-taH3WgxbicnX-0-t500x500.jpg",
-    },
-    song: "Rooftop",
-    artist: "Flowsik",
-    description:
-      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
-    comments,
-    coordinates: {
-      latitude: 37.7749,
-      longitude: -122.4194,
-    },
-  },
-  {
-    uid: "2",
-    name: "Divyank Shah",
-    username: "divyank.shah",
-    location: "Riverside, CA",
-    photo: {
-      uri: "https://media.licdn.com/dms/image/C5603AQGGCb3sfU37yw/profile-displayphoto-shrink_200_200/0/1643607680906?e=2147483647&v=beta&t=3O3YNLDDQJ8kjWiFRtLQJRR-gj5JRN6hd6eerzGHdnY",
-    },
-    timestamp: new Date("2024-02-03T03:24:00"),
-    likes: 57,
-    image: {
-      uri: "https://i.scdn.co/image/ab67616d0000b273726d48d93d02e1271774f023",
-    },
-    song: "Mockingbird",
-    artist: "Eminem",
-    description:
-      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
-    comments,
-    coordinates: {
-      latitude: 33.9737,
-      longitude: -117.3281,
-    },
-  },
-];
+interface BeatdropState {
+  drops: beatdrop[];
+}
 
 const DashboardScreen = () => {
   const ref = useRef<BottomSheet>(null);
   const snapPoints = useMemo(() => ["10%", "30%", "60%", "90%"], []);
 
   const [scope, setScope] = useState("Global");
   const [search, setSearch] = useState("");
-  const [beat, setBeat] = useState<Record<string, never> | (beat & drop)>({});
+  const [beat, setBeat] = useState<Record<string, never> | beatdrop>({});
   const [location, setLocation] = useState({
     latitude: 33.9737,
     longitude: -117.3281,
   });
 
+  const { drops } = useDrops(({ drops }: BeatdropState) => ({ drops }));
+
   useEffect(() => {
     const getCurrLocation = async () => {
       const { status } = await Location.requestForegroundPermissionsAsync();
@@ -182,6 +64,7 @@ const DashboardScreen = () => {
     ({
       item: {
         uid,
+        did,
         name,
         username,
         location,
@@ -200,6 +83,7 @@ const DashboardScreen = () => {
         className="p-2"
         onPress={() =>
           selectDrop({
+            did,
             uid,
             name,
             username,
@@ -249,7 +133,7 @@ const DashboardScreen = () => {
 
   const map = useRef<MapView>(null);
 
-  const selectDrop = (drop: beat & drop) => {
+  const selectDrop = (drop: beatdrop) => {
     setBeat(drop);
 
     const {
@@ -275,7 +159,7 @@ const DashboardScreen = () => {
           width: "100%",
         }}
       >
-        {beats.map((drop, index) => (
+        {drops.map((drop, index) => (
           <Marker
             coordinate={{
               latitude: drop.coordinates.latitude,
@@ -308,8 +192,8 @@ const DashboardScreen = () => {
 
         {Object.keys(beat).length === 0 ? (
           <BottomSheetFlatList
-            data={beats}
-            keyExtractor={({ uid }) => uid}
+            data={drops}
+            keyExtractor={({ did }) => did}
             renderItem={renderItem}
           />
         ) : (
@@ -383,7 +267,7 @@ const DashboardScreen = () => {
                 )}
               </View>
             </View>
-            <Comment photo={comments[2].photo} beat={beat} setBeat={setBeat} />
+            <Comment beat={beat} setBeat={setBeat} />
           </BottomSheetScrollView>
         )}
       </BottomSheet>

diff --git a/components/profile/drops.tsx b/components/profile/drops.tsx
@@ -1,54 +1,18 @@
 import { View } from "react-native";
 import React from "react";
 import Beat from "@/components/global/beat";
-
-const drops = [
-  {
-    name: "Cosmic",
-    artist: "Red Velvet",
-    image: {
-      uri: "https://upload.wikimedia.org/wikipedia/en/5/59/Red_Velvet_-_Cosmic.png",
-    },
-    location: "Brisban, AU",
-  },
-  {
-    name: "Cosmic",
-    artist: "Red Velvet",
-    image: {
-      uri: "https://upload.wikimedia.org/wikipedia/en/5/59/Red_Velvet_-_Cosmic.png",
-    },
-    location: "Brisban, AU",
-  },
-  {
-    name: "Cosmic",
-    artist: "Red Velvet",
-    image: {
-      uri: "https://upload.wikimedia.org/wikipedia/en/5/59/Red_Velvet_-_Cosmic.png",
-    },
-    location: "Brisban, AU",
-  },
-  {
-    name: "Cosmic",
-    artist: "Red Velvet",
-    image: {
-      uri: "https://upload.wikimedia.org/wikipedia/en/5/59/Red_Velvet_-_Cosmic.png",
-    },
-    location: "Brisban, AU",
-  },
-  {
-    name: "Cosmic",
-    artist: "Red Velvet",
-    image: {
-      uri: "https://upload.wikimedia.org/wikipedia/en/5/59/Red_Velvet_-_Cosmic.png",
-    },
-    location: "Brisban, AU",
-  },
-];
+import { useUser } from "@/hooks/useUser";
+import { useDrops } from "@/hooks/useDrops";
 
 const Drops = () => {
+  const user = useUser(({ uid }) => uid);
+  const drops = useDrops(({ drops }) => drops);
+
+  const profile = drops.filter(({ uid }) => uid === user);
+
   return (
     <View className="flex gap-3">
-      {drops.map(({ name, artist, image, location }, index) => (
+      {profile.map(({ name, artist, image, location }, index) => (
         <Beat
           song={name}
           artist={artist}