Skip to content

Commit

Permalink
CIDs overview (#1117)
Browse files Browse the repository at this point in the history
* wip

* v1.14

* v1.15-rc1

* show Cids

* buckets in nav bar

* cleanup

* cid instead of pin

* in menus

* login on refresh - storage ui (#1109)

* with local storage

* local or session

* v2 api spec

* v2.1

Co-authored-by: Thibaut Sardan <github@thib.top>
Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Co-authored-by: Tanmoy Basak Anjan <tanmoy3399@gmail.com>
  • Loading branch information
4 people authored Jun 10, 2021
1 parent 074dab6 commit 0267f5b
Show file tree
Hide file tree
Showing 12 changed files with 388 additions and 266 deletions.
2 changes: 1 addition & 1 deletion packages/storage-ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"@babel/core": "^7.12.10",
"@babel/runtime": "^7.0.0",
"@chainsafe/browser-storage-hooks": "^1.0.1",
"@chainsafe/files-api-client": "1.14.4-rc1",
"@chainsafe/files-api-client": "^2.1.0-rc-1",
"@chainsafe/web3-context": "1.1.4",
"@lingui/core": "^3.7.2",
"@lingui/react": "^3.7.2",
Expand Down
13 changes: 6 additions & 7 deletions packages/storage-ui/src/App.tsx
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 All @@ -26,8 +26,7 @@ if (
}

const availableLanguages = [
{ id: "en", label: "English" },
{ id: "fr", label: "Français" }
{ id: "en", label: "English" }
]

const onboardConfig = {
Expand Down Expand Up @@ -55,7 +54,7 @@ const onboardConfig = {
}
}

const App: React.FC<{}> = () => {
const App = () => {
const { initHotjar } = useHotjar()
const { canUseLocalStorage } = useLocalStorage()
const hotjarId = process.env.REACT_APP_HOTJAR_ID
Expand Down Expand Up @@ -93,7 +92,7 @@ const App: React.FC<{}> = () => {

return (
<ThemeSwitcher
storageKey="csf.themeKey"
storageKey="css.themeKey"
themes={{ light: lightTheme, dark: darkTheme }}
>
<ErrorBoundary
Expand All @@ -110,12 +109,12 @@ const App: React.FC<{}> = () => {
>
<StorageApiProvider
apiUrl={apiUrl}
withLocalStorage={false}
withLocalStorage={true}
>
<StorageProvider>
<Router>
<AppWrapper>
<FilesRoutes />
<StorageRoutes />
</AppWrapper>
</Router>
</StorageProvider>
Expand Down
54 changes: 54 additions & 0 deletions packages/storage-ui/src/Components/Elements/PinRow.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React from "react"
import { makeStyles, createStyles } from "@chainsafe/common-theme"
import { formatBytes, TableCell, TableRow } from "@chainsafe/common-components"
import { Trans } from "@lingui/macro"
import dayjs from "dayjs"
import { PinObject } from "@chainsafe/files-api-client"

const useStyles = makeStyles(() =>
createStyles({
root: {
}
})
)
interface Props {
pinObject: PinObject
}

const IPFS_GATEWAY = "https://ipfs.infura.io:5001/api/v0/cat/"

const PinRow = ({ pinObject }: Props) => {
const classes = useStyles()

return (
<TableRow
type="grid"
className={classes.root}
>
<TableCell>
{pinObject.pin?.cid}
</TableCell>
<TableCell>
{dayjs(pinObject.created).format("DD MMM YYYY h:mm a")}
</TableCell>
<TableCell>
{/** as any needs to be removed when the api spec will be up to date */}
{formatBytes((pinObject as any).info.size)}
</TableCell>
<TableCell>
<a
href={`${IPFS_GATEWAY}${pinObject.pin?.cid}`}
target="_blank"
rel="noopener noreferrer"
>
<Trans>Open on Gateway</Trans>
</a>
</TableCell>
<TableCell>

</TableCell>
</TableRow>
)
}

export default PinRow
6 changes: 3 additions & 3 deletions packages/storage-ui/src/Components/Layouts/AppHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import clsx from "clsx"
import {
Link,
Typography,
ChainsafeFilesLogo,
ChainsafeLogo,
HamburgerMenu,
MenuDropdown,
PowerDownSvg,
Expand Down Expand Up @@ -205,9 +205,9 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
/>
<Link
className={classes.logo}
to={ROUTE_LINKS.Pins}
to={ROUTE_LINKS.Cids}
>
<ChainsafeFilesLogo />
<ChainsafeLogo />
<Typography
variant="h5"
className={classes.title}
Expand Down
40 changes: 12 additions & 28 deletions packages/storage-ui/src/Components/Layouts/AppNav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,13 @@ import clsx from "clsx"
import {
Link,
Typography,
ChainsafeFilesLogo,
DatabaseSvg,
PowerDownSvg,
ProgressBar,
formatBytes,
DeleteSvg } from "@chainsafe/common-components"
ChainsafeLogo,
FolderSvg
} from "@chainsafe/common-components"
import { ROUTE_LINKS } from "../StorageRoutes"
import { FREE_PLAN_LIMIT } from "../../Utils/Constants"
import { Trans } from "@lingui/macro"
Expand Down Expand Up @@ -130,10 +131,6 @@ const useStyles = makeStyles(
"&.active": {}
}
},
navHead: {
fontWeight: 600,
color: constants.nav.headingColor
},
navItem: {
textDecoration: "none",
display: "flex",
Expand Down Expand Up @@ -238,59 +235,46 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
<div>
<Link
className={classes.logo}
to={ROUTE_LINKS.Pins}
to={ROUTE_LINKS.Cids}
>
<ChainsafeFilesLogo />
<Typography variant="h5">
Files
</Typography>
&nbsp;
<Typography
variant="caption"
className={classes.betaCaption}
>
beta
<ChainsafeLogo />
<Typography variant="body1">
ChainSafe Storage
</Typography>
</Link>
</div>
)}
<div className={classes.linksArea}>
<Typography className={classes.navHead}>
<Trans>Folders</Trans>
</Typography>
<nav className={classes.navMenu}>
<Link
onClick={() => {
handleOnClick()
}}
className={classes.navItem}
to={ROUTE_LINKS.Pins}
to={ROUTE_LINKS.Cids}
>
<DatabaseSvg />
<Typography
variant="h5"
className={classes.navItemText}
>
<Trans>Home</Trans>
<Trans>Cids</Trans>
</Typography>
</Link>
<Link
onClick={handleOnClick}
className={classes.navItem}
to={ROUTE_LINKS.Pins}
to={ROUTE_LINKS.Buckets}
>
<DeleteSvg />
<FolderSvg />
<Typography
variant="h5"
className={classes.navItemText}
>
<Trans>Bin</Trans>
<Trans>Buckets</Trans>
</Typography>
</Link>
</nav>
<Typography className={classes.navHead}>
{desktop ? <Trans>Resources</Trans> : <Trans>Account</Trans>}
</Typography>
<nav className={classes.navMenu}>

</nav>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,21 @@ const useStyles = makeStyles(() =>
position: "relative",
minHeight: "100vh",
overflow: "hidden"
},
tableHead: {
marginTop: 24
}
})
)

const PinsPage = () => {
const BucketsPage = () => {
const classes = useStyles()

return (
<div className={classes.root}>
<Typography variant='h1'>Pins</Typography>
<Typography variant='h1'>Buckets</Typography>
</div>
)
}

export default PinsPage
export default BucketsPage
79 changes: 79 additions & 0 deletions packages/storage-ui/src/Components/Pages/CidsPage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import React, { useCallback } from "react"
import { makeStyles, createStyles } from "@chainsafe/common-theme"
import { Table, TableBody, TableHead, TableHeadCell, TableRow, Typography } from "@chainsafe/common-components"
import { useStorage } from "../../Contexts/StorageContext"
import { Trans } from "@lingui/macro"
import PinRow from "../Elements/PinRow"

const useStyles = makeStyles(() =>
createStyles({
root: {
position: "relative",
minHeight: "100vh",
overflow: "hidden"
},
tableHead: {
marginTop: 24
}
})
)

const CidsPage = () => {
const classes = useStyles()
const { pins, addPin } = useStorage()

const onCreateHardcodedPin = useCallback(() => {
addPin("QmNbbff884cwp1pvH8muod4pNaUqHA2ph77nYXP7dps2Xw")
}, [addPin])

return (
<div className={classes.root}>
<Typography variant='h1'>Cids</Typography>
<button onClick={onCreateHardcodedPin}>create pin with hardcoded cid</button>
<Table
fullWidth={true}
striped={true}
hover={true}
className=""
>
<TableHead className={classes.tableHead}>
<TableRow
type="grid"
className=""
>
<TableHeadCell
sortButtons={false}
align="center"
>
<Trans>Cid</Trans>
</TableHeadCell>
<TableHeadCell
sortButtons={false}
align="center"
>
<Trans>Created</Trans>
</TableHeadCell>
<TableHeadCell
sortButtons={false}
align="center"
>
<Trans>Size</Trans>
</TableHeadCell>
<TableHeadCell>{/* IPFS Gateway */}</TableHeadCell>
<TableHeadCell>{/* Menu */}</TableHeadCell>
</TableRow>
</TableHead>
<TableBody>
{pins.map((pinObject, index) =>
<PinRow
pinObject={pinObject}
key={index}
/>
)}
</TableBody>
</Table>
</div>
)
}

export default CidsPage
4 changes: 2 additions & 2 deletions packages/storage-ui/src/Components/Pages/LoginPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from "react"
import { makeStyles, createStyles, useThemeSwitcher } from "@chainsafe/common-theme"
import { CSFTheme } from "../../Themes/types"
import InitialScreen from "../Modules/LoginModule/InitialScreen"
import { ChainsafeFilesLogo, ChainsafeLogo, Typography } from "@chainsafe/common-components"
import { ChainsafeLogo, Typography } from "@chainsafe/common-components"
import { ROUTE_LINKS } from "../StorageRoutes"
import { Trans } from "@lingui/macro"
import BottomDarkSVG from "../../Media/landing/layers/dark/Bottom.dark.svg"
Expand Down Expand Up @@ -127,7 +127,7 @@ const LoginPage = () => {
return (
<div className={classes.root}>
<Typography className={classes.title}>
<ChainsafeFilesLogo className={classes.filesLogo} />
<ChainsafeLogo className={classes.filesLogo} />
ChainSafe Storage
</Typography>
<>
Expand Down
Loading

0 comments on commit 0267f5b

Please sign in to comment.