Skip to content

Commit

Permalink
login on refresh - storage ui (#1109)
Browse files Browse the repository at this point in the history 
* with local storage

* local or session
  • Loading branch information
@tanmoyAtb
tanmoyAtb authored Jun 9, 2021
1 parent 87b5b20 commit 81a12a5
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 38 deletions.
8 changes: 4 additions & 4 deletions packages/storage-ui/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -92,7 +92,7 @@ const App = () => {

return (
<ThemeSwitcher
storageKey="csf.themeKey"
storageKey="css.themeKey"
themes={{ light: lightTheme, dark: darkTheme }}
>
<ErrorBoundary
Expand All @@ -109,12 +109,12 @@ const App = () => {
>
<StorageApiProvider
apiUrl={apiUrl}
withLocalStorage={false}
withLocalStorage={true}
>
<StorageProvider>
<Router>
<AppWrapper>
<FilesRoutes />
<StorageRoutes />
</AppWrapper>
</Router>
</StorageProvider>
Expand Down
4 changes: 2 additions & 2 deletions packages/storage-ui/src/Components/StorageRoutes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -47,4 +47,4 @@ const FilesRoutes = () => {
)
}

export default FilesRoutes
export default StorageRoutes
47 changes: 25 additions & 22 deletions packages/storage-ui/src/Contexts/StorageApiContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -17,7 +17,7 @@ type StorageApiContextProps = {
}

type StorageApiContext = {
filesApiClient: IFilesApiClient
storageApiClient: IFilesApiClient
isLoggedIn: boolean | undefined
secured: boolean | undefined
isReturningUser: boolean
Expand All @@ -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
Expand All @@ -58,7 +58,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora
}, [apiUrl, initialAxiosInstance]
)

const [filesApiClient, setFilesApiClient] = useState<FilesApiClient>(initialApiClient)
const [storageApiClient, setStorageApiClient] = useState<FilesApiClient>(initialApiClient)
const [isLoadingUser, setIsLoadingUser] = useState(true)

// access tokens
Expand All @@ -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
Expand Down Expand Up @@ -140,8 +140,11 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora
)

const apiClient = new FilesApiClient({}, apiUrl, axiosInstance)
const savedRefreshToken = localStorageGet(tokenStorageKey)
setFilesApiClient(apiClient)
const savedRefreshToken = withLocalStorage
? localStorageGet(tokenStorageKey)
: sessionStorageGet(tokenStorageKey)

setStorageApiClient(apiClient)
if (!maintenanceMode && savedRefreshToken) {
try {
const {
Expand All @@ -160,7 +163,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora

initializeApiClient()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
}, [canUseLocalStorage])

const selectWallet = async () => {
if (onboard && !isReady) {
Expand Down Expand Up @@ -194,8 +197,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
)
Expand All @@ -205,7 +208,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora
setSecured(false)
}
}
}, [accessToken, filesApiClient])
}, [accessToken, storageApiClient])

const isLoggedIn = () => {
if (isLoadingUser) {
Expand All @@ -225,7 +228,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")
Expand All @@ -237,7 +240,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()
Expand All @@ -258,7 +261,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora
const {
access_token,
refresh_token
} = await filesApiClient.postOauth2CodeGoogle(
} = await storageApiClient.postOauth2CodeGoogle(
code,
state,
scope,
Expand All @@ -280,7 +283,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()
Expand All @@ -299,15 +302,15 @@ 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)
const address = await signer.getAddress()
const {
access_token,
refresh_token
} = await filesApiClient.postWeb3Token({
} = await storageApiClient.postWeb3Token({
signature: signature,
token: token,
public_address: address
Expand All @@ -325,15 +328,15 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora
setAccessToken(undefined)
setRefreshToken(undefined)
setDecodedRefreshToken(undefined)
filesApiClient.setToken("")
storageApiClient.setToken("")
localStorageRemove(tokenStorageKey)
!withLocalStorage && sessionStorageRemove(tokenStorageKey)
}

return (
<StorageApiContext.Provider
value={{
filesApiClient,
storageApiClient,
isLoggedIn: isLoggedIn(),
secured,
isReturningUser: isReturningUser,
Expand All @@ -355,7 +358,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora
const useStorageApi = () => {
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
}
Expand Down
20 changes: 10 additions & 10 deletions packages/storage-ui/src/Contexts/StorageContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,15 +61,15 @@ const REMOVE_UPLOAD_PROGRESS_DELAY = 5000
const StorageContext = React.createContext<StorageContext | undefined>(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<PinObject[]>([])

const refreshPins = useCallback(() => {
filesApiClient.getAllPins()
storageApiClient.getAllPins()
.then((pins) => setPins(pins.results || []))
.catch(console.error)
}, [filesApiClient])
}, [storageApiClient])

useEffect(() => {
isLoggedIn && refreshPins()
Expand All @@ -91,7 +91,7 @@ const StorageProvider = ({ children }: StorageContextProps) => {
// if (isLoggedIn) {
// getSpaceUsage()
// }
// }, [filesApiClient, isLoggedIn, pins])
// }, [storageApiClient, isLoggedIn, pins])

// Reset encryption keys on log out
useEffect(() => {
Expand All @@ -105,7 +105,7 @@ const StorageProvider = ({ children }: StorageContextProps) => {
[]
)

const [downloadsInProgress, dispatchDownloadsInProgress] = useReducer(
const [downloadsInProgress] = useReducer(
downloadsInProgressReducer,
[]
)
Expand All @@ -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)
Expand Down Expand Up @@ -199,7 +199,7 @@ const StorageProvider = ({ children }: StorageContextProps) => {
// }

// try {
// const result = await filesApiClient.getFileContent(
// const result = await storageApiClient.getFileContent(
// {
// path: path,
// source: {
Expand All @@ -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()
Expand Down

0 comments on commit 81a12a5

Please sign in to comment.