GenerateNU · alderwhiteford · Jun 20, 2024 · Jun 20, 2024 · Jun 20, 2024
diff --git a/backend/entities/clubs/followers/routes.go b/backend/entities/clubs/followers/routes.go
@@ -1,8 +1,6 @@
 package followers
 
 import (
-	authMiddleware "github.com/GenerateNU/sac/backend/middleware/auth"
-
 	"github.com/GenerateNU/sac/backend/types"
 )
 
@@ -15,12 +13,12 @@ func ClubFollower(clubParams types.RouteParams) {
 	clubFollowers.Get("/", clubParams.UtilityMiddleware.Paginator, clubFollowerController.GetClubFollowers)
 	clubFollowers.Post(
 		"/:userID",
-		authMiddleware.AttachExtractor(clubParams.AuthMiddleware.ClubAuthorizeById, authMiddleware.ExtractFromParams("clubID")),
+		clubParams.AuthMiddleware.UserAuthorizeById,
 		clubFollowerController.CreateClubFollowing,
 	)
 	clubFollowers.Delete(
 		"/:userID",
-		authMiddleware.AttachExtractor(clubParams.AuthMiddleware.ClubAuthorizeById, authMiddleware.ExtractFromParams("clubID")),
+		clubParams.AuthMiddleware.UserAuthorizeById,
 		clubFollowerController.DeleteClubFollowing,
 	)
 }
diff --git a/frontend/lib/package.json b/frontend/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@generatesac/lib",
-  "version": "0.0.184",
+  "version": "0.0.186",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/frontend/lib/src/api/clubApi.ts b/frontend/lib/src/api/clubApi.ts
@@ -2,6 +2,7 @@ import { z } from "zod";
 
 import {
   Club,
+  CreateClubFollower,
   CreateClubRequestBody,
   CreateClubTagsRequestBody,
   UpdateClubRequestBody,
@@ -132,6 +133,22 @@ export const clubApi = baseApi.injectEndpoints({
         return z.array(eventSchema).parse(response);
       },
     }),
+    createClubFollower: builder.mutation<void, CreateClubFollower>({
+      query: ({ club_id, user_id }) => ({
+        url: `${CLUB_API_BASE_URL}/${club_id}/followers/${user_id}`,
+        method: "POST",
+        responseHandler: "text"
+      }),
+      invalidatesTags: ["Follower"],
+    }),
+    deleteClubFollower: builder.mutation<void, CreateClubFollower>({
+      query: ({ club_id, user_id }) => ({
+        url: `${CLUB_API_BASE_URL}/${club_id}/followers/${user_id}`,
+        method: "DELETE",
+        responseHandler: "text"
+      }),
+      invalidatesTags: ["Follower"],
+    }),
     clubFollowers: builder.query<
       User[],
       { id: string; queryParams?: PaginationQueryParams }
@@ -154,47 +171,6 @@ export const clubApi = baseApi.injectEndpoints({
         return z.array(userSchema).parse(response);
       },
     }),
