Merge pull request #7 from ContentsViewer/feature/fix-auth-error

chore: Add button to re-login when error
ContentsViewer · Apr 16, 2024 · 80d7e7b · 80d7e7b
2 parents 06550ef + d35cc3b
commit 80d7e7b
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 9 deletions.
diff --git a/app/app-layout.tsx b/app/app-layout.tsx
@@ -5,8 +5,8 @@ import { MiniPlayer } from "@/src/components/mini-player"
 import { FileStoreProvider } from "@/src/stores/file-store"
 import { PlayerStoreProvider, usePlayerStore } from "@/src/stores/player-store"
 import { DynamicBackground } from "@/src/components/dynamic-background"
-import { Box } from "@mui/material"
-import { SnackbarProvider } from "notistack"
+import { Box, styled } from "@mui/material"
+import { MaterialDesignContent, SnackbarProvider } from "notistack"
 import { NetworkMonitorProvider } from "@/src/stores/network-monitor"
 import { RouterProvider } from "@/src/router"
 import { useEffect, useRef, useState } from "react"
@@ -44,6 +44,15 @@ const ThemeChanger = () => {
   return null
 }
 
+// const StyledMaterialDesignContent = styled(MaterialDesignContent)(() => ({
+//   '&.notistack-MuiContent-success': {
+//     backgroundColor: '#2D7738',
+//   },
+//   '&.notistack-MuiContent-error': {
+//     backgroundColor: '#970C0C',
+//   },
+// }));
+
 export function AppLayout({ children }: { children: React.ReactNode }) {
   useEffect(() => {
     if ("serviceWorker" in navigator) {
@@ -69,6 +78,10 @@ export function AppLayout({ children }: { children: React.ReactNode }) {
       classes={{
         containerAnchorOriginBottomLeft: "snackbar-container",
       }}
+      // Components={{
+      //   success: StyledMaterialDesignContent,
+      //   error: StyledMaterialDesignContent,
+      // }}
     >
       <RouterProvider>
         <NetworkMonitorProvider>

diff --git a/next.config.mjs b/next.config.mjs
@@ -241,8 +241,5 @@ export default withPWA({
   basePath: basePath,
   reactStrictMode: true,
   output: "export",
-  experimental: {
-    clientRouterFilter: false // HOOOOO
-  }
 });
 
diff --git a/public/sw.js.map b/public/sw.js.map
diff --git a/src/stores/file-store.tsx b/src/stores/file-store.tsx
@@ -6,7 +6,7 @@ import {
   PublicClientApplication,
 } from "@azure/msal-browser"
 import { Client, ResponseType } from "@microsoft/microsoft-graph-client"
-import { enqueueSnackbar } from "notistack"
+import { SnackbarKey, closeSnackbar, enqueueSnackbar } from "notistack"
 import {
   createContext,
   useContext,
@@ -18,6 +18,8 @@ import {
 import { useNetworkMonitor } from "./network-monitor"
 import * as mm from "music-metadata-browser"
 import assert from "assert"
+import { Button } from "@mui/material"
+import { useThemeStore } from "./theme-store"
 
 export interface BaseFileItem {
   name: string
@@ -619,6 +621,7 @@ export const FileStoreProvider = ({
     if (!pca) return
 
     let accessToken: string | null = null
+    let account: AccountInfo | null = null
 
     pca
       .handleRedirectPromise()
@@ -641,7 +644,7 @@ export const FileStoreProvider = ({
         if (activeAccountJson === null) {
           return
         }
-        const account = JSON.parse(activeAccountJson) as AccountInfo
+        account = JSON.parse(activeAccountJson) as AccountInfo
 
         const silentRequest = {
           scopes: ["Files.Read", "Sites.Read.All"],
@@ -664,7 +667,36 @@ export const FileStoreProvider = ({
           // pca.acquireTokenRedirect({ scopes: ["Files.Read", "Sites.Read.All"] })
           // return
         }
-        enqueueSnackbar(`${error}`, { variant: "error" })
+        const action = (snackbarId: SnackbarKey) => {
+          return (
+            <>
+              <Button color="error" onClick={() => {
+                if (!pca) return
+                if (!account) return
+                pca.acquireTokenRedirect({
+                  scopes: ["Files.Read", "Sites.Read.All"],
+                  account: account
+                })
+                closeSnackbar(snackbarId)
+              }}>
+                Log In Cloud
+              </Button>
+              <Button
+                color="error"
+                onClick={() => {
+                  closeSnackbar(snackbarId)
+                }}
+              >
+                Dismiss
+              </Button>
+            </>
+          )
+        }
+        enqueueSnackbar(`${error}`, {
+          variant: "error",
+          action,
+          persist: true,
+        })
       })
       .then(() => {
         if (accessToken === null) return