fix: link_randomuuid_cache (#718)

* fix: [SPDV-828] use react router link instead of href
* fix: auto import issue
* fix: replace randomuuid with getRandomValues=
* fix: reset FM states if state is invalid
* fix: use no-cache for stamp fetch
* fix: clear cache and reload message
* fix: shallReset flag
* fix: identify browser platform and set help url accordingly
* fix: edge browser detection
* fix: use fallback chrome and verify for safari

---------

Co-authored-by: Nandor Komlodi <nandor.komlodi@gmail.com>
Co-authored-by: Balint Ujvari <balint.ujvari@solarpunk.buzz>

src/pages/filemanager/index.tsx

@@ -8,6 +8,7 @@ import { AdminStatusBar } from '../../modules/filemanager/components/AdminStatus
 import { FileBrowser } from '../../modules/filemanager/components/FileBrowser/FileBrowser'
 import { InitialModal } from '../../modules/filemanager/components/InitialModal/InitialModal'
 import { Context as FMContext } from '../../providers/FileManager'
+import { BrowserPlatform, cacheClearUrls, detectBrowser } from '../../providers/Platform'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { Context as BeeContext, CheckState } from '../../providers/Bee'
 import { PrivateKeyModal } from '../../modules/filemanager/components/PrivateKeyModal/PrivateKeyModal'
@@ -28,6 +29,7 @@ export function FileManagerPage(): ReactElement {
   const [showResetModal, setShowResetModal] = useState<boolean>(false)
   const [isCreationInProgress, setIsCreationInProgress] = useState<boolean>(false)
   const [showConnectionError, setShowConnectionError] = useState<boolean>(false)
+  const [cacheHelpUrl, setCacheHelpUrl] = useState<string>(cacheClearUrls[BrowserPlatform.Chrome])
 
   const { status } = useContext(BeeContext)
   const { beeApi } = useContext(SettingsContext)
@@ -36,6 +38,13 @@ export function FileManagerPage(): ReactElement {
   useEffect(() => {
     isMountedRef.current = true
 
+    const getBrowserPlatform = async () => {
+      const browserPlatform = await detectBrowser()
+      setCacheHelpUrl(cacheClearUrls[browserPlatform])
+    }
+
+    getBrowserPlatform()
+
     return () => {
       isMountedRef.current = false
     }
@@ -162,8 +171,21 @@ export function FileManagerPage(): ReactElement {
       <div className="fm-main">
         <ConfirmModal
           title="Reset File Manager State"
-          message="Your File Manager state appears invalid. Please reset it to continue."
-          confirmLabel="Proceed"
+          message={
+            <span>
+              Your File Manager state appears invalid. Please{' '}
+              <a
+                href={cacheHelpUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{ display: 'inline', textDecoration: 'underline' }}
+              >
+                clear the browser cache
+              </a>{' '}
+              and reload the page. Then you can reset the File Manager to continue.
+            </span>
+          }
+          confirmLabel="Continue"
           onConfirm={() => {
             setShowResetModal(false)
           }}

src/pages/not-found/PageNotFound.tsx

@@ -1,13 +1,15 @@
 import { ReactElement } from 'react'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { Typography } from '@material-ui/core'
+import { Link } from 'react-router-dom'
+import { ROUTES } from '../../routes'
 
 export default function PageNotFound(): ReactElement {
   return (
     <div>
       <HistoryHeader>Page not found</HistoryHeader>
       <Typography>
-        The given url is invalid. Please go back or <a href="/">navigate to Home screen.</a>
+        The given url is invalid. Please go back or <Link to={ROUTES.INFO}>navigate to Home screen.</Link>
       </Typography>
     </div>
   )