Merge pull request #448 from filipedeschamps/cache-use-user2

Fazer o cache do `user` no `localStorage`

.github/workflows/ci.yml

@@ -25,7 +25,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: '16.15.0'
           cache: 'npm'
       - run: npm ci
       - run: npm run dev & npx jest --runInBand
@@ -41,7 +41,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: '16.15.0'
           cache: 'npm'
       - run: npm ci
       - run: npm run lint

.nvmrc

@@ -1 +1 @@
-v16
+v16.15.0

package.json

@@ -72,7 +72,7 @@
     "migration:seed": "node infra/scripts/seed-database.js"
   },
   "engines": {
-    "node": "^16"
+    "node": "16.15.0"
   },
   "name": "tabnews.com.br",
   "description": "Conteúdos para quem vive de programação e tecnologia.",

pages/interface/components/Content/index.js

@@ -192,8 +192,7 @@ export default function Content({ content, mode = 'view', viewFrame = false }) {
               </Tooltip>
             </Box>
             <Box>
-              {user &&
-                (user.id === contentObject.owner_id || user.features?.includes('update:content:others')) &&
+              {(user?.id === contentObject.owner_id || user?.features?.includes('update:content:others')) &&
                 ViewModeOptionsMenu()}
             </Box>
           </Box>
@@ -254,7 +253,7 @@ export default function Content({ content, mode = 'view', viewFrame = false }) {
     const handleSubmit = useCallback(
       async (event) => {
         event.preventDefault();
-        if (!user.username) {
+        if (!user?.username) {
           router.push('/login');
           return;
         }

pages/interface/components/Header/index.js

@@ -1,28 +1,26 @@
-import { useRouter } from 'next/router';
-import { Header, Box, Button, ActionMenu, ActionList } from '@primer/react';
+import { Header, Box, ActionMenu, ActionList } from '@primer/react';
 import { CgTab } from 'react-icons/cg';
 import { useUser } from 'pages/interface/index.js';
 
 export default function HeaderComponent() {
-  const router = useRouter();
   const { user, isLoading } = useUser();
 
   return (
     <Header>
-      <Header.Item full>
+      <Header.Item>
         <Header.Link href="/" fontSize={2}>
           <CgTab size={32} />
           <Box sx={{ ml: 2 }}>TabNews</Box>
         </Header.Link>
       </Header.Item>
 
-      <Header.Item>
+      <Header.Item full>
         <Header.Link href="/status" fontSize={2}>
           Status
         </Header.Link>
       </Header.Item>
 
-      {!isLoading && !user.username && (
+      {!isLoading && !user?.username && (
         <>
           <Header.Item>
             <Header.Link href="/login" fontSize={2}>
@@ -37,7 +35,7 @@ export default function HeaderComponent() {
         </>
       )}
 
-      {!isLoading && user.username && (
+      {user?.username && (
         <>
           <Header.Item>
             <ActionMenu>

pages/interface/hooks/useUser/index.js

@@ -1,11 +1,46 @@
 import useSWR from 'swr';
 
+async function fetcher(url) {
+  const response = await fetch(url);
+  const responseBody = await response.json();
+
+  if (response.status === 401 || response.status === 403) {
+    const error = new Error(responseBody.message);
+    error.status = response.status;
+    throw error;
+  }
+
+  return responseBody;
+}
+
+const userEndpoint = '/api/v1/user';
+
 export default function useUser() {
-  const { data, isLoading, isValidating, error } = useSWR('/api/v1/user', {
+  const { data, isLoading, isValidating, error } = useSWR(userEndpoint, fetcher, {
+    shouldRetryOnError: false,
     revalidateOnFocus: false,
     revalidateOnReconnect: false,
+    onSuccess,
+    onError,
   });
 
+  function onSuccess(data) {
+    localStorage.setItem(
+      'user',
+      JSON.stringify({
+        id: data.id,
+        username: data.username,
+        features: data.features,
+      })
+    );
+  }
+
+  function onError(error) {
+    if (error.status === 401 || error.status === 403) {
+      localStorage.removeItem('user');
+    }
+  }
+
   return {
     user: data,
     isLoading: isLoading,