From 8f26aa870e12b6fc1cb0ccc387eaeca60fc91ce2 Mon Sep 17 00:00:00 2001
From: luxumbra <me@luxumbra.dev>
Date: Mon, 17 Jul 2023 19:53:20 +0100
Subject: [PATCH] Added types for Dework item wrapper & heading

---
 .../Player/Section/PlayerDework.tsx           | 233 +++++++++++-------
 1 file changed, 150 insertions(+), 83 deletions(-)

diff --git a/packages/web/components/Player/Section/PlayerDework.tsx b/packages/web/components/Player/Section/PlayerDework.tsx
index 7199ed8c..06b0a6d7 100644
--- a/packages/web/components/Player/Section/PlayerDework.tsx
+++ b/packages/web/components/Player/Section/PlayerDework.tsx
@@ -1,5 +1,14 @@
-import { Box, ExternalLinkIcon, Image, Spinner, Text, VStack, Wrap, WrapItem } from '@metafam/ds';
-import {generateUUID} from '@metafam/utils';
+import {
+  Box,
+  ExternalLinkIcon,
+  Image,
+  Spinner,
+  Text,
+  VStack,
+  Wrap,
+  WrapItem,
+} from '@metafam/ds';
+import { generateUUID } from '@metafam/utils';
 import DeworkLogo from 'assets/integrationLogos/deworkLogo.png';
 import { MetaLink } from 'components/Link';
 import { ProfileSection } from 'components/Section/ProfileSection';
@@ -7,20 +16,42 @@ import { Player } from 'graphql/autogen/types';
 import React, { useEffect, useMemo, useState } from 'react';
 import { getDeworkData, processDeworkData } from 'utils/dework';
 
-
 type Props = {
   player: Player;
   isOwnProfile?: boolean;
   editing?: boolean;
 };
 
