added get contributions hook and modified contributions table to be c…

…ompatible with the new contribution model

package.json

@@ -29,10 +29,10 @@
   },
   "dependencies": {
     "@apollo/client": "^3.11.5",
-    "@aut-labs/abi-types": "^0.0.81-dev",
+    "@aut-labs/abi-types": "^0.0.83-dev",
     "@aut-labs/connector": "^0.0.203",
     "@aut-labs/d-aut": "^1.0.202-dev",
-    "@aut-labs/sdk": "^0.0.202-dev",
+    "@aut-labs/sdk": "^0.0.212-dev",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@marker.io/browser": "^0.19.0",

src/components/SubtitleWithInfoIcon.tsx

@@ -16,7 +16,8 @@ export const SubtitleWithInfo = ({ title, description }) => {
         sx={{
           display: "flex",
           justifyContent: "center",
-          alignItems: "center"
+          alignItems: "center",
+          textAlign: "center",
         }}
       >
         {title}

src/pages/AutID/AutHub/AutHubTasksTable.tsx → src/pages/AutID/AutHub/AutHubContributionsTable.tsx

@@ -29,6 +29,7 @@ import {
 } from "@store/contributions/contributions.reducer";
 import { formatContributionType } from "@utils/format-contribution-type";
 import { TaskStatus } from "@store/model";
+import useQueryContributions from "@utils/hooks/GetContributions";
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
   [`&.${tableCellClasses.head}, &.${tableCellClasses.body}`]: {
@@ -50,6 +51,14 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
   }
 }));
 
