Skip to content

Commit

Permalink
[Files] Fix survey banner and sharing explainer (#1634)
Browse files Browse the repository at this point in the history 
* fix survey banner and sharing explainer

* fix case where localstore is empty

* add init for the 404
  • Loading branch information
@Tbaut
Tbaut authored Oct 19, 2021
1 parent 548de6a commit 1ca85be
Show file tree
Hide file tree
Showing 7 changed files with 75 additions and 72 deletions.
17 changes: 9 additions & 8 deletions packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,7 @@ const SharedFolderOverview = () => {
)}
</article>
<SharingExplainerModal
showModal={hasSeenSharingExplainerModal}
showModal={!hasSeenSharingExplainerModal}
onHide={hideModal}
/>
<CreateOrEditSharedFolderModal
Expand Down
20 changes: 9 additions & 11 deletions packages/files-ui/src/Components/Modules/FileBrowsers/hooks/useSharingExplainerModalFlag.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand Down
17 changes: 7 additions & 10 deletions packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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)
}, [])

Expand Down Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions packages/files-ui/src/Components/SharingExplainerModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
4 changes: 2 additions & 2 deletions packages/files-ui/src/Components/SurveyBanner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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])
Expand All @@ -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>
Expand Down
83 changes: 45 additions & 38 deletions packages/files-ui/src/Contexts/UserContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { useCallback, useEffect } from "react"
import { useFilesApi } from "./FilesApiContext"
import { useState } from "react"
import { t } from "@lingui/macro"
import { DISMISSED_SHARING_EXPLAINER_KEY } from "../Components/Modules/FileBrowsers/hooks/useSharingExplainerModalFlag"
import { DISMISSED_SURVEY_KEY } from "../Components/SurveyBanner"
import { Details } from "@chainsafe/files-api-client"

type UserContextProps = {
Expand Down Expand Up @@ -44,23 +46,20 @@ const UserContext = React.createContext<IUserContext | undefined>(undefined)

const UserProvider = ({ children }: UserContextProps) => {
const { filesApiClient, isLoggedIn } = useFilesApi()

const [profile, setProfile] = useState<Profile | undefined>(undefined)
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 {
Expand All @@ -78,40 +77,48 @@ 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)
}
const initLocalStore = useCallback((apiStore: ILocalStore | undefined) => {
let initStore = apiStore || {}

if (apiStore?.[DISMISSED_SHARING_EXPLAINER_KEY] === undefined) {
initStore = { ...initStore, [DISMISSED_SHARING_EXPLAINER_KEY]: "false" }
}

if (apiStore?.[DISMISSED_SURVEY_KEY] === undefined) {
initStore = { ...initStore, [DISMISSED_SURVEY_KEY]: "false" }
}
if (isLoggedIn) {
manageAsync()

_setLocalStore(initStore)
}, [])

useEffect(() => {
if (!isLoggedIn) {
return
}
}, [isLoggedIn, localStore, filesApiClient])

filesApiClient.getUserLocalStore()
.then((apiStore) => {
initLocalStore(apiStore)
})
.catch((e) => {
console.error(e)
initLocalStore({})
})
}, [isLoggedIn, filesApiClient, initLocalStore])

useEffect(() => {
if (isLoggedIn) {
refreshProfile()
.catch(console.error)
if (!isLoggedIn) {
return
}

refreshProfile()
.catch(console.error)

}, [isLoggedIn, refreshProfile])

const updateProfile = async (firstName?: string, lastName?: string) => {
Expand Down

0 comments on commit 1ca85be

Please sign in to comment.