Add list of my applications

Author: gruz0

contracts/GigsGetMyApplicationsQuery.json

@@ -0,0 +1,82 @@
+[
+  {
+    "inputs": [],
+    "name": "gigsGetMyApplications",
+    "outputs": [
+      {
+        "components": [
+          {
+            "internalType": "address",
+            "name": "jobAddress",
+            "type": "address"
+          },
+          {
+            "internalType": "address",
+            "name": "applicationAddress",
+            "type": "address"
+          },
+          {
+            "internalType": "address",
+            "name": "contractAddress",
+            "type": "address"
+          },
+          {
+            "internalType": "address",
+            "name": "applicantAddress",
+            "type": "address"
+          },
+          {
+            "internalType": "bool",
+            "name": "hasContract",
+            "type": "bool"
+          },
+          {
+            "internalType": "string",
+            "name": "jobTitle",
+            "type": "string"
+          },
+          {
+            "internalType": "string",
+            "name": "jobDescription",
+            "type": "string"
+          },
+          {
+            "internalType": "string",
+            "name": "applicationComment",
+            "type": "string"
+          },
+          {
+            "internalType": "string",
+            "name": "jobCategoryCode",
+            "type": "string"
+          },
+          {
+            "internalType": "string",
+            "name": "jobCategoryLabel",
+            "type": "string"
+          },
+          {
+            "internalType": "uint256",
+            "name": "jobBudget",
+            "type": "uint256"
+          },
+          {
+            "internalType": "uint256",
+            "name": "applicationServiceFee",
+            "type": "uint256"
+          },
+          {
+            "internalType": "uint64",
+            "name": "applicationCreatedAt",
+            "type": "uint64"
+          }
+        ],
+        "internalType": "struct GigsMyApplicationValue[]",
+        "name": "applications",
+        "type": "tuple[]"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  }
+]

src/components/ApplicationListItem.jsx

@@ -62,7 +62,7 @@ const MenuComponent = ({
           <Dropdown item text="Freelancer">
             <Dropdown.Menu>
               <Link href="/freelancer/applications" passHref>
-                <Dropdown.Item text="My Applications" disabled />
+                <Dropdown.Item text="My Applications" />
               </Link>
               <Link href="/freelancer/contracts" passHref>
                 <Dropdown.Item text="My Contracts" />

src/components/ApplicationsList.jsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import Link from 'next/link'
+import { Header, Divider, Label, Icon } from 'semantic-ui-react'
+import { formatDateTime } from '../../lib/formatDate'
+
+export const ApplicationListItem = ({ application }) => {
+  const {
+    jobBudget,
+    applicationServiceFee,
+    jobCategoryLabel,
+    hasContract,
+    contractAddress,
+  } = application
+  const applicationCreatedAt = formatDateTime(application.applicationCreatedAt)
+
+  return (
+    <>
+      <Header as="h3" style={{ wordWrap: 'break-word' }}>
+        <Link href={`/jobs/${application.jobAddress}`}>
+          {application.jobTitle}
+        </Link>
+      </Header>
+
+      <Header as="h4">Job Description Preview:</Header>
+
+      <div style={{ wordWrap: 'break-word' }}>
+        {application.jobDescription
+          .trim()
+          .split('\n')
+          .map((str, idx) => {
+            if (idx < 5) {
+              return (
+                <div key={idx}>
+                  {str}
+
+                  <br />
+                </div>
+              )
+            }
+          })}
+      </div>
+
+      <Header as="h4">Comment:</Header>
+
+      <div style={{ wordWrap: 'break-word' }}>
+        {application.applicationComment.trim()}
+      </div>
+
+      <Divider />
+
+      {jobBudget && jobBudget > 0 && (
+        <Label>
+          <Icon name="money bill alternate" title="Job budget" /> {jobBudget}
+        </Label>
+      )}
+
+      <Label>
+        <Icon name="money bill alternate outline" title="Service rate" />
+        {' ' + applicationServiceFee}
+      </Label>
+
+      <Label>
+        <Icon name="list" /> {jobCategoryLabel}
+      </Label>
+
+      <Label>
+        <Icon name="clock" title="Application created at" />
+        {' ' + applicationCreatedAt}
+      </Label>
+
+      {hasContract && (
+        <Label as="a" href={`/contracts/${contractAddress}`} color="green">
+          <Icon name="browser" title="Has contract" /> Open contract
+        </Label>
+      )}
+    </>
+  )
+}

src/components/Menu.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Segment, Grid } from 'semantic-ui-react'
+import { ApplicationListItem } from './ApplicationListItem'
+
+export const MyApplicationsList = ({ applications }) => {
+  return (
+    <Grid columns={1}>
+      {applications.length > 0 ? (
+        <>
+          {applications.map((application) => {
+            return (
+              <Grid.Column key={application.address}>
+                <Segment>
+                  <ApplicationListItem application={application} />
+                </Segment>
+              </Grid.Column>
+            )
+          })}
+        </>
+      ) : (
+        <Grid.Column>
+          <Segment>
+            <p>No applications yet</p>
+          </Segment>
+        </Grid.Column>
+      )}
+    </Grid>
+  )
+}

src/components/MyApplicationsList/ApplicationListItem.jsx

@@ -1,10 +1,82 @@
-import React from 'react'
-import { Container, Header } from 'semantic-ui-react'
+import React, { useState, useEffect } from 'react'
+import { ethers } from 'ethers'
+import getConfig from 'next/config'
+import { Grid, Header } from 'semantic-ui-react'
+import { MyApplicationsList } from '../../../../components/MyApplicationsList'
+import { useContractRead } from 'wagmi'
+
+import gigsGetMyApplicationsQueryABI from '../../../../../contracts/GigsGetMyApplicationsQuery.json'
+import { JustOneSecondBlockchain } from '../../../../components/JustOneSecond'
+import { errorHandler } from '../../../../lib/errorHandler'
+import ErrorWrapper from '../../../../components/ErrorWrapper'
+
+const { publicRuntimeConfig } = getConfig()
+const { optriSpaceContractAddress } = publicRuntimeConfig
+
+export const ApplicationsScreen = ({ currentAccount }) => {
+  const {
+    data: rawApplications,
+    error: applicationsError,
+    isLoading: applicationsLoading,
+  } = useContractRead({
+    address: optriSpaceContractAddress,
+    abi: gigsGetMyApplicationsQueryABI,
+    functionName: 'gigsGetMyApplications',
+    overrides: { from: currentAccount },
+  })
+
+  const [applications, setApplications] = useState(undefined)
+
+  // FIXME: It should be replaced with: https://wagmi.sh/react/hooks/useContractRead#select-optional
+  useEffect(() => {
+    if (!rawApplications) return
+
+    const j = rawApplications.map((application) => {
+      return {
+        address: application.applicationAddress,
+        jobAddress: application.jobAddress,
+        contractAddress: application.contractAddress,
+        hasContract: application.hasContract,
+        jobTitle: application.jobTitle,
+        jobDescription: application.jobDescription,
+        applicationComment: application.applicationComment,
+        jobCategoryCode: application.jobCategoryCode,
+        jobCategoryLabel: application.jobCategoryLabel,
+        jobBudget: ethers.utils.formatEther(application.jobBudget.toString()),
+        applicationServiceFee: ethers.utils.formatEther(
+          application.applicationServiceFee.toString()
+        ),
+        applicationCreatedAt: +application.applicationCreatedAt.toString(),
+      }
+    })
+
+    const orderedApplications = j.slice().sort((a, b) => {
+      return +b.applicationCreatedAt - +a.applicationCreatedAt
+    })
+
+    setApplications(orderedApplications)
+  }, [rawApplications])
 
-export const ApplicationsScreen = () => {
   return (
-    <Container textAlign="center">
-      <Header as="h1" content="My applications will be available later" />
-    </Container>
+    <Grid stackable columns={1}>
+      <Grid.Column textAlign="center">
+        <Header as="h1" content="My Applications" />
+      </Grid.Column>
+
+      <Grid.Column>
+        {applicationsLoading && (
+          <JustOneSecondBlockchain message="Fetching applications from the blockchain..." />
+        )}
+
+        {applicationsError && (
+          <ErrorWrapper
+            header="Error fetching applications"
+            error={errorHandler(applicationsError)}
+          />
+        )}
+
+        {applications && <MyApplicationsList applications={applications} />}
+      </Grid.Column>
+    </Grid>
   )
 }