Merge pull request #920 from tablelandnetwork/datadanne/show-mb-contr…

…ibutions-on-owner-profiles

Garage: Show MB contributions on owner profile page

garage/src/hooks/useMissions.ts

@@ -200,3 +200,42 @@ export const useContributions = (
 
   return { contributions, refresh };
 };
+
+export const useOwnerContributions = (owner?: string) => {
+  const { db } = useTablelandConnection();
+
+  const [contributions, setContributions] = useState<MissionContribution[]>();
+
+  useEffect(() => {
+    if (!owner) return;
+
+    let isCancelled = false;
+
+    db.prepare(
+      `SELECT
+        id,
+        mission_id as "missionId",
+        created_at as "createdAt",
+        contributor,
+        data,
+        (CASE
+          WHEN accepted IS NULL THEN 'pending_review'
+          WHEN accepted = 0 THEN 'rejected'
+          ELSE 'accepted' END) as "status",
+        acceptance_motivation as "acceptanceMotivation"
+       FROM ${missionContributionsTable} WHERE lower(contributor) = lower('${owner}') AND accepted = 1`
+    )
+      .all<MissionContribution>()
+      .then(({ results }) => {
+        if (isCancelled) return;
+
+        setContributions(results);
+      });
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [owner, setContributions]);
+
+  return { contributions };
+};

garage/src/pages/Mission/index.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import {
   Box,
   Button,
@@ -136,7 +137,11 @@ const Contributions = ({
                     : truncateWalletAddress(contribution.contributor);
                 return (
                   <Tr key={`contribution-${idx}`}>
-                    <Td pl={p}>{contributor}</Td>
+                    <Td pl={p}>
+                      <Link to={`/owner/${contribution.contributor}`}>
+                        {contributor}
+                      </Link>
+                    </Td>
                     <Td pr={p}>
                       {prettySubmissionStatus(contribution.status)}
                     </Td>

garage/src/pages/OwnerDetails/index.tsx

@@ -7,13 +7,15 @@ import { useOwnerPilots } from "../../hooks/useOwnerPilots";
 import { useOwnerActivity } from "../../hooks/useOwnerActivity";
 import { useOwnerFTRewards } from "../../hooks/useOwnerFTRewards";
 import { useOwnerVotes } from "../../hooks/useOwnerVotes";
+import { useOwnerContributions } from "../../hooks/useMissions";
 import { useNFTsCached } from "../../components/NFTsContext";
 import { TOPBAR_HEIGHT } from "../../Topbar";
 import { RigsGrid } from "./modules/RigsInventory";
 import { ActivityLog } from "./modules/Activity";
 import { Pilots } from "./modules/Pilots";
 import { FTRewards } from "./modules/FTRewards";
 import { Votes } from "./modules/Votes";
+import { MBContributions } from "./modules/MBContributions";
 import { prettyNumber } from "../../utils/fmt";
 import { isValidAddress } from "../../utils/types";
 
@@ -48,6 +50,7 @@ export const OwnerDetails = () => {
   const { nfts } = useNFTsCached(pilots);
   const { rewards } = useOwnerFTRewards(owner);
   const { votes } = useOwnerVotes(owner);
+  const { contributions } = useOwnerContributions(owner);
 
   const { data: ens } = useEnsName({
     address: isValidAddress(owner) ? owner : undefined,
@@ -104,6 +107,7 @@ export const OwnerDetails = () => {
             />
             <Votes votes={votes} {...MODULE_PROPS} />
             <FTRewards rewards={rewards} {...MODULE_PROPS} />
+            <MBContributions contributions={contributions} {...MODULE_PROPS} />
           </VStack>
           <VStack
             flexShrink="0"

garage/src/pages/OwnerDetails/modules/MBContributions.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import {
+  Box,
+  Flex,
+  Heading,
+  Spinner,
+  Table,
+  Tbody,
+  Thead,
+  Th,
+  Text,
+  Tr,
+  Td,
+  VStack,
+  useBreakpointValue,
+  Show,
+} from "@chakra-ui/react";
+import { MissionContribution } from "../../../types";
+
+interface MBContributionsProps extends React.ComponentProps<typeof Box> {
+  contributions?: MissionContribution[];
+}
+
+const noBorderBottom = { borderBottom: "none" };
+
+export const MBContributions = ({
+  contributions,
+  p,
+  ...props
+}: MBContributionsProps) => {
+  const isMobile = useBreakpointValue({
+    base: true,
+    sm: false,
+  });
+
+  const mainRowColAttrs = isMobile ? noBorderBottom : {};
+
+  return (
+    <VStack align="stretch" spacing={4} pt={p} {...props}>
+      <Heading px={p}>MB Contributions</Heading>
+      <Table>
+        <Thead>
+          <Tr>
+            <Th pl={p} width="130px">
+              Block number
+            </Th>
+            <Show above="sm">
+              <Th>Approval Message</Th>
+            </Show>
+            <Th pr={p} width="120px" isNumeric>
+              Mission ID
+            </Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {contributions &&
+            contributions.map(
+              ({ missionId, createdAt, acceptanceMotivation }, index) => {
+                return (
+                  <React.Fragment key={`contribution-${index}`}>
+                    <Tr>
+                      <Td pl={p} width="130px" {...mainRowColAttrs}>
+                        {createdAt}
+                      </Td>
+                      <Show above="sm">
+                        <Td>{acceptanceMotivation}</Td>
+                      </Show>
+                      <Td pr={p} width="120px" isNumeric {...mainRowColAttrs}>
+                        <Link to={`/missions/${missionId}`}>{missionId}</Link>
+                      </Td>
+                    </Tr>
+                    <Show below="sm">
+                      <Tr>
+                        <Td px={p} pt={0} colSpan={2}>
+                          {acceptanceMotivation}
+                        </Td>
+                      </Tr>
+                    </Show>
+                  </React.Fragment>
+                );
+              }
+            )}
+        </Tbody>
+      </Table>
+      {!contributions && (
+        <Flex justify="center" p={p}>
+          <Spinner />
+        </Flex>
+      )}
+      {contributions?.length === 0 && (
+        <Text px={p} py={4} variant="emptyState">
+          This wallet has not contributed to any missions yet.
+        </Text>
+      )}
+    </VStack>
+  );
+};