Request Auth + Frontend Reorg (#995)

frontend/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@generatesac/lib",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

frontend/lib/src/api/base.ts

@@ -7,13 +7,14 @@ export const baseApi = createApi({
   baseQuery: fetchBaseQuery({
     baseUrl: API_BASE_URL,
     credentials: "include",
-    // prepareHeaders: async (headers, { getState }) => {
-    //   const token = (getState() as { auth: { token: string } })?.auth.token;
-    //   if (token) {
-    //     headers.set("Authorization", `Bearer ${token}`);
-    //   }
-    //   return headers;
-    // },
+    prepareHeaders: async (headers, { getState }) => {
+      // User slice existing must exist in all dependent apps:
+      const token = (getState() as { user: { accessToken: string } })?.user?.accessToken;
+      if (token) {
+        headers.set("Authorization", `Bearer ${token}`);
+      }
+      return headers;
+    },
   }),
   tagTypes: [
     "User",

frontend/lib/src/api/categoryApi.ts

@@ -32,7 +32,7 @@ export const categoryApi = baseApi.injectEndpoints({
       transformResponse: (response: Category[]) => {
         return z.array(categorySchema).parse(response);
       },
-      providesTags: (result, _, _arg) =>
+      providesTags: (result) =>
         result
           ? result.map((category) => ({
               type: "Category",
@@ -84,7 +84,7 @@ export const categoryApi = baseApi.injectEndpoints({
         ),
         method: "GET",
       }),
-      providesTags: (result, _, _arg) =>
+      providesTags: (result) =>
         result ? result.map((tag) => ({ type: "Tag", id: tag.id })) : ["Tag"],
     }),
     categoryTag: builder.query<Tag, { categoryID: string; tagID: string }>({

frontend/lib/src/api/clubApi.ts

@@ -43,7 +43,7 @@ export const clubApi = baseApi.injectEndpoints({
         url: handleQueryParams(`${CLUB_API_BASE_URL}/`, queryParams),
         method: "GET",
       }),
-      providesTags: (result, _, _arg) =>
+      providesTags: (result) =>
         result
           ? result.map((club) => ({ type: "Club", id: club.id }))
           : ["Club"],
@@ -88,7 +88,7 @@ export const clubApi = baseApi.injectEndpoints({
         url: `${CLUB_API_BASE_URL}/${id}/contacts/`,
         method: "GET",
       }),
-      providesTags: (result, _, _arg) =>
+      providesTags: (result) =>
         result
           ? result.map((contact) => ({
               type: "Contact",
@@ -124,7 +124,7 @@ export const clubApi = baseApi.injectEndpoints({
         ),
         method: "GET",
       }),
-      providesTags: (result, _, _arg) =>
+      providesTags: (result) =>
         result
           ? result.map((event) => ({ type: "Event", id: event.id }))
           : ["Event"],
@@ -143,7 +143,7 @@ export const clubApi = baseApi.injectEndpoints({
         ),
         method: "GET",
       }),
-      providesTags: (result, _, _arg) =>
+      providesTags: (result) =>
         result
           ? result.map((follower) => ({
               type: "Follower",
@@ -165,7 +165,7 @@ export const clubApi = baseApi.injectEndpoints({
         ),
         method: "GET",
       }),
-      providesTags: (result, _, _arg) =>
+      providesTags: (result) =>
         result
           ? result.map((member) => ({ type: "User", id: member.id }))
           : ["User"],
@@ -200,7 +200,7 @@ export const clubApi = baseApi.injectEndpoints({
         url: `${CLUB_API_BASE_URL}/${id}/pocs/`,
         method: "GET",
       }),
-      providesTags: (result, _, _arg) =>
+      providesTags: (result) =>
         result
           ? result.map((poc) => ({
               type: "PointOfContact",
@@ -294,7 +294,7 @@ export const clubApi = baseApi.injectEndpoints({
         method: "POST",
         body,
       }),
-      invalidatesTags: (result, _, _arg) =>
+      invalidatesTags: (result) =>
         result ? result.map((tag) => ({ type: "Tag", id: tag.id })) : ["Tag"],
       transformResponse: (response) => {
         return z.array(tagSchema).parse(response);
@@ -305,7 +305,7 @@ export const clubApi = baseApi.injectEndpoints({
         url: `${CLUB_API_BASE_URL}/${id}/tags/`,
         method: "GET",
       }),
-      providesTags: (result, _, _arg) =>
+      providesTags: (result) =>
         result ? result.map((tag) => ({ type: "Tag", id: tag.id })) : ["Tag"],
       transformResponse: (response) => {
         return z.array(tagSchema).parse(response);

frontend/lib/src/api/userApi.ts

@@ -157,7 +157,7 @@ export const userApi = baseApi.injectEndpoints({
         method: "POST",
         body,
       }),
-      invalidatesTags: (result, _, _arg) =>
+      invalidatesTags: (result) =>
         result ? result.map((tag) => ({ type: "Tag", id: tag.id })) : ["Tag"],
       transformResponse: (response) => {
         return z.array(tagSchema).parse(response);

frontend/mobile/app.json

@@ -4,11 +4,11 @@
         "slug": "student-activity-calendar",
         "version": "1.0.3",
         "orientation": "portrait",
-        "icon": "./assets/images/icon.png",
+        "icon": "./src/assets/images/icon.png",
         "scheme": "myapp",
         "userInterfaceStyle": "automatic",
         "splash": {
-            "image": "./assets/images/splash.png",
+            "image": "./src/assets/images/splash.png",
             "resizeMode": "contain",
             "backgroundColor": "#ffffff"
         },
@@ -23,15 +23,15 @@
         },
         "android": {
             "adaptiveIcon": {
-                "foregroundImage": "./assets/images/adaptive-icon.png",
+                "foregroundImage": "./src/assets/images/adaptive-icon.png",
                 "backgroundColor": "#ffffff"
             },
             "package": "com.generatesac.studentactivitycalendar"
         },
         "web": {
             "bundler": "metro",
             "output": "static",
-            "favicon": "./assets/images/favicon.png"
+            "favicon": "./src/assets/images/favicon.png"
         },
         "plugins": [
             "expo-router",

frontend/mobile/package.json

@@ -28,6 +28,7 @@
         "@generatesac/lib": "0.0.12",
         "@gorhom/bottom-sheet": "^4.6.3",
         "@hookform/resolvers": "^3.4.2",
+        "@react-native-async-storage/async-storage": "^1.23.1",
         "@react-native-community/clipboard": "^1.5.1",
         "@react-navigation/native": "^6.0.2",
         "@reduxjs/toolkit": "^2.2.5",
@@ -69,6 +70,7 @@
         "react-native-webview": "^11.23.1",
         "react-redux": "^9.1.2",
         "redux": "^5.0.1",
+        "redux-persist": "^6.0.0",
         "zod": "^3.23.8"
     },
     "devDependencies": {

frontend/mobile/app/(app)/(tabs)/_layout.tsx → frontend/mobile/src/app/(app)/(tabs)/_layout.tsx

@@ -7,9 +7,9 @@ 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 '@/app/(design-system)';
-import { Box } from '@/app/(design-system)';
-import { Icon } from '@/app/(design-system)/components/Icon/Icon';
+import { Text } from '@/src/app/(design-system)';
+import { Box } from '@/src/app/(design-system)';
+import { Icon } from '@/src/app/(design-system)/components/Icon/Icon';
 
 interface TabBarLabelProps {
     focused: boolean;

frontend/mobile/app/(app)/(tabs)/calendar.tsx → frontend/mobile/src/app/(app)/(tabs)/calendar.tsx

@@ -8,13 +8,13 @@ import { Theme } from 'react-native-calendars-sac/src/types';
 
 import { eventApi } from '@generatesac/lib';
 
-import { Box, Colors, createStyles } from '@/app/(design-system)';
+import { Box, Colors, createStyles } from '@/src/app/(design-system)';
 import Calendar, {
     DAY_EPOCH_TIME,
     FetchNewEventsPropsUnion
-} from '@/app/(design-system)/components/Calendar/Calendar';
-import { EventSection } from '@/app/(design-system)/components/Calendar/DayTimeSection';
-import { parseData } from '@/app/(design-system)/components/Calendar/parser/calendarParser';
+} from '@/src/app/(design-system)/components/Calendar/Calendar';
+import { EventSection } from '@/src/app/(design-system)/components/Calendar/DayTimeSection';
+import { parseData } from '@/src/app/(design-system)/components/Calendar/parser/calendarParser';
 
 const TODAY = new Date();
 

frontend/mobile/app/(app)/(tabs)/index.tsx → frontend/mobile/src/app/(app)/(tabs)/index.tsx

@@ -3,8 +3,8 @@ import { Pressable, StyleSheet } from 'react-native';
 
 import { router } from 'expo-router';
 
-import { Box, Text } from '@/app/(design-system)';
-import { EventCard } from '@/app/(design-system)/components/EventCard';
+import { Box, Text } from '@/src/app/(design-system)';
+import { EventCard } from '@/src/app/(design-system)/components/EventCard';
 
 const HomePage = () => {
     const item = {

frontend/mobile/app/(app)/(tabs)/profile.tsx → frontend/mobile/src/app/(app)/(tabs)/profile.tsx

@@ -1,6 +1,6 @@
 import { StyleSheet, Text, View } from 'react-native';
 
-import { GlobalLayout } from '@/app/(design-system)/components/GlobalLayout/GlobalLayout';
+import { GlobalLayout } from '@/src/app/(design-system)/components/GlobalLayout/GlobalLayout';
 
 const ProfilePage = () => {
     return (

frontend/mobile/app/(app)/event/[id].tsx → frontend/mobile/src/app/(app)/event/[id].tsx

@@ -11,18 +11,18 @@ import { Stack, useLocalSearchParams } from 'expo-router';
 
 import BottomSheet from '@gorhom/bottom-sheet';
 
-import { Arrow, Box, KebabMenu } from '@/app/(design-system)';
-import { SACColors } from '@/app/(design-system)';
-import { Button } from '@/app/(design-system)/components/Button/Button';
-import { description, events, tags } from '@/consts/event-page';
+import { Arrow, Box, KebabMenu } from '@/src/app/(design-system)';
+import { SACColors } from '@/src/app/(design-system)';
+import { Button } from '@/src/app/(design-system)/components/Button/Button';
+import { description, events, tags } from '@/src/consts/event-page';
 
-import { AboutEvent } from '../event/components/about';
-import { Location } from '../event/components/location';
-import { Overview } from '../event/components/overview';
-import { UpcomingEvent } from '../event/components/upcoming-events';
+import { AboutEvent } from './components/about';
 import { Description } from './components/description';
+import { Location } from './components/location';
+import { Overview } from './components/overview';
 import { RegisterBottomSheet } from './components/register';
 import { ShareEventBottomSheet } from './components/share-event';
+import { UpcomingEvent } from './components/upcoming-events';
 
 type EventType = 'in-person' | 'virtual' | 'hybrid';
 

frontend/mobile/app/(app)/event/components/about.tsx → frontend/mobile/src/app/(app)/event/components/about.tsx

@@ -11,9 +11,9 @@ import {
     SACColors,
     Text,
     textColorVariants
-} from '@/app/(design-system)';
-import { Tag as TagComponent } from '@/app/(design-system)';
-import { Button } from '@/app/(design-system)/components/Button/Button';
+} from '@/src/app/(design-system)';
+import { Tag as TagComponent } from '@/src/app/(design-system)';
+import { Button } from '@/src/app/(design-system)/components/Button/Button';
 
 interface AboutEventProps {
     tags: Tag[];

frontend/mobile/app/(app)/event/components/description.tsx → frontend/mobile/src/app/(app)/event/components/description.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, useCallback } from 'react';
 
 import BottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet';
 
-import { Box, Text } from '@/app/(design-system)';
+import { Box, Text } from '@/src/app/(design-system)';
 
 import { Divider } from './divider';
 

frontend/mobile/app/(app)/event/components/divider.tsx → frontend/mobile/src/app/(app)/event/components/divider.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@/app/(design-system)';
+import { Box } from '@/src/app/(design-system)';
 
 export const Divider = () => {
     return <Box width="100%" height={1} backgroundColor="gray" />;

frontend/mobile/app/(app)/event/components/location.tsx → frontend/mobile/src/app/(app)/event/components/location.tsx

@@ -1,8 +1,8 @@
 import MapView, { Marker } from 'react-native-maps';
 import { createOpenLink } from 'react-native-open-maps';
 
-import { Text } from '@/app/(design-system)';
-import { Box } from '@/app/(design-system)';
+import { Text } from '@/src/app/(design-system)';
+import { Box } from '@/src/app/(design-system)';
 
 // import Geocoder from 'react-native-geocoding';
 // import { useEffect, useState } from 'react';

frontend/mobile/app/(app)/event/components/overview.tsx → frontend/mobile/src/app/(app)/event/components/overview.tsx

@@ -6,9 +6,9 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 import { Avatar } from '@rneui/base';
 
-import { Box, Colors, SACColors, Text } from '@/app/(design-system)';
-import { firstLetterUppercase } from '@/utils/string';
-import { createOptions, eventTime } from '@/utils/time';
+import { Box, Colors, SACColors, Text } from '@/src/app/(design-system)';
+import { firstLetterUppercase } from '@/src/utils/string';
+import { createOptions, eventTime } from '@/src/utils/time';
 
 interface OverviewProps {
     logo: string;