feat: finish worker page rework

subsquid · May 14, 2024 · 32839af · 32839af
1 parent 2eae8a2
commit 32839af
Show file tree

Hide file tree

Showing 9 changed files with 168 additions and 148 deletions.
diff --git a/src/api/subsquid-network-squid/workers-graphql.ts b/src/api/subsquid-network-squid/workers-graphql.ts
@@ -76,6 +76,29 @@ export class BlockchainApiWorker {
 
     this.totalReward = new Decimal(this.claimedReward).add(this.claimableReward).toFixed(0);
   }
+
+  canEdit() {
+    if (!this.ownedByMe) return false;
+
+    switch (this.status) {
+      case WorkerStatus.Registering:
+      case WorkerStatus.Active:
+        return true;
+      default:
+        return false;
+    }
+  }
+
+  displayStats() {
+    switch (this.status) {
+      case WorkerStatus.Registering:
+      case WorkerStatus.Active:
+      case WorkerStatus.Deregistering:
+        return true;
+      default:
+        return false;
+    }
+  }
 }
 
 // inherit API interface for internal class

diff --git a/src/components/Table/BorderedTable.tsx b/src/components/Table/BorderedTable.tsx
@@ -13,7 +13,7 @@ export const BorderedTable = styled(Table)(({ theme }) => ({
   borderRadius: borderRadius,
   borderSpacing: 0,
   borderCollapse: 'separate',
-  border: `1px solid #e8e8e8`, // FIXME: color should not be hardcoded
+  border: `1px solid ${theme.palette.divider}`,
 
   '& td, & th': {
     background: theme.palette.background.paper,

diff --git a/src/pages/WorkersPage/UptimeGraph.tsx b/src/pages/WorkersPage/UptimeGraph.tsx
@@ -20,13 +20,13 @@ const StyledGraph = styled(Box)(({ theme: { spacing } }) => ({
   marginBottom: spacing(1),
 }));
 
-const StyledNotes = styled(Box)(({ theme: { spacing } }) => ({
+const StyledNotes = styled(Box)(({ theme }) => ({
   display: 'flex',
   justifyContent: 'space-between',
   fontSize: '.875rem',
   lineHeight: '1.25rem',
-  opacity: '.8',
-  marginBottom: spacing(2),
+  color: theme.palette.text.secondary,
+  marginBottom: theme.spacing(2),
 }));
 
 const oneDayInMilliseconds = 24 * 60 * 60 * 1000;

diff --git a/src/pages/WorkersPage/Worker.tsx b/src/pages/WorkersPage/Worker.tsx
@@ -4,7 +4,7 @@ import { Stack } from '@mui/material';
 import { Box } from '@mui/system';
 import { useParams, useSearchParams } from 'react-router-dom';
 
-import { useWorkerByPeerId } from '@api/subsquid-network-squid';
+import { useWorkerByPeerId, WorkerStatus } from '@api/subsquid-network-squid';
 import { Card } from '@components/Card';
 import { Loader } from '@components/Loader';
 import { CenteredPageWrapper, NetworkPageTitle } from '@layouts/NetworkLayout';
@@ -58,7 +58,7 @@ export const Worker = ({ backPath }: { backPath: string }) => {
           <WorkerStatistics worker={worker} />
         </Box>
       </Card>
-      {worker.ownedByMe ? (
+      {worker.ownedByMe && worker.status !== WorkerStatus.Withdrawn ? (
         <Box mt={2.5}>
           <WorkerUnregister worker={worker} />
         </Box>

diff --git a/src/pages/WorkersPage/WorkerCard.tsx b/src/pages/WorkersPage/WorkerCard.tsx
@@ -1,107 +1,65 @@
 import React from 'react';
 
-import { dateFormat } from '@i18n';
-import { Divider, IconButton, Stack, styled } from '@mui/material';
+import { IconButton, Stack, styled, useMediaQuery, useTheme } from '@mui/material';
 import { Box } from '@mui/system';
 import { Link } from 'react-router-dom';
 
 import { BlockchainApiFullWorker } from '@api/subsquid-network-squid';
 import { Avatar } from '@components/Avatar';
 import { CopyToClipboard } from '@components/CopyToClipboard';
+import { shortPeerId } from '@components/PeerId';
 import { EditIcon } from '@icons/EditIcon';
 
 import { WorkerStatus } from './WorkerStatus';
 
-export const WorkerDescLabel = styled(Box, {
-  name: 'WorkerDescLabel',
-})(({ theme }) => ({
-  color: theme.palette.text.primary,
-}));
-export const WorkerDescValue = styled(Box, {
-  name: 'WorkerDescValue',
-})(({ theme }) => ({
-  color: theme.palette.text.secondary,
-}));
 export const PeerIdRow = styled(Box, {
   name: 'PeerIdRow',
 })(({ theme }) => ({
   marginTop: theme.spacing(0.5),
   marginBottom: theme.spacing(1.5),
   color: theme.palette.importantLink.main,
   fontSize: '0.875rem',
-}));
-
-export const WorkerDescription = styled(Box, {
-  name: 'WorkerDescription',
-})(({ theme }) => ({
-  fontSize: '1rem',
-  color: theme.palette.text.secondary,
-  lineHeight: 1.8,
+  overflowWrap: 'anywhere',
 }));
 
 function WorkerTitle({ worker }: { worker: BlockchainApiFullWorker }) {
   return (
     <Box sx={{ display: 'flex', alignItems: 'center' }}>
-      <Box sx={{ fontSize: '1.5rem', lineHeight: 1.4 }}>{worker.name || worker.peerId}</Box>
-      {worker.ownedByMe ? (
-        <Link to={`/workers/${worker.peerId}/edit`}>
-          <IconButton>
-            <EditIcon size={18} color="#1D1D1F" />
-          </IconButton>
-        </Link>
-      ) : null}
-      <Box sx={{ flex: 1, ml: 1 }}>
-        <WorkerStatus worker={worker} />
+      <Box sx={{ fontSize: '1.5rem', lineHeight: 1.4, overflowWrap: 'anywhere' }}>
+        {worker.name || worker.peerId}
       </Box>
+      {worker.canEdit() ? (
+        <IconButton component={Link} to={`/workers/${worker.peerId}/edit`}>
+          <EditIcon size={18} color="#1D1D1F" />
+        </IconButton>
+      ) : null}
     </Box>
   );
 }
 
 export const WorkerCard = ({ worker }: { worker: BlockchainApiFullWorker }) => {
-  return (
-    <Box>
-      <Stack spacing={3} direction="row">
-        <Avatar
-          variant="rounded"
-          name={worker.name || worker.peerId}
-          colorDescriminator={worker.peerId}
-          size={130}
-        />
-        <Box sx={{ flex: 1 }}>
-          <WorkerTitle worker={worker} />
-          <Divider sx={{ my: 1 }} />
-          <WorkerDescription>{worker.description}</WorkerDescription>
-          <Box>
-            <PeerIdRow>
-              <CopyToClipboard text={worker.peerId} content={worker.peerId} />
-            </PeerIdRow>
-          </Box>
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
 
-          <Divider sx={{ my: 1 }} />
-          <Stack spacing={1} direction="row">
-            {/*<Stack direction="row" spacing={1}>*/}
-            {/*  <WorkerDescLabel>Website</WorkerDescLabel>*/}
-            {/*  <WorkerDescValue>{worker.website || '-'}</WorkerDescValue>*/}
-            {/*</Stack>*/}
-            {/*<Stack direction="row" spacing={1}>*/}
-            {/*  <WorkerDescLabel>Contact</WorkerDescLabel>*/}
-            {/*  <WorkerDescValue>{worker.email || '-'}</WorkerDescValue>*/}
-            {/*</Stack>*/}
-            {/*<Stack direction="row" spacing={1}>*/}
-            {/*  <WorkerDescLabel>Version</WorkerDescLabel>*/}
-            {/*  <WorkerDescValue>-</WorkerDescValue>*/}
-            {/*</Stack>*/}
-            <Stack direction="row" spacing={1}>
-              <WorkerDescLabel>Joined</WorkerDescLabel>
-              <WorkerDescValue>{dateFormat(worker.createdAt)}</WorkerDescValue>
-            </Stack>
-            <Stack direction="row" spacing={1}>
-              <WorkerDescLabel>Version</WorkerDescLabel>
-              <WorkerDescValue>{worker.version || '-'}</WorkerDescValue>
-            </Stack>
-          </Stack>
-        </Box>
-      </Stack>
-    </Box>
+  return (
+    <Stack spacing={3} direction="row">
+      <Avatar
+        variant="circular"
+        name={worker.name || worker.peerId}
+        colorDescriminator={worker.peerId}
+        size={100}
+      />
+      <Box sx={{ flex: 1 }}>
+        <WorkerTitle worker={worker} />
+        <PeerIdRow>
+          <CopyToClipboard
+            text={worker.peerId}
+            content={isMobile ? shortPeerId(worker.peerId) : worker.peerId}
+          />
+        </PeerIdRow>
+        <WorkerStatus worker={worker} />
+      </Box>
+      {/* <WorkerDescription>{worker.description}</WorkerDescription> */}
+    </Stack>
   );
 };