[Files] Fix survey banner and sharing explainer

packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx

@@ -34,6 +34,8 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
   const { pathname } = useLocation()
   const currentPath = useMemo(() => extractFileBrowserPathFromURL(pathname, ROUTE_LINKS.Drive("")), [pathname])
   const bucket = useMemo(() => buckets.find(b => b.type === "csf"), [buckets])
+  const { profile, localStore } = useUser()
+  const [showSurvey, setShowSurvey] = useState(false)
 
   const refreshContents = useCallback((showLoading?: boolean) => {
     if (!bucket) return
@@ -50,10 +52,6 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
       }).finally(() => showLoading && setLoadingCurrentPath(false))
   }, [bucket, filesApiClient, currentPath])
 
-  const { profile, localStore, setLocalStore } = useUser()
-
-  const showSurvey = localStore && localStore[DISMISSED_SURVEY_KEY] === "false"
-
   const olderThanOneWeek = useMemo(
     () => profile?.createdAt
       ? dayjs(Date.now()).diff(profile.createdAt, "day") > 7
@@ -62,11 +60,14 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
   )
 
   useEffect(() => {
-    const dismissedFlag = localStore && localStore[DISMISSED_SURVEY_KEY]
-    if (dismissedFlag === undefined || dismissedFlag === null) {
-      setLocalStore({ [DISMISSED_SURVEY_KEY]: "false" }, "update")
+    if (!localStore) {
+      return
+    }
+
+    if (localStore[DISMISSED_SURVEY_KEY] === "false"){
+      setShowSurvey(true)
     }
-  }, [localStore, setLocalStore])
+  }, [localStore])
 
   useEffect(() => {
     refreshContents(true)

packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx

@@ -267,7 +267,7 @@ const SharedFolderOverview = () => {
         )}
       </article>
       <SharingExplainerModal
-        showModal={hasSeenSharingExplainerModal}
+        showModal={!hasSeenSharingExplainerModal}
         onHide={hideModal}
       />
       <CreateOrEditSharedFolderModal

packages/files-ui/src/Components/Modules/FileBrowsers/hooks/useSharingExplainerModalFlag.tsx

@@ -6,22 +6,20 @@ export const DISMISSED_SHARING_EXPLAINER_KEY = "csf.dismissedSharingExplainer"
 
 export const useSharingExplainerModalFlag = () => {
   const { localStore, setLocalStore } = useUser()
-  const [hasSeenSharingExplainerModal, setHasSeenSharingExplainerModal] = useState(false)
-  const dismissedFlag = localStore ? localStore[DISMISSED_SHARING_EXPLAINER_KEY] : null
-
+  const [hasSeenSharingExplainerModal, setHasSeenSharingExplainerModal] = useState(true)
   useEffect(() => {
-    if (dismissedFlag === "false"){
-      setHasSeenSharingExplainerModal(true)
-    } else if (dismissedFlag === null) {
-      // the dismiss flag was never set
-      setLocalStore({ [DISMISSED_SHARING_EXPLAINER_KEY]: "false" }, "update")
-      setHasSeenSharingExplainerModal(true)
+    if (!localStore) {
+      return
+    }
+
+    if (localStore[DISMISSED_SHARING_EXPLAINER_KEY] === "false"){
+      setHasSeenSharingExplainerModal(false)
     }
-  }, [dismissedFlag, setLocalStore])
+  }, [localStore, setLocalStore])
 
   const hideModal = useCallback(() => {
     setLocalStore({ [DISMISSED_SHARING_EXPLAINER_KEY]: "true" }, "update")
-    setHasSeenSharingExplainerModal(false)
+    setHasSeenSharingExplainerModal(true)
   }, [setLocalStore])
 
   return { hasSeenSharingExplainerModal, hideModal }

packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx

@@ -348,7 +348,7 @@ const FilesList = ({ isShared = false }: Props) => {
   const { hasSeenSharingExplainerModal, hideModal } = useSharingExplainerModalFlag()
   const [hasClickedShare, setClickedShare] = useState(false)
   const showExplainerBeforeShare = useMemo(() =>
-    hasSeenSharingExplainerModal && hasClickedShare
+    !hasSeenSharingExplainerModal && hasClickedShare
   , [hasClickedShare, hasSeenSharingExplainerModal]
   )
   const items: FileSystemItemType[] = useMemo(() => {
@@ -616,9 +616,10 @@ const FilesList = ({ isShared = false }: Props) => {
     setIsDeleteModalOpen(true)
   }, [])
 
-  const handleOpenShareDialog = useCallback((e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
+  const handleOpenShareDialog = useCallback((e?: React.MouseEvent) => {
+    e?.preventDefault()
+    e?.stopPropagation()
+    setClickedShare(true)
     setIsShareModalOpen(true)
   }, [])
 
@@ -649,13 +650,9 @@ const FilesList = ({ isShared = false }: Props) => {
   [classes.menuIcon])
 
   const onShare = useCallback((fileSystemItem: FileSystemItemType) => {
-    if(hasSeenSharingExplainerModal) {
-      setClickedShare(true)
-    }
-
     setSelectedItems([fileSystemItem])
-    setIsShareModalOpen(true)
-  }, [hasSeenSharingExplainerModal])
+    handleOpenShareDialog()
+  }, [handleOpenShareDialog])
 
   return (
     <article

packages/files-ui/src/Components/SharingExplainerModal.tsx

@@ -132,9 +132,9 @@ const SharingExplainerModal = ({ showModal, onHide }: Props) => {
       return
     } else {
       switch (next) {
-        case 3:
+        case STEP_NUMBER:
           setLocalStore({ [DISMISSED_SHARING_EXPLAINER_KEY]:  "true" }, "update")
-          setStep(3)
+          setStep(STEP_NUMBER)
           break
         case STEP_NUMBER + 1:
           onHide()

packages/files-ui/src/Components/SurveyBanner.tsx

@@ -62,7 +62,7 @@ const SurveyBanner = ({ onHide }: Props) => {
     setLocalStore({ [DISMISSED_SURVEY_KEY]: "true" }, "update")
   }, [setLocalStore, onHide])
 
-  const onOpen = useCallback(() => {
+  const onOpenLink = useCallback(() => {
     onClose()
     window.open(ROUTE_LINKS.UserSurvey, "_blank")
   }, [onClose])
@@ -77,7 +77,7 @@ const SurveyBanner = ({ onHide }: Props) => {
         </Trans>
         <span
           className={classes.link}
-          onClick={onOpen}
+          onClick={onOpenLink}
         >
           <Trans>Schedule a 15 min call</Trans>
         </span>

packages/files-ui/src/Contexts/UserContext.tsx

@@ -48,18 +48,16 @@ const UserProvider = ({ children }: UserContextProps) => {
   const [localStore, _setLocalStore] = useState<ILocalStore | undefined>()
 
   const setLocalStore = useCallback((newData: ILocalStore, method: "update" | "overwrite" = "update") => {
-    switch (method) {
-      case "update":
-        _setLocalStore({
-          ...localStore,
-          ...newData
-        })
-        break
-      case "overwrite":
-        _setLocalStore(newData)
-        break
-    }
-  }, [localStore])
+
+    const toStore = method === "update"
+      ? { ...localStore, ...newData }
+      : newData
+
+    filesApiClient.updateUserLocalStore(toStore)
+      .then(_setLocalStore)
+      .catch(console.error)
+
+  }, [filesApiClient, localStore])
 
   const refreshProfile = useCallback(async () => {
     try {
@@ -77,40 +75,32 @@ const UserProvider = ({ children }: UserContextProps) => {
       setProfile(profileState)
       return Promise.resolve()
     } catch (error) {
+      console.error(error)
       return Promise.reject("There was an error getting profile.")
     }
   }, [filesApiClient])
 
   useEffect(() => {
-    const manageAsync = async () => {
-      if (!localStore) {
-        // Fetch
-        try {
-          const fetched = await filesApiClient.getUserLocalStore()
-          if (!fetched) {
-            _setLocalStore({})
-          } else {
-            _setLocalStore(fetched)
-          }
-        } catch(error) {
-          console.error(error)
-          _setLocalStore({})
-        }
-      } else {
-        // Store 
-        await filesApiClient.updateUserLocalStore(localStore)
-      }
+    if (!isLoggedIn) {
+      return
     }
-    if (isLoggedIn) {
-      manageAsync()
-    }
-  }, [isLoggedIn, localStore, filesApiClient])
+
+    filesApiClient.getUserLocalStore()
+      .then(_setLocalStore)
+      .catch((e) => {
+        console.error(e)
+        _setLocalStore({})
+      })
+  }, [isLoggedIn, filesApiClient])
 
   useEffect(() => {
-    if (isLoggedIn) {
-      refreshProfile()
-        .catch(console.error)
+    if (!isLoggedIn) {
+      return
     }
+
+    refreshProfile()
+      .catch(console.error)
+
   }, [isLoggedIn, refreshProfile])
 
   const updateProfile = async (firstName?: string, lastName?: string) => {