From f56bc3918a39758bc64b4a59e13666a228278e4c Mon Sep 17 00:00:00 2001 From: tanmoy12 Date: Tue, 8 Jun 2021 23:33:08 +0600 Subject: [PATCH 1/2] with local storage --- packages/storage-ui/src/App.tsx | 8 ++-- .../src/Components/StorageRoutes.tsx | 4 +- .../src/Contexts/StorageApiContext.tsx | 42 +++++++++---------- .../src/Contexts/StorageContext.tsx | 20 ++++----- 4 files changed, 37 insertions(+), 37 deletions(-) diff --git a/packages/storage-ui/src/App.tsx b/packages/storage-ui/src/App.tsx index ed5ac2382a..e2fe1683ae 100644 --- a/packages/storage-ui/src/App.tsx +++ b/packages/storage-ui/src/App.tsx @@ -4,7 +4,7 @@ import { Web3Provider } from "@chainsafe/web3-context" import { ThemeSwitcher } from "@chainsafe/common-theme" import "@chainsafe/common-theme/dist/font-faces.css" import { Button, CssBaseline, Modal, Router, ToasterProvider, Typography } from "@chainsafe/common-components" -import FilesRoutes from "./Components/StorageRoutes" +import StorageRoutes from "./Components/StorageRoutes" import AppWrapper from "./Components/Layouts/AppWrapper" import { useHotjar } from "react-use-hotjar" import { LanguageProvider } from "./Contexts/LanguageContext" @@ -92,7 +92,7 @@ const App = () => { return ( { > - + diff --git a/packages/storage-ui/src/Components/StorageRoutes.tsx b/packages/storage-ui/src/Components/StorageRoutes.tsx index 29ad384938..0970100c3e 100644 --- a/packages/storage-ui/src/Components/StorageRoutes.tsx +++ b/packages/storage-ui/src/Components/StorageRoutes.tsx @@ -17,7 +17,7 @@ export const ROUTE_LINKS = { export const SETTINGS_PATHS = ["profile", "plan", "security"] as const export type SettingsPath = typeof SETTINGS_PATHS[number] -const FilesRoutes = () => { +const StorageRoutes = () => { const { isLoggedIn } = useStorageApi() return ( @@ -47,4 +47,4 @@ const FilesRoutes = () => { ) } -export default FilesRoutes +export default StorageRoutes diff --git a/packages/storage-ui/src/Contexts/StorageApiContext.tsx b/packages/storage-ui/src/Contexts/StorageApiContext.tsx index d332153515..5cb04da667 100644 --- a/packages/storage-ui/src/Contexts/StorageApiContext.tsx +++ b/packages/storage-ui/src/Contexts/StorageApiContext.tsx @@ -7,8 +7,8 @@ import axios from "axios" import { useLocalStorage, useSessionStorage } from "@chainsafe/browser-storage-hooks" export type { IdentityProvider as OAuthProvider } -const tokenStorageKey = "csf.refreshToken" -const isReturningUserStorageKey = "csf.isReturningUser" +const tokenStorageKey = "css.refreshToken" +const isReturningUserStorageKey = "css.isReturningUser" type StorageApiContextProps = { apiUrl?: string @@ -17,7 +17,7 @@ type StorageApiContextProps = { } type StorageApiContext = { - filesApiClient: IFilesApiClient + storageApiClient: IFilesApiClient isLoggedIn: boolean | undefined secured: boolean | undefined isReturningUser: boolean @@ -44,7 +44,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora const maintenanceMode = process.env.REACT_APP_MAINTENANCE_MODE === "true" const { wallet, onboard, checkIsReady, isReady, provider } = useWeb3() - const { localStorageRemove, localStorageGet, localStorageSet } = useLocalStorage() + const { canUseLocalStorage, localStorageRemove, localStorageGet, localStorageSet } = useLocalStorage() const { sessionStorageRemove, sessionStorageGet, sessionStorageSet } = useSessionStorage() // initializing api @@ -58,7 +58,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora }, [apiUrl, initialAxiosInstance] ) - const [filesApiClient, setFilesApiClient] = useState(initialApiClient) + const [storageApiClient, setStorageApiClient] = useState(initialApiClient) const [isLoadingUser, setIsLoadingUser] = useState(true) // access tokens @@ -78,8 +78,8 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora setRefreshToken(refreshToken) refreshToken.token && withLocalStorage && localStorageSet(tokenStorageKey, refreshToken.token) !withLocalStorage && sessionStorageSet(tokenStorageKey, refreshToken.token) - accessToken.token && filesApiClient.setToken(accessToken.token) - }, [filesApiClient, localStorageSet, sessionStorageSet, withLocalStorage]) + accessToken.token && storageApiClient.setToken(accessToken.token) + }, [storageApiClient, localStorageSet, sessionStorageSet, withLocalStorage]) const setReturningUser = () => { // set returning user @@ -141,7 +141,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora const apiClient = new FilesApiClient({}, apiUrl, axiosInstance) const savedRefreshToken = localStorageGet(tokenStorageKey) - setFilesApiClient(apiClient) + setStorageApiClient(apiClient) if (!maintenanceMode && savedRefreshToken) { try { const { @@ -160,7 +160,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora initializeApiClient() // eslint-disable-next-line react-hooks/exhaustive-deps - }, []) + }, [canUseLocalStorage]) const selectWallet = async () => { if (onboard && !isReady) { @@ -194,8 +194,8 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora }, [refreshToken]) useEffect(() => { - if (accessToken && accessToken.token && filesApiClient) { - filesApiClient?.setToken(accessToken.token) + if (accessToken && accessToken.token && storageApiClient) { + storageApiClient?.setToken(accessToken.token) const decodedAccessToken = jwtDecode<{ perm: { secured?: string } }>( accessToken.token ) @@ -205,7 +205,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora setSecured(false) } } - }, [accessToken, filesApiClient]) + }, [accessToken, storageApiClient]) const isLoggedIn = () => { if (isLoadingUser) { @@ -225,7 +225,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora const getProviderUrl = async (provider: OAuthIdentityToken) => { try { - const { url } = await filesApiClient.getOauth2Provider(provider) + const { url } = await storageApiClient.getOauth2Provider(provider) return Promise.resolve(url) } catch { return Promise.reject("There was an error logging in") @@ -237,7 +237,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora const { access_token, refresh_token - } = await filesApiClient.postOauth2CodeGithub(code, state) + } = await storageApiClient.postOauth2CodeGithub(code, state) setTokensAndSave(access_token, refresh_token) setReturningUser() return Promise.resolve() @@ -258,7 +258,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora const { access_token, refresh_token - } = await filesApiClient.postOauth2CodeGoogle( + } = await storageApiClient.postOauth2CodeGoogle( code, state, scope, @@ -280,7 +280,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora const { access_token, refresh_token - } = await filesApiClient.postOauth2CodeFacebook(code, state) + } = await storageApiClient.postOauth2CodeFacebook(code, state) setTokensAndSave(access_token, refresh_token) setReturningUser() @@ -299,7 +299,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora } const signer = provider.getSigner() try { - const { token } = await filesApiClient.getWeb3Token() + const { token } = await storageApiClient.getWeb3Token() if (token) { const signature = await signer.signMessage(token) @@ -307,7 +307,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora const { access_token, refresh_token - } = await filesApiClient.postWeb3Token({ + } = await storageApiClient.postWeb3Token({ signature: signature, token: token, public_address: address @@ -325,7 +325,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora setAccessToken(undefined) setRefreshToken(undefined) setDecodedRefreshToken(undefined) - filesApiClient.setToken("") + storageApiClient.setToken("") localStorageRemove(tokenStorageKey) !withLocalStorage && sessionStorageRemove(tokenStorageKey) } @@ -333,7 +333,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora return ( { const context = React.useContext(StorageApiContext) if (context === undefined) { - throw new Error("useAuth must be used within a AuthProvider") + throw new Error("useStorage must be used within a StorageProvider") } return context } diff --git a/packages/storage-ui/src/Contexts/StorageContext.tsx b/packages/storage-ui/src/Contexts/StorageContext.tsx index 0b8ebe8d29..5e6662e14b 100644 --- a/packages/storage-ui/src/Contexts/StorageContext.tsx +++ b/packages/storage-ui/src/Contexts/StorageContext.tsx @@ -61,15 +61,15 @@ const REMOVE_UPLOAD_PROGRESS_DELAY = 5000 const StorageContext = React.createContext(undefined) const StorageProvider = ({ children }: StorageContextProps) => { - const { filesApiClient, isLoggedIn } = useStorageApi() - const [spaceUsed, setSpaceUsed] = useState(0) + const { storageApiClient, isLoggedIn } = useStorageApi() + const [spaceUsed] = useState(0) const [pins, setPins] = useState([]) const refreshPins = useCallback(() => { - filesApiClient.getAllPins() + storageApiClient.getAllPins() .then((pins) => setPins(pins.results || [])) .catch(console.error) - }, [filesApiClient]) + }, [storageApiClient]) useEffect(() => { isLoggedIn && refreshPins() @@ -91,7 +91,7 @@ const StorageProvider = ({ children }: StorageContextProps) => { // if (isLoggedIn) { // getSpaceUsage() // } - // }, [filesApiClient, isLoggedIn, pins]) + // }, [storageApiClient, isLoggedIn, pins]) // Reset encryption keys on log out useEffect(() => { @@ -105,7 +105,7 @@ const StorageProvider = ({ children }: StorageContextProps) => { [] ) - const [downloadsInProgress, dispatchDownloadsInProgress] = useReducer( + const [downloadsInProgress] = useReducer( downloadsInProgressReducer, [] ) @@ -130,10 +130,10 @@ const StorageProvider = ({ children }: StorageContextProps) => { const addPin = useCallback((cid: string) => { // Remove the as any once the api specs will be updated - filesApiClient.addPin(({ cid }) as any) + storageApiClient.addPin(({ cid }) as any) .then(res => console.log(res)) .catch(console.error) - }, [filesApiClient]) + }, [storageApiClient]) const createPin = useCallback(async (bucketId: string, files: File[], path: string) => { const bucket = pins.find(b => b.id === bucketId) @@ -199,7 +199,7 @@ const StorageProvider = ({ children }: StorageContextProps) => { // } // try { - // const result = await filesApiClient.getFileContent( + // const result = await storageApiClient.getFileContent( // { // path: path, // source: { @@ -215,7 +215,7 @@ const StorageProvider = ({ children }: StorageContextProps) => { // console.error(error) // return Promise.reject() // } - // }, [pins, filesApiClient]) + // }, [pins, storageApiClient]) // const downloadPin = useCallback(async (bucketId: string, itemToDownload: FileSystemItem, path: string) => { // const toastId = uuidv4() From 5c4d4f933045bed0797295fab9088589be211095 Mon Sep 17 00:00:00 2001 From: tanmoy12 Date: Tue, 8 Jun 2021 23:55:41 +0600 Subject: [PATCH 2/2] local or session --- packages/storage-ui/src/Contexts/StorageApiContext.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/storage-ui/src/Contexts/StorageApiContext.tsx b/packages/storage-ui/src/Contexts/StorageApiContext.tsx index 5cb04da667..6deae3924b 100644 --- a/packages/storage-ui/src/Contexts/StorageApiContext.tsx +++ b/packages/storage-ui/src/Contexts/StorageApiContext.tsx @@ -140,7 +140,10 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora ) const apiClient = new FilesApiClient({}, apiUrl, axiosInstance) - const savedRefreshToken = localStorageGet(tokenStorageKey) + const savedRefreshToken = withLocalStorage + ? localStorageGet(tokenStorageKey) + : sessionStorageGet(tokenStorageKey) + setStorageApiClient(apiClient) if (!maintenanceMode && savedRefreshToken) { try {