-export const DeworkSectionWrapper: React.FC = ({ children }: { children: React.ReactNode }) => (
-  <VStack display="inline-flex" flex="0 0 50%" textAlign="left" alignItems="left" mb={3} gap={0}>
+type DeworkSectionWrapperProps = {
+  children: React.ReactNode;
+};
+
+type DeworkSectionHeadingProps = {
+  text: string;
+};
+
+export const DeworkSectionWrapper: React.FC<DeworkSectionWrapperProps> = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => (
+  <VStack
+    display="inline-flex"
+    flex="0 0 50%"
+    textAlign="left"
+    alignItems="left"
+    mb={3}
+    gap={0}
+  >
     {children}
   </VStack>
 );
 
-export const DeworkSectionHeading: React.FC = ({ text }: { text: string })  => (
+export const DeworkSectionHeading: React.FC<DeworkSectionHeadingProps> = ({
+  text,
+}: {
+  text: string;
+}) => (
   <Text fontSize="md" color="blueLight" mb={0} whiteSpace="nowrap">
     {`${text}`}
   </Text>
@@ -37,9 +68,9 @@ export const PlayerDework: React.FC<Props> = ({
   useEffect(() => {
     const getData = async () => {
       setLoading(true);
-      await getDeworkData(player?.ethereumAddress).then((res: any) =>
-        setDeworkData(res),
-        setLoading(false)
+      await getDeworkData(player?.ethereumAddress).then(
+        (res: any) => setDeworkData(res),
+        setLoading(false),
       );
     };
     getData();
@@ -53,87 +84,123 @@ export const PlayerDework: React.FC<Props> = ({
   return (
     <ProfileSection title="Dework Profile" {...{ isOwnProfile, editing }}>
       <Wrap>
-        <WrapItem position="relative" mb={0} display={'flex'} flexFlow={'row wrap'} width="full">
+        <WrapItem
+          position="relative"
+          mb={0}
+          display={'flex'}
+          flexFlow={'row wrap'}
+          width="full"
+        >
           {deworkData && processedData && !loading ? (
             <>
-            <DeworkSectionWrapper>
-              <DeworkSectionHeading text="Contributions" />
-              <Text fontSize="2xl">{deworkData?.tasks.length}</Text>
-            </DeworkSectionWrapper>
-            <DeworkSectionWrapper>
-              <DeworkSectionHeading text="Earnings" />
-              <Text  fontSize="2xl">
-                ${(processedData.totalEarnedInUSDC / 10 ** 18).toFixed(2)}
-              </Text>
-            </DeworkSectionWrapper>
-            <DeworkSectionWrapper>
-              <DeworkSectionHeading text="Types of tasks" />
-              {processedData?.tagGrouping.length > 0 ? (
-                processedData?.tagGrouping.map((tag: Record<string, number>, i: number) => {
-                  const total: number = processedData?.tagGrouping.length;
-                  if (i < 3) {
-                    return (
-                      <>
-                      <Text key={generateUUID()} textTransform="capitalize"  fontSize={{base: 'sm', xl: 'md'}}>
-                        <Box as="span" textOverflow="ellipsis" >{tag.name}</Box> ({tag.count})
-                      </Text>
-                      {i === 2 && <Box as="i" fontSize="sm">{`+${total - 3} other`}</Box>}
-                      </>
-                    );
-                  }
-                  return undefined;
-                })
-
-              ) : (
-                <Text>No tasks</Text>
-              )}
-            </DeworkSectionWrapper>
-            <DeworkSectionWrapper>
-              <DeworkSectionHeading text="Organizations" />
-              {processedData?.uniqueOrganisations.length > 0 ? (
-                processedData?.uniqueOrganisations.map((org: Record<string, string>, i: number) => {
-                  const total: number = processedData?.uniqueOrganisations.length;
-                  if (i < 3) {
-                    return (
-                      <>
-                        <Text key={generateUUID()} fontSize={{base: 'sm', xl: 'md'}}>
-                          {org.name}
-                        </Text>
-                        {i === 2 && <Box as="i">{`+${total - 3} other`}</Box>}
-                      </>
-                    );
-                  }
-                  return undefined;
-                })
-              ) : (
-                <Text>No organizations</Text>
-              )}
+              <DeworkSectionWrapper>
+                <DeworkSectionHeading text="Contributions" />
+                <Text fontSize="2xl">{deworkData?.tasks.length}</Text>
               </DeworkSectionWrapper>
-              </>
-        ) : (
-          <Box display="flex" justifyContent="center" alignItems="center" height="100%" width="full">
+              <DeworkSectionWrapper>
+                <DeworkSectionHeading text="Earnings" />
+                <Text fontSize="2xl">
+                  ${(processedData.totalEarnedInUSDC / 10 ** 18).toFixed(2)}
+                </Text>
+              </DeworkSectionWrapper>
+              <DeworkSectionWrapper>
+                <DeworkSectionHeading text="Types of tasks" />
+                {processedData?.tagGrouping.length > 0 ? (
+                  processedData?.tagGrouping.map(
+                    (tag: Record<string, number>, i: number) => {
+                      const total: number = processedData?.tagGrouping.length;
+                      if (i < 3) {
+                        return (
+                          <>
+                            <Text
+                              key={generateUUID()}
+                              textTransform="capitalize"
+                              fontSize={{ base: 'sm', xl: 'md' }}
+                            >
+                              <Box as="span" textOverflow="ellipsis">
+                                {tag.name}
+                              </Box>{' '}
+                              ({tag.count})
+                            </Text>
+                            {i === 2 && (
+                              <Box as="i" fontSize="sm">{`+${
+                                total - 3
+                              } other`}</Box>
+                            )}
+                          </>
+                        );
+                      }
+                      return undefined;
+                    },
+                  )
+                ) : (
+                  <Text>No tasks</Text>
+                )}
+              </DeworkSectionWrapper>
+              <DeworkSectionWrapper>
+                <DeworkSectionHeading text="Organizations" />
+                {processedData?.uniqueOrganisations.length > 0 ? (
+                  processedData?.uniqueOrganisations.map(
+                    (org: Record<string, string>, i: number) => {
+                      const total: number =
+                        processedData?.uniqueOrganisations.length;
+                      if (i < 3) {
+                        return (
+                          <>
+                            <Text
+                              key={generateUUID()}
+                              fontSize={{ base: 'sm', xl: 'md' }}
+                            >
+                              {org.name}
+                            </Text>
+                            {i === 2 && (
+                              <Box as="i">{`+${total - 3} other`}</Box>
+                            )}
+                          </>
+                        );
+                      }
+                      return undefined;
+                    },
+                  )
+                ) : (
+                  <Text>No organizations</Text>
+                )}
+              </DeworkSectionWrapper>
+            </>
+          ) : (
+            <Box
+              display="flex"
+              justifyContent="center"
+              alignItems="center"
+              height="100%"
+              width="full"
+            >
               <Spinner size="xl" color="purple.500" thickness="4px" />
             </Box>
-          )
-        }
-      <Image
-        src={DeworkLogo.src}
-        height="35px"
-        width="35px"
-          mx="auto"
-          position="absolute"
-          bottom={0}
-          right={0}
-        alt="Dework logo"
-        />
-        {deworkData && (<MetaLink href={`https://app.dework.xyz/profile/${deworkData.address}`} fontWeight={500} display="inline-flex" alignItems="center" isExternal>
-          See complete profile on Dework <ExternalLinkIcon mx="2px" />
-        </MetaLink>)}
+          )}
+          <Image
+            src={DeworkLogo.src}
+            height="35px"
+            width="35px"
+            mx="auto"
+            position="absolute"
+            bottom={0}
+            right={0}
+            alt="Dework logo"
+          />
+          {deworkData && (
+            <MetaLink
+              href={`https://app.dework.xyz/profile/${deworkData.address}`}
+              fontWeight={500}
+              display="inline-flex"
+              alignItems="center"
+              isExternal
+            >
+              See complete profile on Dework <ExternalLinkIcon mx="2px" />
+            </MetaLink>
+          )}
         </WrapItem>
       </Wrap>
     </ProfileSection>
   );
 };
-
-
-