fix: User page fix (#97)

* feat: changes added:
- optimized images
- fix meta
- added new meta image
- increase blur in login/register component

* style: fix ui of login, register and verify page

* refactor: readme minor changes and extra assets removed

* fix: loader size reduced and error handled on single post

* chore: yml script optimized

* chore: version fixed and node engine updated; appwrite version update;

* fix: user page data fetching fix

src/app/user/[userId]/page.tsx

@@ -9,7 +9,7 @@ type UserPageProps = {
 export default function UserPage({ params: { userId } }: UserPageProps) {
   return (
     <>
-      <User />
+      <User userId={userId} />
     </>
   );
 }

src/backend/auth.api.ts

@@ -194,12 +194,13 @@ const isLoggedIn = async (): Promise<any> => {
 const getSingleUser = async (id: string) => {
   try {
     const tweets = await db.getDocument(palettegramDB, usersCollection, id);
-    if (tweets) {
-      return tweets;
+    if (!tweets) {
+      throw new Error();
     }
+    return tweets;
   } catch (error: any) {
     console.log(error);
   }
 };
 
-export { registerUser, verifyUser, loginUser, logoutUser, isLoggedIn, getSingleUser };
+export { registerUser, verifyUser, loginUser, logoutUser, isLoggedIn, getSingleUser, getCurrentUser };

src/backend/bookmarks.api.ts

@@ -32,7 +32,6 @@ const getBookmarks = async (accountId: string) => {
 
 const saveBookmark = async (accountId: string, postId: string) => {
   try {
-    console.log(accountId, postId);
     const getSavedBookmarkData = await getBookmarks(accountId);
 
     if (!getSavedBookmarkData) {
@@ -60,7 +59,6 @@ const saveBookmark = async (accountId: string, postId: string) => {
 
 const removeBookmark = async (accountId: string, postId: string) => {
   try {
-    console.log(accountId, postId);
 
     const getSavedBookmarkData = await getBookmarks(accountId);
 
@@ -89,7 +87,6 @@ const removeBookmark = async (accountId: string, postId: string) => {
 
 const createBookmarkEntry = async (accountId: string, postId: string) => {
   try {
-    console.log(accountId, postId);
 
     const bookmarkDocs = await db.createDocument(palettegramDB, bookmarksCollection, ID.unique(), {
       accountId: accountId,

src/components/core/navbar/index.tsx

@@ -25,6 +25,8 @@ const Navbar = () => {
   const dispatch = useDispatch();
   const cookies = parseCookies();
 
+  const userIdFromCookies:string = cookies["userId"];
+
   const logout = async () => {
     await logoutUser();
 
@@ -45,11 +47,11 @@ const Navbar = () => {
           console.log(error);
         });
 
-      getBookmarks(cookies["userId"])
+      getBookmarks(userIdFromCookies)
         .then((bookm) => {
           dispatch(
             saveBookmarkToStore({
-              accountId: cookies["userId"],
+              accountId: userIdFromCookies,
               bookmark: bookm?.documents[0].bookmark,
             }),
           );
@@ -63,7 +65,7 @@ const Navbar = () => {
       clearTimeout(timeoutId);
       console.log("clear");
     };
-  }, [cookies, dispatch]);
+  }, [userIdFromCookies, dispatch]);
 
   if (userAuth.error) {
     return <h1>Error</h1>;
@@ -95,7 +97,7 @@ const Navbar = () => {
           )}
 
           <Link
-            href={`/user/${userAuth.creds?.userId}`}
+            href={`/user/${userIdFromCookies}`}
             className="mx-2 px-2 py-2 rounded-full bg-primary text-white"
           >
             <Settings size={22} className="transition-all duration-300 " />

src/components/core/posts/SinglePost.tsx

@@ -30,7 +30,7 @@ export default function SinglePost({
           false,
         )
       ) {
-        console.log(accountId, "remove bookmark");
+        // console.log(accountId, "remove bookmark");
         removeBookmark(accountId, postId)
           .then((resp) => {
             dispatch(
@@ -44,7 +44,7 @@ export default function SinglePost({
           })
           .catch((err) => console.log(err));
       } else {
-        console.log(accountId, "save bookmark");
+        // console.log(accountId, "save bookmark");
         saveBookmark(accountId, postId)
           .then((resp) => {
             dispatch(
@@ -58,7 +58,7 @@ export default function SinglePost({
           .catch((err) => console.log(err));
       }
     } else {
-      console.log(accountId, "account not exist");
+      // console.log(accountId, "account not exist");
       createBookmarkEntry(accountId, postId)
         .then((resp) => {
           dispatch(
@@ -72,7 +72,6 @@ export default function SinglePost({
     }
   };
 
-  console.log(authState);
 
   return (
     <div className="p-3 rounded-md shadow dark:shadow-gray-600 mb-4">

src/components/core/posts/index.tsx

@@ -32,7 +32,7 @@ export default function Posts() {
       }),
     );
 
-    console.log("og:", postState);
+    // console.log("og:", postState);
 
     // likeTweet(post)
     //   .then((response) => {

src/components/pages/auth/login/index.tsx

@@ -8,7 +8,6 @@ import { ArrowLeftCircle } from "react-feather";
 // Components
 import { saveUser } from "@/redux/reducers/authReducer";
 import { toastify } from "@/helper/toastify";
-import { ButtonLong } from "@/components/core/buttons";
 
 // API
 import { loginUser } from "@/backend/auth.api";

src/components/pages/feed/index.tsx

@@ -1,8 +1,8 @@
 "use client";
 import { Suspense } from "react";
 import Link from "next/link";
-import { useSelector } from "react-redux";
 import { User, Bookmark } from "react-feather";
+import { parseCookies } from "nookies";
 
 import Loader from "@/app/loading";
 import CreatePost from "@/components/core/createPost";
@@ -11,14 +11,16 @@ import TrendingFeed from "@/components/core/trendingFeed";
 import Footer from "@/components/core/footer";
 
 const Feed = () => {
-  const userDetails = useSelector((state: any) => state.auth);
+  const cookies = parseCookies();
+
+  const userIdFromCookies:string = cookies["userId"];
 
   return (
     <>
       <main className="flex max-w-screen-lg mx-auto pt-8 content-center">
         <div className="flex-1 sticky flex flex-col items-center gap-8">
           <Link
-            href={`/user/${userDetails.creds.userId}`}
+            href={`/user/${userIdFromCookies}`}
             className="w-12 h-12 rounded-full flex items-center justify-center shadow-md dark:shadow-gray-600 transition-all duration-300 text-black dark:text-white hover:text-primary-light border hover:border-primary-light"
           >
             <User size={20} />

src/components/pages/user/index.tsx

@@ -1,15 +1,25 @@
 "use client";
-import React from "react";
+import { useEffect, useState } from "react";
 import UserPosts from "./userPosts";
-import { useSelector } from "react-redux";
+import { getCurrentUser } from "@/backend/auth.api";
 
-export default function User() {
-  const authState = useSelector((state: any) => state.auth);
+export default function User({ userId }: { userId: string }) {
+  const [user, setUser] = useState({
+    email: ""
+  });
+
+  useEffect(() => {
+    getCurrentUser()
+      .then((resp: any) => {
+        setUser(resp);
+      })
+      .catch(console.log);
+  }, [userId]);
 
   return (
     <>
       <div className="mx-auto max-w-screen-lg mt-4">
-        <h1 className="text-xl font-medium text-black dark:text-white">{authState.creds?.email}</h1>
+        <h1 className="text-xl font-medium text-black dark:text-white">{user && user?.email}</h1>
         <UserPosts user={null} />
       </div>
     </>

src/redux/reducers/postsReducer.ts

@@ -34,7 +34,7 @@ export const postsReducer = createSlice({
       state.posts.forEach((post: PostInstanceType) => {
         if (post.$id === postId) {
           if (post.likes.includes(userId)) {
-            console.log(post.likes.indexOf(userId));
+            // console.log(post.likes.indexOf(userId));
             post.likes.splice(post.likes.indexOf(userId), 1);
             console.log("dislike");
           } else {
@@ -46,11 +46,11 @@ export const postsReducer = createSlice({
         return post;
       });
 
-      for (let post of state.posts) {
-        if (post.$id === postId) {
-          console.log(post);
-        }
-      }
+      // for (let post of state.posts) {
+      //   if (post.$id === postId) {
+      //     console.log(post);
+      //   }
+      // }
 
       state.loading = false;
     },