From 95a576bd2177129f046db2ca9491c245d9d2f05b Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 7 Nov 2020 16:59:40 +0200
Subject: [PATCH] profile use swr

---
 package-lock.json        | 21 +++++++++++++++++++++
 package.json             |  1 +
 pages/_app.tsx           |  1 +
 pages/u/[identifier].tsx | 22 ++++++++++++++--------
 scenes/Layout/index.tsx  | 22 +++++++++++++++++++---
 5 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5e96ef287..8317cee6f 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 8df5d2a56..51da04f55 100644
--- a/package.json
+++ b/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": {
diff --git a/pages/_app.tsx b/pages/_app.tsx
index d18510c4f..d03d4be8a 100644
--- a/pages/_app.tsx
+++ b/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}>
diff --git a/pages/u/[identifier].tsx b/pages/u/[identifier].tsx
index 635fb2dbc..1a68b7d2e 100644
--- a/pages/u/[identifier].tsx
+++ b/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 (
diff --git a/scenes/Layout/index.tsx b/scenes/Layout/index.tsx
index b93c8a457..d19859865 100644
--- a/scenes/Layout/index.tsx
+++ b/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>
   );
 };