+const generateRandomId = () => {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0,
+      v = c === "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+};
+
 const TableListItem = memo((data: any) => {
   const dispatch = useDispatch();
   const { row } = data;
@@ -60,19 +69,23 @@ const TableListItem = memo((data: any) => {
   };
 
   const contributionType = useMemo(
-    () => formatContributionType(row?.metadata?.contributionType),
-    [row?.metadata?.contributionType]
+    () => formatContributionType(row?.contributionType),
+    [row?.contributionType]
   );
 
   const startDate = useMemo(() => {
-    // return format(new Date(row?.startDate), "dd.MM.yy '•' HH:mm").toString();
-    return format(new Date(row?.metadata?.startDate), "dd.MM.yy").toString();
-  }, [row?.metadata?.startDate]);
+    return format(
+      new Date(row?.properties?.startDate * 1000),
+      "dd.MM.yy"
+    ).toString();
+  }, [row?.properties?.startDate]);
 
   const endDate = useMemo(() => {
-    // return format(new Date(row?.endDate), "dd.MM.yy '•' HH:mm").toString();
-    return format(new Date(row?.metadata?.startDate), "dd.MM.yy").toString();
-  }, [row?.metadata?.endDate]);
+    return format(
+      new Date(row?.properties?.endDate * 1000),
+      "dd.MM.yy"
+    ).toString();
+  }, [row?.properties?.endDate]);
 
   return (
     <StyledTableRow
@@ -95,10 +108,10 @@ const TableListItem = memo((data: any) => {
       <StyledTableCell align="left">
         <Stack>
           <Typography variant="subtitle2" fontWeight="normal" color="white">
-            {row?.metadata?.name}
+            {row?.name}
           </Typography>
           <Typography variant="caption" fontWeight="normal" color="white">
-            {row?.metadata?.description}
+            {row?.description}
           </Typography>
         </Stack>
       </StyledTableCell>
@@ -155,7 +168,7 @@ const TableListItem = memo((data: any) => {
                 width: "100px"
               }}
               relative="path"
-              to={`contribution/${row.id}`}
+              to={`contribution/${row?.id}`}
               component={Link}
               onClick={() => handleContributionClick(row)}
             >
@@ -191,15 +204,32 @@ const TableListItem = memo((data: any) => {
 });
 
 export const AutHubTasksTable = ({ header }) => {
-  const tasks = useSelector(AllContributions);
-  // const dispatch = useDispatch();
-  // useEffect(() => {
-  //   dispatch(
-  //     updateContributionState({
-  //       contributions: tasks
-  //     })
-  //   );
-  // }, [dispatch, tasks]);
+  const dispatch = useDispatch();
+  const contributions = useSelector(AllContributions);
+
+  const {
+    data,
+    loading: isLoading,
+    refetch
+  } = useQueryContributions({
+    variables: {
+      skip: 0,
+      take: 1000
+    }
+  });
+  useEffect(() => {
+    if (!contributions.length) {
+      const updatedContributions = data?.map((item) => ({
+        ...item,
+        contributionType: "open",
+        status: TaskStatus.Created,
+        id: generateRandomId()
+      }));
+      dispatch(
+        updateContributionState({ contributions: updatedContributions })
+      );
+    }
+  }, [data]);
 
   const theme = useTheme();
   return (
@@ -250,7 +280,7 @@ export const AutHubTasksTable = ({ header }) => {
                   fontWeight="normal"
                   color="offWhite.dark"
                 >
-                  Contribution Type
+                  Type
                 </Typography>
               </StyledTableCell>
               <StyledTableCell align="left">
@@ -282,9 +312,9 @@ export const AutHubTasksTable = ({ header }) => {
               </StyledTableCell>
             </TableRow>
           </TableHead>
-          {tasks?.length ? (
+          {contributions?.length ? (
             <TableBody>
-              {tasks?.map((row, index) => (
+              {contributions?.map((row, index) => (
                 <TableListItem key={`table-row-${index}`} row={row} />
               ))}
             </TableBody>

src/pages/AutID/AutHub/AutHubEdit.tsx

@@ -1,4 +1,3 @@
-
 import {
   Avatar,
   Badge,
@@ -123,17 +122,27 @@ const AutHubEdit = () => {
     autAddress: string;
     hubAddress: string;
   }>();
+
+  const { hubAddress } = params;
   const navigate = useNavigate();
   const status = useSelector(AutUpdateStatus);
   const errorMessage = useSelector(UpdateErrorMessage);
   const [withdrawInitiated, setWithdrawInitiated] = useState(false);
   const selectedNetwork = useSelector(SelectedNetwork);
   const { address } = useAccount();
   const autID = useSelector(SelectedAutID);
-  const selectedHub = useSelector(SelectedHub(params.hubAddress));
-  const autIdHubState = useSelector(AutIdHubState(params.hubAddress));
+  const selectedHub = useSelector(SelectedHub(hubAddress));
+  const autIdHubState = useSelector(AutIdHubState(hubAddress));
   const roleName = useSelector(RoleName(params.hubAddress));
-  const commitmentTemplate = useSelector(CommitmentTemplate(params.hubAddress));
+  const commitmentTemplate = useSelector(CommitmentTemplate(hubAddress));
+
+  useEffect(() => {
+    dispatch(updateAutState({ selectedHubAddress: params.hubAddress }));
+    console.log(
+      "I dispatch updateAutState with selectedHubAddress: ",
+      hubAddress
+    );
+  }, [hubAddress]);
 
   const isAddressTheConnectedUser = useMemo(() => {
     return autID.isAutIDOwner(address);
@@ -792,8 +801,8 @@ const AutHubEdit = () => {
                                   zIndex: 5
                                 }}
                               >
-                                You’ve secured current Reputation! Now boost it
-                                up 💪
+                                You’ve secured your current Contribution! Now
+                                boost it up 💪
                               </Typography>
                             </Box>
                           )}
@@ -914,7 +923,26 @@ const AutHubEdit = () => {
                           description="This is your commitment"
                         ></SubtitleWithInfo>
                       </PropertiesWrapper>
-                      <PropertiesWrapper>
+                      <PropertiesWrapper
+                        sx={{
+                          borderRight: {
+                            xs: "0",
+                            md: "1px solid"
+                          },
+                          borderBottom: {
+                            xs: "1px solid",
+                            md: "0"
+                          },
+                          borderRightColor: {
+                            xs: "transparent",
+                            md: "inherit"
+                          },
+                          borderBottomColor: {
+                            xs: "inherit",
+                            md: "transparent"
+                          }
+                        }}
+                      >
                         <Typography
                           variant="subtitle2"
                           color="offWhite.main"
@@ -923,8 +951,21 @@ const AutHubEdit = () => {
                           1.0
                         </Typography>
                         <SubtitleWithInfo
-                          title="local rep"
-                          description="This is your local reputation."
+                          title="score"
+                          description="This is your participation score."
+                        ></SubtitleWithInfo>
+                      </PropertiesWrapper>
+                      <PropertiesWrapper>
+                        <Typography
+                          variant="subtitle2"
+                          color="offWhite.main"
+                          fontWeight="normal"
+                        >
+                          100
+                        </Typography>
+                        <SubtitleWithInfo
+                          title="points"
+                          description="These are your contribution points."
                         ></SubtitleWithInfo>
                       </PropertiesWrapper>
                     </HubBottomWrapper>

src/pages/AutID/AutHub/AutHubList.tsx

@@ -33,18 +33,18 @@ export const HubTopWrapper = styled(Box)(({ theme }) => ({
   padding: "24px",
   borderBottom: "1px solid",
   borderColor: "inherit",
-  [theme.breakpoints.down("md")]: {
+  [theme.breakpoints.down("lg")]: {
     flexDirection: "column",
     justifyContent: "center",
     gap: "20px"
   }
 }));
 export const HubBottomWrapper = styled(Box)(({ theme }) => ({
   display: "grid",
-  gridTemplateColumns: "4fr 4fr 2fr",
+  gridTemplateColumns: "4fr 4fr 2fr 2fr",
   borderColor: "inherit",
 
-  [theme.breakpoints.down("md")]: {
+  [theme.breakpoints.down("lg")]: {
     display: "flex",
     flexDirection: "column"
   }
@@ -273,7 +273,24 @@ const HubListItem = memo(({ row }: { row: AutOSHub }) => {
             }
           ></SubtitleWithInfo>
         </PropertiesWrapper>
-        <PropertiesWrapper sx={{}}>
+        <PropertiesWrapper sx={{
+            borderRight: {
+              xs: "0",
+              md: "1px solid"
+            },
+            borderBottom: {
+              xs: "1px solid",
+              md: "0"
+            },
+            borderRightColor: {
+              xs: "transparent",
+              md: "inherit"
+            },
+            borderBottomColor: {
+              xs: "inherit",
+              md: "transparent"
+            }
+          }}>
           <Typography
             variant="subtitle2"
             color="offWhite.main"
@@ -282,11 +299,28 @@ const HubListItem = memo(({ row }: { row: AutOSHub }) => {
             1.0
           </Typography>
           <SubtitleWithInfo
-            title="local rep"
+            title="score"
+            description={
+              isAddressTheConnectedUser
+                ? "This is your participation score"
+                : `This is ${autID?.name}'s participation score`
+            }
+          ></SubtitleWithInfo>
+        </PropertiesWrapper>
+        <PropertiesWrapper sx={{}}>
+          <Typography
+            variant="subtitle2"
+            color="offWhite.main"
+            fontWeight="normal"
+          >
+            100
+          </Typography>
+          <SubtitleWithInfo
+            title="points"
             description={
               isAddressTheConnectedUser
-                ? "This is your local reputation"
-                : `This is ${autID?.name}'s local reputation`
+                ? "These are your contribution points"
+                : `These are ${autID?.name}'s contribution points`
             }
           ></SubtitleWithInfo>
         </PropertiesWrapper>
@@ -336,7 +370,7 @@ const AutHubList = ({ isLoading = false, hubs = [] }: TableParamsParams) => {
         sx={{
           minWidth: {
             xs: "unset",
-            md: "700px"
+            lg: "700px"
           },
           display: "grid",
           gap: theme.spacing(2)