-    clubMembers: builder.query<
-      User[],
-      { id: string; queryParams?: PaginationQueryParams }
-    >({
-      query: ({ id, queryParams }) => ({
-        url: handleQueryParams(
-          `${CLUB_API_BASE_URL}/${id}/members/`,
-          queryParams,
-        ),
-        method: "GET",
-      }),
-      providesTags: (result) =>
-        result
-          ? result.map((member) => ({ type: "User", id: member.id }))
-          : ["User"],
-      transformResponse: (response) => {
-        return z.array(userSchema).parse(response);
-      },
-    }),
-    createClubMember: builder.mutation<
-      User,
-      { clubID: string; userID: string }
-    >({
-      query: ({ clubID, userID }) => ({
-        url: `${CLUB_API_BASE_URL}/${clubID}/members/${userID}`,
-        method: "POST",
-      }),
-      invalidatesTags: (result, _, { userID }) =>
-        result ? [{ type: "User", id: userID }] : [],
-    }),
-    deleteClubMember: builder.mutation<
-      void,
-      { clubID: string; userID: string }
-    >({
-      query: ({ clubID, userID }) => ({
-        url: `${CLUB_API_BASE_URL}/${clubID}/members/${userID}`,
-        method: "DELETE",
-      }),
-      invalidatesTags: (result, _, { userID }) =>
-        result ? [{ type: "User", id: userID }] : [],
-    }),
     clubPointOfContacts: builder.query<PointOfContact[], string>({
       query: (id) => ({
         url: `${CLUB_API_BASE_URL}/${id}/pocs/`,

diff --git a/frontend/lib/src/api/userApi.ts b/frontend/lib/src/api/userApi.ts
@@ -1,6 +1,5 @@
 import { z } from "zod";
 
-import { Club, clubSchema } from "../types/club";
 import { PaginationQueryParams } from "../types/root";
 import { Tag, tagSchema } from "../types/tag";
 import {
@@ -11,6 +10,7 @@ import {
   userSchema,
 } from "../types/user";
 import { baseApi, handleQueryParams } from "./base";
+import { Club, clubSchema } from "../types";
 
 const USER_API_BASE_URL = "/users";
 
@@ -81,54 +81,6 @@ export const userApi = baseApi.injectEndpoints({
       }),
       invalidatesTags: (_result, _, id) => [{ type: "User", id }],
     }),
-    userFollowing: builder.query<Club[], string>({
-      query: (id) => ({
-        url: `${USER_API_BASE_URL}/${id}/follower/`,
-        method: "GET",
-      }),
-      providesTags: (result, _, id) =>
-        result
-          ? [{ type: "Follower", id }, "Club"]
-          : [{ type: "Follower", id }],
-      transformResponse: (response) => {
-        return z.array(clubSchema).parse(response);
-      },
-    }),
-    createUserFollowing: builder.mutation<
-      void,
-      { userID: string; clubID: string }
-    >({
-      query: ({ userID, clubID }) => ({
-        url: `${USER_API_BASE_URL}/${userID}/follower/${clubID}`,
-        method: "POST",
-      }),
-      invalidatesTags: (_result, _, { userID }) => [
-        { type: "Follower", id: userID },
-      ],
-    }),
-    deleteUserFollowing: builder.mutation<
-      void,
-      { userID: string; clubID: string }
-    >({
-      query: ({ userID, clubID }) => ({
-        url: `${USER_API_BASE_URL}/${userID}/follower/${clubID}`,
-        method: "DELETE",
-      }),
-      invalidatesTags: (_result, _, { userID }) => [
-        { type: "Follower", id: userID },
-      ],
-    }),
-    userMembership: builder.query<Club[], string>({
-      query: (id) => ({
-        url: `${USER_API_BASE_URL}/${id}/member/`,
-        method: "GET",
-      }),
-      providesTags: (result, _, id) =>
-        result ? [{ type: "Member", id }, "Club"] : [{ type: "Member", id }],
-      transformResponse: (response) => {
-        return z.array(clubSchema).parse(response);
-      },
-    }),
     userTags: builder.query<Tag[], void>({
       query: () => ({
         url: `${USER_API_BASE_URL}/tags/`,
@@ -159,5 +111,14 @@ export const userApi = baseApi.injectEndpoints({
       }),
       invalidatesTags: (_result, _, id) => [{ type: "Tag", id }],
     }),
+    getUserFollowing: builder.query<Club[], string>({
+      query: (id) => ({
+        url: `${USER_API_BASE_URL}/${id}/follower`,
+        method: "GET",
+      }),
+      transformResponse: (response) => {
+        return z.array(clubSchema).parse(response);
+      },
+    })
   }),
 });
diff --git a/frontend/lib/src/types/club.ts b/frontend/lib/src/types/club.ts
@@ -42,6 +42,11 @@ const clubSchemaIntermediate = z.object({
   recruitment: recruitmentSchema.optional(),
 });
 
+const createClubFollowerSchema = z.object({
+  club_id: z.string().uuid(),
+  user_id: z.string().uuid(),
+});
+
 export const clubSchema = clubSchemaIntermediate.merge(rootModelSchema);
 
 // Types:
@@ -50,4 +55,5 @@ export type UpdateClubRequestBody = z.infer<typeof updateClubRequestBodySchema>;
 export type CreateClubTagsRequestBody = z.infer<
   typeof createClubTagsRequestBodySchema
 >;
+export type CreateClubFollower = z.infer<typeof createClubFollowerSchema>;
 export type Club = z.infer<typeof clubSchema>;
diff --git a/frontend/mobile/package.json b/frontend/mobile/package.json
@@ -25,7 +25,7 @@
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@fortawesome/react-fontawesome": "^0.2.2",
         "@fortawesome/react-native-fontawesome": "^0.3.2",
-        "@generatesac/lib": "0.0.184",
+        "@generatesac/lib": "0.0.186",
         "@gorhom/bottom-sheet": "^4.6.3",
         "@hookform/resolvers": "^3.4.2",
         "@react-native-async-storage/async-storage": "^1.23.1",

diff --git a/frontend/mobile/src/app/app/(tabs)/_layout.tsx b/frontend/mobile/src/app/app/(tabs)/_layout.tsx
@@ -4,7 +4,6 @@ import { Tabs } from 'expo-router';
 
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { faCalendarDays } from '@fortawesome/free-solid-svg-icons/faCalendarDays';
-import { faHouse } from '@fortawesome/free-solid-svg-icons/faHouse';
 import { faUser } from '@fortawesome/free-solid-svg-icons/faUser';
 
 import { Text } from '@/src/app/design-system';
@@ -49,17 +48,6 @@ const Layout = () => {
                     backgroundColor: 'white'
                 }}
             >
