Merge branch 'refactor/use-swr-admin' into 'master'

Refactor: Update some admin pages to use swr hooks

See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!42

package-lock.json

@@ -11,6 +11,7 @@
         "@next/bundle-analyzer": "10.0.7",
         "axios": "0.21.1",
         "date-fns": "2.18.0",
+        "fast-deep-equal": "^3.1.3",
         "js-cookie": "2.2.1",
         "lodash": "4.17.21",
         "next": "10.0.8",

package.json

@@ -65,6 +65,7 @@
     "@next/bundle-analyzer": "10.0.7",
     "axios": "0.21.1",
     "date-fns": "2.18.0",
+    "fast-deep-equal": "^3.1.3",
     "js-cookie": "2.2.1",
     "lodash": "4.17.21",
     "next": "10.0.8",

src/hooks/useFetchEvents.ts

@@ -1,4 +1,6 @@
+import { useRef } from "react";
 import useSWR from "swr";
+import isDeepEqual from "fast-deep-equal/react";
 import axios, { AxiosRequestConfig } from "axios";
 import Event from "@models/Event";
 import { getAuthHeader } from "@utils/auth";
@@ -34,7 +36,14 @@ const useFetchEvents = ({
   options = {},
 }: FetchArguments) => {
   const { url, config } = generateFetchParams(id, options);
-  const { data, error } = useSWR([url, config], fetcher, { initialData });
+
+  // Use ref, since config dependency is non-primitive => without this we have infinite fetch loop
+  const configRef = useRef(config);
+  if (!isDeepEqual(configRef.current, config)) {
+    configRef.current = config;
+  }
+
+  const { data, error } = useSWR([url, configRef.current], fetcher, { initialData });
   return {
     data: data?.results || data,
     error,

src/hooks/useFetchFeed.ts

@@ -1,4 +1,6 @@
+import { useRef } from "react";
 import useSWR from "swr";
+import isDeepEqual from "fast-deep-equal/react";
 import axios, { AxiosRequestConfig } from "axios";
 import Post from "@models/Feed";
 import { getAuthHeader } from "@utils/auth";
@@ -30,7 +32,14 @@ const useFetchFeed = ({
   options = {},
 }: FetchArguments) => {
   const { url, config } = generateFetchParams(id, options);
-  const { data, error } = useSWR([url, config], feedFetcher, { initialData });
+
+  // Use ref, since config dependency is non-primitive => without this we have infinite fetch loop
+  const configRef = useRef(config);
+  if (!isDeepEqual(configRef.current, config)) {
+    configRef.current = config;
+  }
+
+  const { data, error } = useSWR([url, configRef.current], feedFetcher, { initialData });
   return {
     data: data?.results || data,
     error,

src/hooks/useFetchJobAds.ts

@@ -1,5 +1,7 @@
-import axios, { AxiosRequestConfig } from "axios";
+import { useRef } from "react";
 import useSWR from "swr";
+import isDeepEqual from "fast-deep-equal/react";
+import axios, { AxiosRequestConfig } from "axios";
 import JobAd from "@models/JobAd";
 import { getAuthHeader } from "@utils/auth";
 import { URL, Options } from "@api/jobAdApi";
@@ -30,7 +32,14 @@ const useFetchJobAds = ({
   options = {},
 }: FetchArguments) => {
   const { url, config } = generateFetchParams(id, options);
-  const { data, error } = useSWR([url, config], jobAdFetcher, { initialData });
+
+  // Use ref, since config dependency is non-primitive => without this we have infinite fetch loop
+  const configRef = useRef(config);
+  if (!isDeepEqual(configRef.current, config)) {
+    configRef.current = config;
+  }
+
+  const { data, error } = useSWR([url, configRef.current], jobAdFetcher, { initialData });
   return {
     data: data?.results || data,
     error,

src/pages/admin/events/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { NextPage } from "next";
 import Head from "next/head";
 import { formatRelative } from "date-fns";
@@ -6,7 +6,7 @@ import AdminListCommon from "@views/admin/AdminListCommon";
 import { Link } from "@components/index";
 import AddLink from "@components/AddLink";
 import Event from "@models/Event";
-import EventApi from "@api/eventApi";
+import useFetchEvents from "@hooks/useFetchEvents";
 
 const URL = "/admin/events";
 
@@ -37,13 +37,7 @@ const renderData = (events: Event[]) => {
   );
 };
 const AdminEventPage: NextPage = () => {
-  const [events, setEvents] = useState<Event[]>(null);
-
-  useEffect(() => {
-    EventApi.getEvents({ auth: true })
-      .then((res) => setEvents(res));
-  }, []);
-
+  const { data } = useFetchEvents({ options: { auth: true } });
   return (
     <>
       <Head>
@@ -52,7 +46,7 @@ const AdminEventPage: NextPage = () => {
       <AdminListCommon>
         <h1>Events</h1>
         <AddLink text="Create event" to={`${URL}/create`} data-e2e="create-event" />
-        {renderData(events)}
+        {renderData(data)}
       </AdminListCommon>
     </>
   );

src/pages/admin/feed/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { NextPage } from "next";
 import Head from "next/head";
 import { formatRelative } from "date-fns";
@@ -6,7 +6,7 @@ import AdminListCommon from "@views/admin/AdminListCommon";
 import { Link } from "@components/index";
 import AddLink from "@components/AddLink";
 import Post from "@models/Feed";
-import FeedApi from "@api/feedApi";
+import useFetchFeed from "@hooks/useFetchFeed";
 
 const URL = "/admin/feed";
 
@@ -38,13 +38,7 @@ const renderData = (feed: Post[]) => {
 };
 
 const AdminFeedPage: NextPage = () => {
-  const [forms, setForms] = useState<Post[]>(null);
-
-  useEffect(() => {
-    FeedApi.getFeed({ auth: true })
-      .then((res) => setForms(res));
-  }, []);
-
+  const { data } = useFetchFeed({ options: { auth: true } });
   return (
     <>
       <Head>
@@ -53,7 +47,7 @@ const AdminFeedPage: NextPage = () => {
       <AdminListCommon>
         <h1>Feed</h1>
         <AddLink text="Create news post" to={`${URL}/create`} />
-        {renderData(forms)}
+        {renderData(data)}
       </AdminListCommon>
     </>
   );

src/pages/admin/jobads/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { NextPage } from "next";
 import Head from "next/head";
 import { formatRelative } from "date-fns";
@@ -6,7 +6,7 @@ import AdminListCommon from "@views/admin/AdminListCommon";
 import { Link } from "@components/index";
 import AddLink from "@components/AddLink";
 import JobAd from "@models/JobAd";
-import JobAdApi from "@api/jobAdApi";
+import useFetchJobAds from "@hooks/useFetchJobAds";
 
 const URL = "/admin/jobads";
 
@@ -42,13 +42,7 @@ const renderData = (jobAds: JobAd[]) => {
 };
 
 const AdminJobAdPage: NextPage = () => {
-  const [jobAds, setAds] = useState<JobAd[]>(null);
-
-  useEffect(() => {
-    JobAdApi.getJobAds({ auth: true })
-      .then((res) => setAds(res));
-  }, []);
-
+  const { data } = useFetchJobAds({ options: { auth: true } });
   return (
     <>
       <Head>
@@ -57,7 +51,7 @@ const AdminJobAdPage: NextPage = () => {
       <AdminListCommon>
         <h1>Job advertisements</h1>
         <AddLink text="Create job ad" to={`${URL}/create`} />
-        {renderData(jobAds)}
+        {renderData(data)}
       </AdminListCommon>
     </>
   );

src/pages/admin/signups/[id]/email.tsx

@@ -44,12 +44,8 @@ const buildUISchema = () => ({
   },
 });
 
-const SignupEmailPage: NextPage = () => {
+const useInitializeData = (id: string) => {
   const [signupForm, setSignupForm] = useState<SignupForm>(null);
-
-  const router = useRouter();
-  const { id } = router.query;
-
   useEffect(() => {
     const formId = Number(id);
     if (formId !== undefined) {
@@ -58,6 +54,14 @@ const SignupEmailPage: NextPage = () => {
     }
   }, [id]);
 
+  return signupForm;
+};
+
+const SignupEmailPage: NextPage = () => {
+  const router = useRouter();
+  const { id } = router.query;
+  const signupForm = useInitializeData(id as string);
+
   const [error, setError] = useState<string>(null);
   const [statusMessage, setStatusMessage] = useState<string>(null);
 

src/pages/signup/edit/[id]/[uuid].tsx

@@ -14,33 +14,27 @@ interface QueryParams {
 
 const parseQueryParams = (query: QueryParams) => {
   const { id, uuid } = query;
-
   return {
     signupId: id ? Number(id) : undefined,
     uuid,
   };
 };
 
-const EditSignUpPage: NextPage = () => {
-  const router = useRouter();
-  const { signupId, uuid } = parseQueryParams(router.query);
-  const [signUpForm, setForm] = useState(null);
+const useFetchSignup = (signupId: number, uuid: string) => {
+  const [form, setForm] = useState(null);
   const [formData, setFormData] = useState({});
-  const [statusMessage, setStatus] = useState(null);
 
   useEffect(() => {
     const fetchSignUpForm = async (id: number): Promise<SignupForm> => {
-      const formPromise = SignupApi.getForm(id);
-      formPromise.then((form) => {
-        setForm(form);
-      });
-      return formPromise;
+      const signupForm = await SignupApi.getForm(id);
+      setForm(signupForm);
+      return signupForm;
     };
 
     const fetchSignUp = async (id: number, uniqueId: string): Promise<Signup> => {
-      const signupPromise = SignupApi.getSignupUUID(id, uniqueId);
-      signupPromise.then((signup) => setFormData(signup.answer));
-      return signupPromise;
+      const signup = await SignupApi.getSignupUUID(id, uniqueId);
+      setFormData(signup.answer);
+      return signup;
     };
 
     if (signupId) {
@@ -48,10 +42,19 @@ const EditSignUpPage: NextPage = () => {
     }
   }, [signupId, uuid]);
 
+  return [form, formData];
+};
+
+const EditSignUpPage: NextPage = () => {
+  const router = useRouter();
+  const { signupId, uuid } = parseQueryParams(router.query);
+  const [statusMessage, setStatus] = useState(null);
+  const [form, formData] = useFetchSignup(signupId, uuid);
+
   const onSubmit = async (data) => {
     const payload: Signup = {
       id: Number(signupId),
-      signupForm_id: signUpForm.id,
+      signupForm_id: form.id,
       answer: data.formData,
     };
 
@@ -68,7 +71,7 @@ const EditSignUpPage: NextPage = () => {
   return (
     <PageWrapper>
       <SignUpPageView
-        signUpForm={signUpForm}
+        signUpForm={form}
         formData={formData}
         statusMessage={statusMessage}
         onChange={noop}