Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

login on refresh - storage ui #1109

Merged
merged 2 commits into from
Jun 9, 2021
Merged

login on refresh - storage ui #1109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f56bc39
with local storage
tanmoyAtb Jun 8, 2021
5c4d4f9
local or session
tanmoyAtb Jun 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/storage-ui/src/App.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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])
tanmoyAtb marked this conversation as resolved.
Show resolved Hide resolved

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
Open in desktop
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