Hd/feature/following development (#181)

#157

#117

#116

components/follow/UserFollowers.tsx

@@ -21,13 +21,14 @@ const UserFollowers: FC<IFollowersUser> = ({ username }) => {
   const router = useRouter();
   const { data: userDetails } = useFollowingDetails(username);
   const { data: isLoggedIn } = useCurrentUser();
-  const { isFollowing, toggleFollow } = useFollow(username);
+  const { userFollowingList, toggleFollow } = useFollow(username);
 
   return (
     <>
       {userDetails?.followers.length > 0 ? (
         userDetails.followers.map((user: any) => {
           const isCurrentUser = isLoggedIn.username === user.username;
+          const isFollowing = userFollowingList.includes(user.id);
           return (
             <div
               key={user.id}

components/follow/UserFollowing.tsx

@@ -21,13 +21,14 @@ const UserFollowing: FC<IFollowingsUser> = ({ username }) => {
   const router = useRouter();
   const { data: userDetails } = useFollowingDetails(username);
   const { data: isLoggedIn } = useCurrentUser();
-  const { isFollowing, toggleFollow } = useFollow(username);
+  const { toggleFollow, userFollowingList } = useFollow(username);
 
   return (
     <>
       {userDetails?.following.length > 0 ? (
         userDetails.following.map((user: any) => {
           const isCurrentUser = isLoggedIn?.username === user?.username;
+          const isFollowing = userFollowingList.includes(user.id);
 
           return (
             <div

components/modals/RegisterModal.tsx

@@ -144,13 +144,15 @@ const RegisterModal = () => {
         value={username}
         onChange={(e) => setUserName(e.target.value)}
       />
-      {username.length > 0 ? (
+      {/*
+       TODO: Api ile kontrol edilmeli
+       {username.length > 0 ? (
         <p style={{ color: ColorUtils.colors.red }}>
           Username has to be different
         </p>
       ) : (
         ""
-      )}
+      )} */}
       <Input
         type="password"
         placeholder="Enter ur password"
@@ -192,7 +194,7 @@ const RegisterModal = () => {
       title="Create an account"
       body={bodyContent}
       footer={footerContent}
-      disabled={inputControl()}
+      disabled
     />
   );
 };

components/users/UserInfo.tsx

@@ -21,7 +21,7 @@ interface IUserInfoProps {
 const UserInfo: FC<IUserInfoProps> = ({ username }) => {
   const { data: fetchedUser } = useUser(username);
   const { data: currentUser } = useCurrentUser();
-  const { isFollowing, toggleFollow } = useFollow(username);
+  const { userFollowingList, toggleFollow } = useFollow(username);
   const router = useRouter();
 
   const bioLink = fetchedUser?.bio ? controlLink(fetchedUser.bio) : "";
@@ -65,6 +65,10 @@ const UserInfo: FC<IUserInfoProps> = ({ username }) => {
     return format(new Date(fetchedUser?.birthday), "dd MMMM yyyy");
   }, [fetchedUser?.birthday]);
 
+  const isFollowing = useMemo(() => {
+    return userFollowingList.includes(fetchedUser.id);
+  }, [userFollowingList, fetchedUser]);
+
   return (
     <div className="border-neutral-800 border-b pb-4">
       <div className="p-4 flex justify-end">

hooks/useFollow.ts

@@ -13,10 +13,9 @@ const useFollow = (userName: string) => {
 
   const loginModal = useLoginModal();
 
-  const isFollowing = useMemo(() => {
-    const list = currentUser?.followingIds || [];
-    return list.includes(fetchedUser?.id || "");
-  }, [currentUser, fetchedUser]);
+  const userFollowingList = useMemo(() => {
+    return currentUser?.followingIds || [];
+  }, [currentUser?.followingIds]);
 
   const toggleFollow = useCallback(async () => {
     if (!currentUser) {
@@ -27,7 +26,7 @@ const useFollow = (userName: string) => {
     try {
       let request;
 
-      if (isFollowing) {
+      if (userFollowingList) {
         request = () =>
           axios.delete(`/api/follow`, {
             data: {
@@ -52,14 +51,14 @@ const useFollow = (userName: string) => {
   }, [
     currentUser,
     fetchedUser?.username,
-    isFollowing,
+    userFollowingList,
     loginModal,
     mutateCurrentUser,
     mutateFetchedUser,
   ]);
 
   return {
-    isFollowing,
+    userFollowingList,
     toggleFollow,
   };
 };

pages/api/following.ts

@@ -35,6 +35,7 @@ export default async function handler(
           },
         },
         select: {
+          id: true,
           name: true,
           username: true,
           bio: true,
@@ -49,6 +50,7 @@ export default async function handler(
           },
         },
         select: {
+          id: true,
           name: true,
           username: true,
           bio: true,

pages/connect.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback } from "react";
+import { FC, useCallback, useMemo } from "react";
 import { useRouter } from "next/router";
 
 import { IUser } from "@/types/user.type";
@@ -20,8 +20,8 @@ interface IHeaderProps {
 
 const Connect: FC<IHeaderProps> = ({ showBackArrow = false, username }) => {
   const { data: allUsers = [] } = useUsers();
+  const { userFollowingList, toggleFollow } = useFollow(username);
   const router = useRouter();
-  const { isFollowing, toggleFollow } = useFollow(username);
 
   const handleBackClick = useCallback(() => {
     const referrer = document.referrer;
@@ -50,6 +50,8 @@ const Connect: FC<IHeaderProps> = ({ showBackArrow = false, username }) => {
           Su<span className="font-serif font-extrabold">gg</span>ested for you
         </h1>
         {allUsers.map((user: IUser) => {
+          const isFollowing = userFollowingList.includes(user.id);
+
           return (
             <div
               key={user.id}

pages/users/[username]/followers.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import React, { useEffect, useState } from "react";
 
 import { useRouter } from "next/router";