Feature/database

src/app/Pages/feet/page.tsx

@@ -10,22 +10,32 @@ import Navbar from "@/modal/Navbar";
 import Postbox from "@/modal/Postbox";
 import RightSidebar from "@/modal/RightSidebar";
 import Stories from "@/modal/Stories";
-import { collection, onSnapshot, orderBy, query } from "firebase/firestore";
+import { collection, onSnapshot, orderBy, query, where } from "firebase/firestore";
 import React, { useEffect, useState } from "react";
 
 function Feed({ userInfo }: any) {
-  const [logout, setLogout] = useState(true);
-  const [getPost, setGetPost] = useState<any>([]);
+  const [logout, setLogout] = useState<any>(true);
+  const [getPosts, setGetPosts] = useState<any>([]);
+  const [currentUserInfo, setCurrentUserInfo] = useState<any>(null)
   useEffect(() => {
     return onSnapshot(
-      query(collection(getInfo, "post"), orderBy("id", "desc")),
+      query(collection(getInfo, "posts"), orderBy("id", "desc")),
       (snapshot) => {
-        setGetPost(snapshot.docs);
+        setGetPosts(snapshot.docs);
       }
     );
   }, []);
 
-  console.log(getPost);
+  useEffect(()=>{
+    return onSnapshot(
+      query(collection(getInfo, `users/${userInfo?.uid}`)),
+      (snapshot)=> {
+        setCurrentUserInfo(snapshot.docs)
+      }
+    );
+  }, [userInfo])
+
+  console.log(getPosts);
   return (
     <div>
       <FeetContent>
@@ -35,8 +45,12 @@ function Feed({ userInfo }: any) {
         <FeetContainer>
           <PostHolder>
             <Stories />
-            <Postbox userInfo={userInfo} />
-            <FeedCard />
+            <Postbox
+              userInfo={userInfo}
+              getPosts={getPosts}
+              currentUserInfo={currentUserInfo}
+            />
+            <FeedCard getPosts={getPosts} currentUserInfo={currentUserInfo} />
           </PostHolder>
           <RightSidebar />
         </FeetContainer>

src/app/page.tsx

@@ -79,12 +79,14 @@ export default function Home() {
         </LeftHolder>
         <RightForm onSubmit={handleLogin}>
           <Input
+          type="email"
             placeholder="Email or phone number"
             onChange={(e) => {
               setData((prev) => ({ ...prev, email: e.target.value }));
             }}
           />
           <Input
+          type="password"
             placeholder="Password"
             onChange={(e) => {
               setData((prev) => ({ ...prev, password: e.target.value }));

src/context/AuthContext.tsx

@@ -17,11 +17,7 @@ export const useAuth = () => useContext(AuthContext);
 const app = initFirebase()
 const auth = getAuth(app);
 
-export const AuthContextPRovider = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => {
+export const AuthContextPRovider = ({children}: {children: React.ReactNode}) => {
   const [user, setUser] = useState<any>(null);
   const [isLoading, setIsLoading] = useState(true);
   useEffect(() => {

src/modal/FeedCard.tsx

@@ -1,3 +1,6 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @next/next/no-img-element */
+"use client";
 import { FeedCards } from "@/Components/Organism";
 import ProfilePicture from "../assets/images/persons/5.jpeg";
 /* import { Post } from "../assets/Dommydata"; */
@@ -49,20 +52,30 @@ import {
 
 import Liked from "../assets/images/like.png";
 import Loved from "../assets/images/heart.png";
-import { CSSProperties, useRef, useState } from "react";
+import { CSSProperties, useEffect, useRef, useState } from "react";
 import { Submit__comments } from "@/Components/Atoms/IconsAtoms";
+import {
+  collection,
+  deleteDoc,
+  doc,
+  onSnapshot,
+  setDoc,
+} from "firebase/firestore";
+import { getInfo } from "@/firebase/config";
+import { useAuth } from "@/context/AuthContext";
 
 interface ImgProps {
   width: any;
   height: any;
   style?: CSSProperties;
 }
 FeedMainImg;
-function FeedCard({}) {
+function FeedCard({ getPosts }: any) {
+  // function FeedCard() {
 
-  const[like, setLike] = useState(1)
-  const[isLike, setIslike] = useState(false)
-   const[liked, setLiked]= useState(false) 
+  const { user } = useAuth();
+  const [likes, setLikes] = useState([]);
+  const [liked, setLiked] = useState(false);
 
   const [comment, setComment] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -71,20 +84,39 @@ function FeedCard({}) {
     setComment((prev) => !prev);
   };
 
+  useEffect(() => {
+    const unsubscribe = onSnapshot(
+      collection(getInfo, "posts", getPosts[0].id, "likes"),
+      (snapshot: any) => setLikes(snapshot.docs)
+    );
+  }, [getPosts[0].id]);
+
+  useEffect(() => {
+    setLiked(
+      likes.findIndex((like: { id: any }) => like?.id === user?.uid) !== -1
+    );
+  }, [likes]);
+
   const closeComment = () => {
     setComment(false);
   };
 
   const handleInputChange = (event: any) => {
     setInputValue(event.target.value);
-    console.log(inputValue)
+    console.log(inputValue);
   };
 
-  const handlelike = () => {
-    setLike( isLike ? like-1: like+1)
-    setIslike(!isLike)
-    setLiked(prev => !prev)
-  }
+  const handlelike = async () => {
+    if (liked) {
+      await deleteDoc(
+        doc(getInfo, "posts", getPosts[0].id, "likes", user?.uid)
+      );
+    } else {
+      await setDoc(doc(getInfo, "posts", getPosts[0].id, "likes", user?.uid), {
+        currentUser: user?.displayName,
+      });
+    }
+  };
 
   return (
     <FeedCards>
@@ -116,20 +148,26 @@ function FeedCard({}) {
           <p>Every moment is a fresh beginning.</p>
         </Feedpost__message>
         <FeedMainImg>
-          <Image src={Snoop} alt="snoop" style={MainPis} />
+          <img
+            src={getPosts[0]?.data()?.fileUrl}
+            alt="snoop"
+            style={MainPis}
+            width={50}
+            height={50}
+          />
         </FeedMainImg>
         <FeedPost__bottom>
           <PostBottom>
             <Image src={Liked} alt="gh" height={30} width={30} />
             <Image src={Loved} alt="gh" height={30} width={30} />
-            <span>{like}</span>
+            <span>{likes}</span>
           </PostBottom>
           <p>45 comments ...</p>
         </FeedPost__bottom>
         <Feed__multimedia>
           <Multi__smallcontainers onClick={() => handlelike()}>
             <p>
-              <LikedPost liked={liked}/>
+              <LikedPost liked={liked} />
               Like
             </p>
           </Multi__smallcontainers>
@@ -142,9 +180,8 @@ function FeedCard({}) {
             <p>Share</p>
           </Multi__smallcontainers>
         </Feed__multimedia>
-        
+
         {comment && (
-
           <Comment__set>
             <Image
               src={ProfilePicture}
@@ -153,15 +190,15 @@ function FeedCard({}) {
               margin-rigth="22px"
               border-radius="50%"
             />
-            
+
             <CommentWrapper>
               <Whappys />
               <CommentInput
                 type="text"
                 placeholder="Write a public here comment"
               />
             </CommentWrapper>
-            <Submit__commentsbtn  onClick={handleInputChange}>
+            <Submit__commentsbtn onClick={handleInputChange}>
               <Submit__comments />
             </Submit__commentsbtn>
           </Comment__set>
@@ -170,5 +207,4 @@ function FeedCard({}) {
     </FeedCards>
   );
 }
-
 export default FeedCard;

src/modal/Modal.tsx

@@ -44,24 +44,25 @@ function Register({
     month: "",
     year: "",
   });
-  const { user } = useAuth();
-  const id = user?.uid;
-  console.log(user);
-  const [custom, setCustom] = useState("");
+  const {user} = useAuth()
+  const id = user?.uid
+  console.log(user)
+  const [custom, setCustom] = useState("")
   const [data, setData] = useState({
     firstName: "",
     lastName: "",
     email: "",
     password: "",
     gender: "",
   });
-  const router = useRouter();
+   const router = useRouter()
   const { signUp, confirmEmail } = useAuth();
 
   const handleSubmit = async (e: any) => {
     e.preventDefault();
-    const user = await addDoc(collection(getInfo, `users/${id}`), {
-      id: id,
+    await signUp(data.email, data.password);
+    const userInfo = await addDoc(collection(getInfo, `users/${user?.uid}`), {
+      id: user?.uid,
       firstName: data.firstName,
       lastName: data.lastName,
       email: data.email,
@@ -70,9 +71,9 @@ function Register({
       ).toDateString(),
       gender: data.gender,
     });
-    await signUp(data.email, data.password);
+    await signUp(data.email, data.password)
     router.push("/Pages/feet");
-    await confirmEmail();
+    await confirmEmail()
     console.log(user);
     setSee(!see);
   };

src/modal/PostPopForm.tsx

@@ -45,18 +45,17 @@ import { useAuth } from "@/context/AuthContext";
 import ProfilePicture from "../assets/images/lady.png"
 import AuthGaurd from "@/HOC/AuthGuard";
 
-const PostPopForm = ({ setOpen, userInfo }: any) => {
+const PostPopForm = ({ setOpen, currentUserInfo }: any) => {
   const [imageList, setImageList] = useState<any>([]);
   const [isOpen, setIsOpen] = useState(false);
-  const [imageUpload, setImageUpload] = useState();
   const [textValue, setTextValue] = useState("");
-  const [imgUrl, setImgUrl] = useState("")
+  const [imgUrl, setImgUrl] = useState<any>(null);
   const [data, setData] = useState({
     title: "",
     fileUrl: imageList,
   });
 
-    console.log(userInfo);
+  console.log(currentUserInfo);
 
   const handleSubmit = async (e: any) => {
     e.preventDefault();
@@ -65,7 +64,7 @@ const PostPopForm = ({ setOpen, userInfo }: any) => {
       title: data.title,
       fileUrl: imgUrl,
       doc: serverTimestamp(),
-      postedBy: userInfo?.uid,
+      postedBy: currentUserInfo?.uid,
       likes: 2,
     });
   };
@@ -101,7 +100,7 @@ const PostPopForm = ({ setOpen, userInfo }: any) => {
               />
             </Profile__holder>
             <StatusPreference>
-              <p>{userInfo?.displayName}</p>
+              <p>{currentUserInfo?.displayName}</p>
               <LockedDiv>
                 <Lock />
                 only me
@@ -111,14 +110,12 @@ const PostPopForm = ({ setOpen, userInfo }: any) => {
           </CreatePost__profile__prefence>
           <WriteStatus>
             <WrtieMind__status
-              placeholder={`What is your mind, ${userInfo?.displayName}?`}
+              placeholder={`What is your mind, ${currentUserInfo?.displayName}?`}
               onChange={handleTextChange}
             />
             {isOpen && (
               <Postpopupse
                 setIsOpen={setIsOpen}
-                setImageUpload={setImageUpload}
-                imageUpload={imageUpload}
                 setImageList={setImageList}
                 setImgUrl={setImgUrl}
               />
@@ -156,10 +153,10 @@ const PostPopForm = ({ setOpen, userInfo }: any) => {
               </List__li>
             </List>
           </PostDiv>
-
           <Postsub__Button active={!!textValue} onClick={handleSubmit}>
             Post
-          </Postsub__Button>https://www.youtube.com/watch?v=k4mjF4sPITE&pp=ygUYY2hhdCBhcHAgbmV4dGpzIGZpcmViYXNl
+          </Postsub__Button>
+          https://www.youtube.com/watch?v=k4mjF4sPITE&pp=ygUYY2hhdCBhcHAgbmV4dGpzIGZpcmViYXNl
         </PopForm>
       </Bg>
     </>

src/modal/Postbox.tsx

@@ -19,15 +19,17 @@ import { useState } from "react";
 
 import { ImageStyle, ImageIcons } from "@/Components/Atoms/Atoms";
 
-const Postbox = ({ userInfo }: any) => {
+const Postbox = ({ userInfo, getPosts, currentUserInfo }: any) => {
   const [open, setOpen] = useState(false);
   const handlesub = (e: any) => {
     e.preventDefault();
   };
 
   return (
     <PostForm>
-      {open && <PostPopForm setOpen={setOpen} userInfo={userInfo} />}
+      {open && (
+        <PostPopForm setOpen={setOpen} currentUserInfo={currentUserInfo} />
+      )}
 
       <PostForm__innerContainer>
         <Onyourmind>
@@ -42,7 +44,7 @@ const Postbox = ({ userInfo }: any) => {
           <Mind__input
             onClick={() => setOpen(true)}
             type="text"
-            placeholder="What is your mind, Bata?"
+            placeholder={`What is your mind, ${currentUserInfo?.firstName}?`}
           />
         </Onyourmind>
         <Multi__media>