feat: process departmentOption data in RQ

src/App.jsx

@@ -63,6 +63,8 @@ const store = createStore(
     : null,
 );
 
+const queryClient = new QueryClient();
+
 class App extends Component {
   portraitMediaQuery = window.matchMedia('(max-aspect-ratio: 4/3)');
 
@@ -171,7 +173,6 @@ class App extends Component {
 
   render() {
     const { popupOpen, doNotShowAgain } = this.state;
-    const queryClient = new QueryClient();
 
     const parseObject = (object) => {
       if (typeof object === 'object') {

src/components/sections/account/FavoriteDepartmentsSubSection.tsx

@@ -8,15 +8,13 @@ import {
   useSessionInfo,
   useUpdateFavoriteDepartments,
 } from '@/queries/account';
-import { useTranslatedString } from '@/hooks/useTranslatedString';
 
 const FavoriteDepartmentsSubSection = () => {
   const [selectedDepartments, setSelectedDepartments] = useState<Set<string>>(new Set([]));
 
   const { t } = useTranslation();
-  const translate = useTranslatedString();
   const { data: user } = useSessionInfo();
-  const { data: allDepartmentOptions } = useDepartmentOptions();
+  const { data: departmentOptions } = useDepartmentOptions();
   const { mutate: updateFavoriteDepartments } = useUpdateFavoriteDepartments();
 
   useEffect(() => {
@@ -34,14 +32,10 @@ const FavoriteDepartmentsSubSection = () => {
     });
   };
 
-  if (!user || !allDepartmentOptions) {
+  if (!user || !departmentOptions) {
     return null;
   }
 
-  const departmentOptions = allDepartmentOptions
-    .flat(1)
-    .map((d) => [String(d.id), `${translate(d, 'name')} (${d.code})`]);
-
   const hasChange =
     new Set(user.favorite_departments.map((d) => d.id.toString())).size !==
       selectedDepartments.size ||

src/queries/account.ts

@@ -1,3 +1,4 @@
+import { useTranslatedString } from '@/hooks/useTranslatedString';
 import User from '@/shapes/model/session/User';
 import Department from '@/shapes/model/subject/Department';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
@@ -21,11 +22,14 @@ export const useSessionInfo = () => {
 };
 
 export const useDepartmentOptions = () => {
+  const translate = useTranslatedString();
   return useQuery({
     queryKey: ['departmentOptions'],
     staleTime: Infinity,
     queryFn: async () => {
-      return (await axios.get<Department[][]>('/session/department-options')).data;
+      return (await axios.get<Department[][]>('/session/department-options')).data
+        .flat(1)
+        .map((d) => [String(d.id), `${translate(d, 'name')} (${d.code})`]);
     },
   });
 };