simple add remove follower

client/package-lock.json

@@ -8,6 +8,7 @@
       "name": "yclient",
       "version": "0.0.1",
       "dependencies": {
+        "jwt-decode": "^4.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.21.0",
@@ -4725,6 +4726,14 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",

client/package.json

@@ -10,6 +10,7 @@
   },
   "browserslist": "> 0.5%, last 2 versions, not dead",
   "dependencies": {
+    "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.0",

client/src/App.tsx

@@ -10,7 +10,12 @@ import { deleteToken, getToken } from "./api/utils";
 import { Login } from "./Login";
 import { Signup } from "./Signup";
 import { Home } from "./Home";
-import { loginAction, profileSelfAction, signupAction } from "./actions";
+import {
+    loginAction,
+    profileSelfAction,
+    signupAction,
+    userListAction,
+} from "./actions";
 import { homeLoader, profileLoader, userListLoader } from "./loaders";
 import { isError } from "./api/dto";
 import { Feed } from "./Feed";
@@ -39,7 +44,12 @@ const router = createBrowserRouter([
         children: [
             { path: "feed", element: <Feed /> },
             { path: "messages", element: <Messages /> },
-            { path: "users", element: <UserList />, loader: userListLoader },
+            {
+                path: "users",
+                element: <UserList />,
+                loader: userListLoader,
+                action: userListAction,
+            },
             {
                 path: "profile",
                 loader: profileLoader,

client/src/Home.tsx

@@ -3,6 +3,7 @@ import { homeLoader, LoaderToType } from "./loaders";
 import { isError } from "./api/dto";
 
 import "./Home.scss";
+import { HomeContextType } from "./HomeContext";
 
 export function Home() {
     const loaderData = useLoaderData() as LoaderToType<typeof homeLoader>;
@@ -42,7 +43,9 @@ export function Home() {
                 </div>
             </div>
             <div id="HomeContent">
-                <Outlet />
+                <Outlet
+                    context={{ user: loaderData } satisfies HomeContextType}
+                />
             </div>
         </div>
     );

client/src/HomeContext.tsx

@@ -0,0 +1,10 @@
+import { TPersonTo } from "./api/dto";
+import { useOutletContext } from "react-router-dom";
+
+export type HomeContextType = {
+    user: TPersonTo;
+};
+
+export function useHomeContext() {
+    return useOutletContext<HomeContextType>();
+}

client/src/Profile.tsx

@@ -3,6 +3,7 @@ import { Form, Link, useLoaderData } from "react-router-dom";
 import { LoaderToType, profileLoader } from "./loaders";
 import { isError } from "./api/dto";
 import { Post } from "./Post";
+import { useHomeContext } from "./HomeContext";
 
 export interface IProfileProps {
     self: boolean;
@@ -11,6 +12,8 @@ export interface IProfileProps {
 export function Profile({ self }: IProfileProps) {
     const loaderData = useLoaderData() as LoaderToType<typeof profileLoader>;
 
+    const homeContext = useHomeContext();
+
     if (!loaderData || isError(loaderData)) {
         return <div>Error</div>;
     }
@@ -22,8 +25,8 @@ export function Profile({ self }: IProfileProps) {
     return (
         <div className={"profileView"}>
             <div className={"profileInfo"}>
-                <span className={"fullName"}>{loaderData.user.fullName}</span>
-                <span className={"username"}>{loaderData.user.fullName}</span>
+                <span className={"fullName"}>{homeContext.user.fullName}</span>
+                <span className={"username"}>{homeContext.user.fullName}</span>
             </div>
             {self && (
                 <div className={"newPost"}>

client/src/ProfileCard.tsx

@@ -1,12 +1,18 @@
 import "./ProfileCard.scss";
-import { Link } from "react-router-dom";
+import { Form, Link } from "react-router-dom";
 
 export function ProfileCard({
     username,
     fullName,
+    uuid,
+    actions,
+    alreadyFollowing,
 }: {
     username: string;
     fullName: string;
+    uuid: string;
+    actions: boolean;
+    alreadyFollowing: boolean;
 }) {
     return (
         <div className={"profileCard"}>
@@ -16,6 +22,30 @@ export function ProfileCard({
             <Link to={`/home/profile/${username}`} className={"username"}>
                 {username}
             </Link>
+            {actions &&
+                (alreadyFollowing ? (
+                    <Form method={"put"}>
+                        <input hidden={true} value={uuid} name={"uuid"} />
+                        <button
+                            type={"submit"}
+                            name={"intent"}
+                            value={"unfollow"}
+                        >
+                            unfollow
+                        </button>
+                    </Form>
+                ) : (
+                    <Form method={"put"}>
+                        <input hidden={true} value={uuid} name={"uuid"} />
+                        <button
+                            type={"submit"}
+                            name={"intent"}
+                            value={"follow"}
+                        >
+                            follow
+                        </button>
+                    </Form>
+                ))}
         </div>
     );
 }

client/src/UserList.tsx

@@ -2,22 +2,33 @@ import { useLoaderData } from "react-router-dom";
 import { LoaderToType, userListLoader } from "./loaders";
 import { isError } from "./api/dto";
 import { ProfileCard } from "./ProfileCard";
+import { useHomeContext } from "./HomeContext";
 
 export function UserList() {
     const loaderData = useLoaderData() as LoaderToType<typeof userListLoader>;
+    const homeContext = useHomeContext();
 
-    if (!loaderData || isError(loaderData)) {
+    if (!loaderData) {
         return <div>Error</div>;
     }
 
+    const { people, following } = loaderData;
+    if (isError(following) || isError(people)) {
+        return <div>Error</div>;
+    }
     return (
         <div>
-            {loaderData.map((u) => {
+            {people.map((u) => {
                 return (
                     <ProfileCard
                         username={u.username}
                         fullName={u.fullName}
+                        uuid={u.uuid}
                         key={u.uuid}
+                        actions={homeContext.user.uuid != u.uuid}
+                        alreadyFollowing={following.some(
+                            (f) => f.uuid == u.uuid,
+                        )}
                     />
                 );
             })}

client/src/actions.ts

@@ -1,4 +1,4 @@
-import { signup } from "./api/Person";
+import { addFollower, removeFollower, signup } from "./api/Person";
 import { ActionFunctionArgs, redirect } from "react-router-dom";
 import { login } from "./api/Token";
 import { isError } from "./api/dto";
@@ -61,3 +61,14 @@ export async function profileSelfAction({ request }: ActionFunctionArgs) {
         );
     }
 }
+
+export async function userListAction({ request }: ActionFunctionArgs) {
+    const formData = await request.formData();
+    const intent = formData.get("intent")!.toString();
+    console.log(intent);
+    if (intent == "follow") {
+        return await addFollower(formData.get("uuid")!.toString());
+    } else if (intent == "unfollow") {
+        return await removeFollower(formData.get("uuid")!.toString());
+    }
+}

client/src/api/Person.ts

@@ -1,7 +1,9 @@
 import { fetchJSON, fetchJSONAuth } from "./utils";
 import {
+    NoContentToResp,
     PersonToArrResp,
     PersonToResp,
+    TNoContentToResp,
     TPersonToArrResp,
     TPersonToResp,
 } from "./dto";
@@ -30,6 +32,10 @@ export async function getAllPerson(): Promise<TPersonToArrResp> {
     return fetchJSONAuth("/person", "GET", PersonToArrResp);
 }
 
+export async function getFollowing(): Promise<TPersonToArrResp> {
+    return fetchJSONAuth("/person/following", "GET", PersonToArrResp);
+}
+
 export async function getPersonByUsername(
     username: string,
 ): Promise<TPersonToResp> {
@@ -39,3 +45,15 @@ export async function getPersonByUsername(
         PersonToResp,
     );
 }
+
+export async function addFollower(uuid: string): Promise<TNoContentToResp> {
+    return fetchJSONAuth("/person/following/" + uuid, "PUT", NoContentToResp);
+}
+
+export async function removeFollower(uuid: string): Promise<TNoContentToResp> {
+    return fetchJSONAuth(
+        "/person/following/" + uuid,
+        "DELETE",
+        NoContentToResp,
+    );
+}

client/src/api/Post.ts

@@ -17,6 +17,22 @@ export async function deletePost(id: number): Promise<TNoContentToResp> {
     return fetchJSONAuth(`/post/${id.toString()}`, "DELETE", NoContentToResp);
 }
 
-export async function getPosts(author: string): Promise<TPostToArrResp> {
-    return fetchJSONAuth(`/post?author=${author}`, "GET", PostToArrResp);
+export async function getPostsByAuthorUuid(
+    author: string,
+): Promise<TPostToArrResp> {
+    return fetchJSONAuth(
+        `/post/by-author-uuid?author=${author}`,
+        "GET",
+        PostToArrResp,
+    );
+}
+
+export async function getPostsByAuthorUsername(
+    author: string,
+): Promise<TPostToArrResp> {
+    return fetchJSONAuth(
+        `/post/by-author-username?author=${author}`,
+        "GET",
+        PostToArrResp,
+    );
 }

client/src/api/utils.ts

@@ -1,5 +1,8 @@
 // import { apiRoot } from "~src/env";
 
+import { jwtDecode } from "jwt-decode";
+import { isError, TErrorTo } from "./dto";
+
 const apiRoot: string = "http://localhost:8080";
 
 let token: string | null;
@@ -16,6 +19,12 @@ export function getToken(): string | null {
     return token;
 }
 
+export function getTokenUserUuid(): string | null {
+    const token = getToken();
+    if (!token) return null;
+    return jwtDecode(token).sub ?? null;
+}
+
 export function deleteToken(): void {
     token = null;
     localStorage.removeItem("jwt_token");

client/src/loaders.ts

@@ -1,8 +1,13 @@
-import { getAllPerson, getPersonByUsername, getSelf } from "./api/Person";
-import { deleteToken, getToken } from "./api/utils";
+import {
+    getAllPerson,
+    getFollowing,
+    getPersonByUsername,
+    getSelf,
+} from "./api/Person";
+import { deleteToken, getToken, getTokenUserUuid } from "./api/utils";
 import { redirect } from "react-router-dom";
 import { isError } from "./api/dto";
-import { getPosts } from "./api/Post";
+import { getPostsByAuthorUsername, getPostsByAuthorUuid } from "./api/Post";
 
 export type LoaderToType<T extends (...args: any) => any> =
     | Exclude<Awaited<ReturnType<T>>, Response>
@@ -25,7 +30,7 @@ export async function homeLoader() {
 }
 
 export async function userListLoader() {
-    return await getAllPerson();
+    return { people: await getAllPerson(), following: await getFollowing() };
 }
 
 export async function profileLoader({
@@ -33,27 +38,31 @@ export async function profileLoader({
 }: {
     params: { username?: string };
 }) {
-    const self = await getCheckUserSelf();
-    if (!self || self instanceof Response || isError(self)) {
-        return self;
-    }
-
-    if (self.username == params.username) {
+    const selfUuid = getTokenUserUuid();
+    if (!selfUuid) return redirect("/");
+    if (selfUuid == params.username) {
         return redirect("/home/profile");
     }
 
-    const user = params.username
-        ? await getPersonByUsername(params.username)
-        : self;
-    if (!user || user instanceof Response || isError(user)) {
-        return user;
-    }
+    const posts = params.username
+        ? await getPostsByAuthorUsername(params.username)
+        : await getPostsByAuthorUuid(selfUuid);
 
-    const posts = await getPosts(user.uuid);
+    const retUser = params.username
+        ? await getPersonByUsername(params.username)
+        : null;
+
+    if (
+        (params.username && !retUser) ||
+        retUser instanceof Response ||
+        isError(retUser)
+    ) {
+        return retUser;
+    }
 
     if (isError(posts)) {
-        return { user, posts: null };
+        return { user: retUser, posts: null };
     }
 
-    return { user, posts };
+    return { user: retUser, posts };
 }