profile use swr

package-lock.json

@@ -7,6 +7,7 @@
     "": {
       "name": "sendou.ink",
       "version": "1.0.0",
+      "license": "MIT",
       "dependencies": {
         "@apollo/client": "^3.2.5",
         "@chakra-ui/core": "^1.0.0-rc.8",
@@ -33,6 +34,7 @@
         "react-icons": "^3.11.0",
         "react-markdown": "^5.0.2",
         "react-string-replace": "^0.4.4",
+        "swr": "^0.3.8",
         "zod": "^1.11.10"
       },
       "devDependencies": {
@@ -14877,6 +14879,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/swr": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-0.3.8.tgz",
+      "integrity": "sha512-EHRlaqoBtHsB2wOB+dQJ74DrZvaRGu4BaIQrhkD+/rj8/UGo2iQXN+rCcYnV7/VAreBJBmm9+lDkwZmUqWEkKA==",
+      "dependencies": {
+        "dequal": "2.0.2"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0"
+      }
+    },
     "node_modules/symbol-observable": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-2.0.3.tgz",
@@ -29278,6 +29291,14 @@
         "has-flag": "^4.0.0"
       }
     },
+    "swr": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-0.3.8.tgz",
+      "integrity": "sha512-EHRlaqoBtHsB2wOB+dQJ74DrZvaRGu4BaIQrhkD+/rj8/UGo2iQXN+rCcYnV7/VAreBJBmm9+lDkwZmUqWEkKA==",
+      "requires": {
+        "dequal": "2.0.2"
+      }
+    },
     "symbol-observable": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-2.0.3.tgz",

package.json

@@ -43,6 +43,7 @@
     "react-icons": "^3.11.0",
     "react-markdown": "^5.0.2",
     "react-string-replace": "^0.4.4",
+    "swr": "^0.3.8",
     "zod": "^1.11.10"
   },
   "devDependencies": {

pages/_app.tsx

@@ -96,6 +96,7 @@ const MyApp = (props: AppProps) => {
       <GoogleFonts
         href={`https://fonts.googleapis.com/css2?family=Rubik&display=swap`}
       />
+
       <NextAuthProvider session={props.pageProps.session}>
         <ApolloProvider client={apolloClient}>
           <ChakraProvider theme={extendedTheme}>

pages/u/[identifier].tsx

@@ -10,8 +10,9 @@ import {
   getUserByIdentifier,
   GetUserByIdentifierData,
 } from "prisma/queries/getUserByIdentifier";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import AvatarWithInfo from "scenes/Profile/components/AvatarWithInfo";
+import useSWR from "swr";
 
 const prisma = new PrismaClient();
 
@@ -36,7 +37,7 @@ interface Props {
 }
 
 export const getStaticProps: GetStaticProps<Props> = async ({ params }) => {
-  const user = await getUserByIdentifier(prisma, "tester");
+  const user = await getUserByIdentifier(prisma, params!.identifier as string);
 
   //const isCustomUrl = isNaN(Number(params!.identifier))
 
@@ -51,17 +52,22 @@ export const getStaticProps: GetStaticProps<Props> = async ({ params }) => {
 };
 
 const ProfilePage = (props: Props) => {
-  const [user, setUser] = useState(props.user);
   const [showModal, setShowModal] = useState(false);
 
-  useEffect(() => {
-    setUser(user);
-  }, [user]);
-
   const [loggedInUser] = useUser();
+  const { data: user, mutate } = useSWR<GetUserByIdentifierData>(
+    () => {
+      // no need to load user if it's not the same as currently logged in user
+      const userId = props.user?.id;
+      if (!!userId && userId === loggedInUser?.id) return null;
+
+      return `/api/users/${userId}`;
+    },
+    { initialData: props.user }
+  );
 
   // same as router.isFallback
-  // FIXME: return null
+  // FIXME: return spinner
   if (!user) return null;
 
   return (

scenes/Layout/index.tsx

@@ -1,6 +1,9 @@
-import { Container, Flex } from "@chakra-ui/core";
+import { Container, Flex, useToast } from "@chakra-ui/core";
+import { t } from "@lingui/macro";
+import { getToastOptions } from "lib/getToastOptions";
 import { AppProps } from "next/app";
 import { useRouter } from "next/dist/client/router";
+import { SWRConfig } from "swr";
 import Footer from "./components/Footer";
 import IconNavBar from "./components/IconNavBar";
 import TopNav from "./components/TopNav";
@@ -14,10 +17,23 @@ const PAGES_WITH_WIDE_CONTAINER = [
 ];
 
 const Layout = ({ Component, pageProps }: AppProps) => {
+  const toast = useToast();
   const pathname = useRouter().pathname;
 
   return (
-    <>
+    <SWRConfig
+      value={{
+        fetcher: (resource, init) =>
+          fetch(resource, init).then((res) => res.json()),
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false,
+        onError: (error) => {
+          toast(
+            getToastOptions(error.message ?? t`An error occurred`, "error")
+          );
+        },
+      }}
+    >
       <TopNav />
       <IconNavBar />
       <Flex flexDirection="column" minH="100vh" pt="1rem">
@@ -30,7 +46,7 @@ const Layout = ({ Component, pageProps }: AppProps) => {
         </Container>
         <Footer />
       </Flex>
-    </>
+    </SWRConfig>
   );
 };