-                <Tabs.Screen
-                    name="index"
-                    options={{
-                        title: 'Home',
-                        headerShown: false,
-                        tabBarLabel: ({ focused }) =>
-                            TabBarLabel({ focused, title: 'Home' }),
-                        tabBarIcon: ({ focused }) =>
-                            TabBarIcon({ focused, icon: faHouse })
-                    }}
-                />
                 <Tabs.Screen
                     name="calendar"
                     options={{

diff --git a/frontend/mobile/src/app/app/(tabs)/index.tsx b/frontend/mobile/src/app/app/(tabs)/index.tsx
diff --git a/frontend/mobile/src/app/app/(tabs)/profile.tsx b/frontend/mobile/src/app/app/(tabs)/profile.tsx
@@ -6,7 +6,6 @@ import { router } from 'expo-router';
 
 import {
     IconDefinition,
-    faHeart,
     faSignOutAlt,
     faUser
 } from '@fortawesome/free-solid-svg-icons';
@@ -62,7 +61,7 @@ const ProfilePage = () => {
                     </Box>
                 </Box>
                 <Box width="100%">
-                    <ProfileItem
+                    {/* <ProfileItem
                         onPress={() => router.push('/app/user/detail/')}
                         icon={faUser}
                         text="Edit Profile"
@@ -71,6 +70,11 @@ const ProfilePage = () => {
                         icon={faHeart}
                         onPress={() => router.push('/app/user/interest/')}
                         text="Edit Interests"
+                    /> */}
+                    <ProfileItem
+                        icon={faUser}
+                        onPress={() => router.push('/app/user/following/')}
+                        text="Following"
                     />
                     <Box
                         width="100%"
@@ -94,7 +98,6 @@ const ProfilePage = () => {
 
 const styles = StyleSheet.create({
     container: {
-        flex: 1,
         flexDirection: 'column',
         alignItems: 'flex-start',
         justifyContent: 'flex-start',

diff --git a/frontend/mobile/src/app/app/club/[id].tsx b/frontend/mobile/src/app/app/club/[id].tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { Dimensions, Linking } from 'react-native';
 import Animated, {
     interpolate,
@@ -10,6 +10,7 @@
 import { Stack, useLocalSearchParams } from 'expo-router';
 
 import { faExternalLink } from '@fortawesome/free-solid-svg-icons';
+import { clubApi } from '@generatesac/lib';
 import BottomSheet from '@gorhom/bottom-sheet';
 
 import {
@@ -22,7 +23,7 @@
 import { SACColors } from '@/src/app/design-system';
 import { Button } from '@/src/app/design-system/components/Button/Button';
 import useClub from '@/src/hooks/useClub';
-import { setClubId } from '@/src/store/slices/clubSlice';
+import { setUserFollowing } from '@/src/store/slices/userSlice';
 import { useAppDispatch, useAppSelector } from '@/src/store/store';
 
 import { AboutSection } from '../../design-system/components/AboutSection/AboutSection';
@@ -47,13 +48,35 @@
     const bottomSheet = useRef<BottomSheet>(null);
 
     const club = useAppSelector((state) => state.club);
+    const { id: user_id, following } = useAppSelector((state) => state.user);
     const dispatch = useAppDispatch();
-    const { setRetriggerFetch, apiLoading, apiError } = useClub();
+    const { setRetriggerFetch, apiLoading, apiError } = useClub(id);
+    const [followClub] = clubApi.useCreateClubFollowerMutation();
+    const [unFollowClub] = clubApi.useDeleteClubFollowerMutation();
 
-    useEffect(() => {
-        dispatch(setClubId(id));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    const clubFollowed = following.includes(id as string);
+
+    const handleUserFollow = (follow: boolean) => {
+        if (id) {
+            if (follow) {
+                followClub({ club_id: id, user_id }).then(({ error }) => {
+                    if (!error) {
+                        dispatch(setUserFollowing([...following, id]));
+                    }
+                });
+            } else {
+                unFollowClub({ club_id: id, user_id }).then(({ error }) => {
+                    if (!error) {
+                        dispatch(
+                            setUserFollowing(
+                                following.filter((clubId) => clubId !== id)
+                            )
+                        );
+                    }
+                });
+            }
+        }
+    };
 
     const headerAnimatedStyle = useAnimatedStyle(() => {
         return {
@@ -79,7 +102,7 @@
                    headerTitleStyle: {
                        color: 'white'
                    },
                    headerLeft: () => (
                        <Animated.View style={headerAnimatedStyle}>
                            <Arrow color={apiError ? 'black' : 'white'} />
                        </Animated.View>
@@ -92,7 +115,7 @@
                 scrollEventThrottle={16}
                 ref={scrollRef}
             >
-                {apiLoading ? (
+                {apiLoading || club.id !== id ? (
                     <ClubPageSkeleton />
                 ) : apiError ? (
                     <PageError refetch={setRetriggerFetch} />
@@ -119,8 +142,11 @@
                                         color={color}
                                         size="sm"
                                         variant="standardButton"
+                                        onPress={() =>
+                                            handleUserFollow(!clubFollowed)
+                                        }
                                     >
-                                        Follow
+                                        {clubFollowed ? 'Unfollow' : 'Follow'}
                                     </Button>
                                 </Box>
                             </Box>