From 0dbf1b0eaa6ce7b0df4f803a5b6612a9b53b077a Mon Sep 17 00:00:00 2001 From: eulaliee <52575560+eulaliee@users.noreply.github.com> Date: Sat, 12 Oct 2024 14:22:17 +0300 Subject: [PATCH] added get contributions hook and modified contributions table to be compatible with the new contribution model --- package-lock.json | 20 +- package.json | 4 +- src/components/SubtitleWithInfoIcon.tsx | 3 +- ...Table.tsx => AutHubContributionsTable.tsx} | 76 ++++-- src/pages/AutID/AutHub/AutHubEdit.tsx | 59 ++++- src/pages/AutID/AutHub/AutHubList.tsx | 50 +++- src/pages/AutID/AutHub/AutHubTabs.tsx | 2 +- src/pages/AutID/AutIDProfile.tsx | 2 +- .../Tasks/Contributions/Contributions.tsx | 16 +- src/pages/Tasks/OpenTask/OpenTask.tsx | 16 +- src/pages/Tasks/QuizTask/QuizTask.tsx | 2 +- src/pages/Tasks/Shared/TaskDetails.tsx | 6 +- src/redux/aut/aut.reducer.ts | 4 + .../contributions/contributions.reducer.ts | 234 +++++++++--------- src/utils/hooks/GetContributions.tsx | 70 ++++++ yarn.lock | 18 +- 16 files changed, 382 insertions(+), 200 deletions(-) rename src/pages/AutID/AutHub/{AutHubTasksTable.tsx => AutHubContributionsTable.tsx} (83%) create mode 100644 src/utils/hooks/GetContributions.tsx diff --git a/package-lock.json b/package-lock.json index 7afc27f..9bd756a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,10 +9,10 @@ "version": "0.1.0", "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", @@ -141,10 +141,9 @@ } }, "node_modules/@aut-labs/abi-types": { - "version": "0.0.81-dev", - "resolved": "https://registry.npmjs.org/@aut-labs/abi-types/-/abi-types-0.0.81-dev.tgz", - "integrity": "sha512-/I+6aL353cYrp220yASBHM9KONRd7NFWutonAoRIkZnEzh2fixEHEskkEYB9+3jAAN4LnwKt+/tnKheja8uv9g==", - "license": "ISC" + "version": "0.0.83-dev", + "resolved": "https://registry.npmjs.org/@aut-labs/abi-types/-/abi-types-0.0.83-dev.tgz", + "integrity": "sha512-TYdWEyJ5rAM5uJSF4HwsKbSpygfDhg7PTyahXwEO2cyT4cDz65VAu9B5kA2FOum0teraKrbxHA+5gILVHYzeig==" }, "node_modules/@aut-labs/connector": { "version": "0.0.203", @@ -176,12 +175,11 @@ "integrity": "sha512-ocqU6ousVfW/ffOz8IIpx8Kr8OjS2xKTyPR/y4PgLetEb0rC7BJKDztTd6ztHMvTddsH24OvdHp4oiN0EgdmJQ==" }, "node_modules/@aut-labs/sdk": { - "version": "0.0.202-dev", - "resolved": "https://registry.npmjs.org/@aut-labs/sdk/-/sdk-0.0.202-dev.tgz", - "integrity": "sha512-e7GK257fmXEq62g3NYvo5ve9O6lVXsRUvw3SCLBKeyh8y7E5C6jn+/tMC1n8glq1x0q0+SAZIq8QUcUXvAPSKg==", - "license": "MIT", + "version": "0.0.212-dev", + "resolved": "https://registry.npmjs.org/@aut-labs/sdk/-/sdk-0.0.212-dev.tgz", + "integrity": "sha512-+dbUE8TdthXebu1nRAMGaT/MmGs9ZCLR/ysWUWtLJvi0ESAmEPrgvgJO2qNGVmdTrzvfNCfOs5+ppu9IxoUIiw==", "dependencies": { - "@aut-labs/abi-types": "^0.0.81-dev", + "@aut-labs/abi-types": "^0.0.83-dev", "date-fns": "^2.29.3", "ethers": "^6.10.0" } diff --git a/package.json b/package.json index 7e280a9..0b1401d 100644 --- a/package.json +++ b/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", diff --git a/src/components/SubtitleWithInfoIcon.tsx b/src/components/SubtitleWithInfoIcon.tsx index 1887848..f7ca76e 100644 --- a/src/components/SubtitleWithInfoIcon.tsx +++ b/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} diff --git a/src/pages/AutID/AutHub/AutHubTasksTable.tsx b/src/pages/AutID/AutHub/AutHubContributionsTable.tsx similarity index 83% rename from src/pages/AutID/AutHub/AutHubTasksTable.tsx rename to src/pages/AutID/AutHub/AutHubContributionsTable.tsx index 7d4541c..67dd708 100644 --- a/src/pages/AutID/AutHub/AutHubTasksTable.tsx +++ b/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 ( { - {row?.metadata?.name} + {row?.name} - {row?.metadata?.description} + {row?.description} @@ -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 @@ -282,9 +312,9 @@ export const AutHubTasksTable = ({ header }) => { - {tasks?.length ? ( + {contributions?.length ? ( - {tasks?.map((row, index) => ( + {contributions?.map((row, index) => ( ))} diff --git a/src/pages/AutID/AutHub/AutHubEdit.tsx b/src/pages/AutID/AutHub/AutHubEdit.tsx index bea82a6..bd63569 100644 --- a/src/pages/AutID/AutHub/AutHubEdit.tsx +++ b/src/pages/AutID/AutHub/AutHubEdit.tsx @@ -1,4 +1,3 @@ - import { Avatar, Badge, @@ -123,6 +122,8 @@ const AutHubEdit = () => { autAddress: string; hubAddress: string; }>(); + + const { hubAddress } = params; const navigate = useNavigate(); const status = useSelector(AutUpdateStatus); const errorMessage = useSelector(UpdateErrorMessage); @@ -130,10 +131,18 @@ const AutHubEdit = () => { 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 💪 )} @@ -914,7 +923,26 @@ const AutHubEdit = () => { description="This is your commitment" > - + { 1.0 + + + + 100 + + diff --git a/src/pages/AutID/AutHub/AutHubList.tsx b/src/pages/AutID/AutHub/AutHubList.tsx index cc4006b..11b961e 100644 --- a/src/pages/AutID/AutHub/AutHubList.tsx +++ b/src/pages/AutID/AutHub/AutHubList.tsx @@ -33,7 +33,7 @@ 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" @@ -41,10 +41,10 @@ export const HubTopWrapper = styled(Box)(({ theme }) => ({ })); 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 }) => { } > - + { 1.0 + + + + 100 + + @@ -336,7 +370,7 @@ const AutHubList = ({ isLoading = false, hubs = [] }: TableParamsParams) => { sx={{ minWidth: { xs: "unset", - md: "700px" + lg: "700px" }, display: "grid", gap: theme.spacing(2) diff --git a/src/pages/AutID/AutHub/AutHubTabs.tsx b/src/pages/AutID/AutHub/AutHubTabs.tsx index 2d9f473..8d7dbf1 100644 --- a/src/pages/AutID/AutHub/AutHubTabs.tsx +++ b/src/pages/AutID/AutHub/AutHubTabs.tsx @@ -1,5 +1,5 @@ import { Box, SvgIcon, Typography, useTheme } from "@mui/material"; -import { AutHubTasksTable } from "./AutHubTasksTable"; +import { AutHubTasksTable } from "./AutHubContributionsTable"; import AutTabs from "@components/AutTabs"; import UsersIcon from "@assets/autos/users.svg?react"; import { AutOsButton } from "@components/AutButton"; diff --git a/src/pages/AutID/AutIDProfile.tsx b/src/pages/AutID/AutIDProfile.tsx index 9029e1f..483dac2 100644 --- a/src/pages/AutID/AutIDProfile.tsx +++ b/src/pages/AutID/AutIDProfile.tsx @@ -108,7 +108,7 @@ const AutIDProfile = () => { component: AutMap }, { - label: "Hubs 🔒", + label: "Hubs", // label: ( // <> // diff --git a/src/pages/Tasks/Contributions/Contributions.tsx b/src/pages/Tasks/Contributions/Contributions.tsx index f7a5e88..d72d515 100644 --- a/src/pages/Tasks/Contributions/Contributions.tsx +++ b/src/pages/Tasks/Contributions/Contributions.tsx @@ -8,6 +8,7 @@ import OpenTask from "../OpenTask/OpenTask"; import DiscordTask from "../DiscordTask/DiscordTask"; import QuizTask from "../QuizTask/QuizTask"; import { useParams } from "react-router-dom"; +import useQueryContributions from "@utils/hooks/GetContributions"; const Contributions = () => { let contribution = useSelector(SelectedContribution); @@ -17,15 +18,18 @@ const Contributions = () => { if (!contribution) { contribution = contributions.find((c) => c.id === id); } - - console.log(contribution); return ( <> - {contribution?.metadata?.contributionType === "open" && } - {contribution?.metadata?.contributionType === "discord" && } - {contribution?.metadata?.contributionType === "quiz" && } + {contribution?.contributionType === "open" && ( + + )} + {contribution?.contributionType === "discord" && ( + + )} + {contribution?.contributionType === "quiz" && ( + + )} - ); }; diff --git a/src/pages/Tasks/OpenTask/OpenTask.tsx b/src/pages/Tasks/OpenTask/OpenTask.tsx index ccdf9ae..398f1c2 100644 --- a/src/pages/Tasks/OpenTask/OpenTask.tsx +++ b/src/pages/Tasks/OpenTask/OpenTask.tsx @@ -82,7 +82,7 @@ const UserSubmitContent = ({ await new Promise((resolve) => setTimeout(resolve, 3000)); dispatch( updateContributionById({ - id: contribution.id, + id: contribution?.id, data: { ...contribution, status: TaskStatus.Submitted @@ -113,16 +113,16 @@ const UserSubmitContent = ({ // const attachmentType = useMemo(() => { // // @ts-ignore - // return task.metadata.properties.attachmentType; + // return task.properties.attachmentType; // }, [task]); // const textRequired = useMemo(() => { // // @ts-ignore - // return task.metadata.properties.textRequired; + // return task.properties.textRequired; // }, [task]); - const textRequired = contribution?.metadata?.properties?.textRequired; - const attachmentType = contribution?.metadata?.properties?.attachmentType; + const textRequired = contribution?.properties?.textRequired; + const attachmentType = contribution?.properties?.attachmentType; return ( - {contribution?.metadata?.description} + {contribution?.description} {textRequired && ( - {contribution?.metadata?.description} + {contribution?.description} Contribution Description @@ -350,7 +350,7 @@ const UserSubmitContent = ({ { // @ts-ignore - task?.metadata?.properties?.attachmentRequired && ( + task?.properties?.attachmentRequired && ( { if (!initialized && contribution) { setValue( "questions", - (contribution as any)?.metadata?.properties?.questions + (contribution as any)?.properties?.questions ); setInitialized(true); } diff --git a/src/pages/Tasks/Shared/TaskDetails.tsx b/src/pages/Tasks/Shared/TaskDetails.tsx index 5790352..b5dbfc7 100644 --- a/src/pages/Tasks/Shared/TaskDetails.tsx +++ b/src/pages/Tasks/Shared/TaskDetails.tsx @@ -17,7 +17,7 @@ const TaskDetails = ({ task }: any) => { const isLoading = false; const contributionType = getContributionTypeSubtitle( - task?.metadata?.contributionType + task?.contributionType ); return ( @@ -56,7 +56,7 @@ const TaskDetails = ({ task }: any) => { - {task?.metadata?.name} + {task?.name} @@ -81,7 +81,7 @@ const TaskDetails = ({ task }: any) => { typography={{ maxWidth: "400px" }} - text={task?.metadata?.description} + text={task?.description} /> */} )} diff --git a/src/redux/aut/aut.reducer.ts b/src/redux/aut/aut.reducer.ts index f75ec16..f04b40b 100644 --- a/src/redux/aut/aut.reducer.ts +++ b/src/redux/aut/aut.reducer.ts @@ -11,12 +11,14 @@ export interface AutState { selectedAutIDAddress: string; autID: AutOSAutID; hubs: AutOSHub[]; + selectedHubAddress: string; autIDs: AutOSAutID[]; } const initialState: AutState = { autIDs: [], hubs: [], + selectedHubAddress: "", autID: null, status: ResultState.Idle, errorMessage: "", @@ -111,6 +113,8 @@ export const SelectedAutIDAddress = (state) => export const AutIDs = (state) => state.aut.autIDs as AutOSAutID[]; export const Hubs = (state) => state.aut.hubs as AutOSHub[]; export const SelectedAutID = (state) => state.aut.autID as AutOSAutID; +export const SelectedHubAddress = (state) => + state.aut.selectedHubAddress as string; export const AutUpdateStatus = (state) => state.aut.status as ResultState; export const UpdateErrorMessage = (state) => state.aut.errorMessage as string; diff --git a/src/redux/contributions/contributions.reducer.ts b/src/redux/contributions/contributions.reducer.ts index 670fd72..16b34ed 100644 --- a/src/redux/contributions/contributions.reducer.ts +++ b/src/redux/contributions/contributions.reducer.ts @@ -16,121 +16,121 @@ export const createLink = createAsyncThunk( } ); -const initialContributions = [ - { - status: TaskStatus.Created, - id: "d327e620-7cfa-48fe-8432-39cd0d67b651", - metadata: { - name: "Let's get to know you!", - description: - "We would love to know more about you. Please tell us your favourite season and upload a picture you find interesting.", - startDate: new Date("2024-10-05"), - endDate: new Date("2024-10-15"), - contributionType: "open", - properties: { - textRequired: true, - attachmentType: "image", - attachmentRequired: true - } - } - }, - { - status: TaskStatus.Created, - id: "2a026607-ab47-4777-9f66-2b2c578c50eb", - metadata: { - name: "Introduction", - description: - "Please write a short introduction, so we can get to know you better.", - startDate: new Date("2024-10-05"), - endDate: new Date("2024-10-15"), - contributionType: "open", - properties: { - textRequired: true - } - } - }, - { - status: TaskStatus.Created, - id: "6df121f6-32cc-4f3f-8d45-bb3a6bf8e9f8", - metadata: { - name: "A quiz about Web3", - description: "Take a quiz to test your knowledge about our project.", - startDate: new Date("2024-10-10"), - endDate: new Date("2024-10-11"), - contributionType: "quiz", - properties: { - questions: [ - { - question: "What does 'decentralized' mean in the context of Web3?", - answers: [ - { value: "Controlled by a single entity", correct: false }, - { value: "Distributed across multiple nodes", correct: true }, - { value: "Hosted on a central server", correct: false }, - { value: "Owned by a government", correct: false } - ] - }, - { - question: "What is a DAO in the context of Web3?", - answers: [ - { value: "Digital Asset Organization", correct: false }, - { value: "Decentralized Autonomous Organization", correct: true }, - { value: "Distributed Application Operator", correct: false }, - { value: "Digital Application Organizer", correct: false } - ] - } - ] - } - } - }, - { - status: TaskStatus.Created, - id: "db9096cc-469b-41ef-ac0d-0cc284bd7ad5", - metadata: { - name: "Image Contest", - description: - "Upload a picture that represents how you think about our project.", - startDate: new Date("2024-10-20"), - endDate: new Date("2024-10-30"), - contributionType: "open", - properties: { - attachmentType: "image", - attachmentRequired: true, - textRequired: false - } - } - }, - { - status: TaskStatus.Created, - id: "1781cd39-f55b-490d-8a59-cf8180186420", - metadata: { - name: "Join our Discord", - description: "Become a member of our Discord community.", - startDate: new Date("2024-11-01"), - endDate: new Date("2024-11-10"), - contributionType: "discord", - properties: { - inviteUrl: "https://discord.gg/invite" - } - } - }, - { - status: TaskStatus.Created, - id: "13871cc2-fa8f-4d25-8010-c690809dfb12", - metadata: { - name: "Upload a cover letter", - description: - "Write a bit about yourself and why you want to join our project.", - startDate: new Date("2024-10-01"), - endDate: new Date("2024-11-05"), - contributionType: "open", - properties: { - attachmentType: "text", - attachmentRequired: true, - textRequired: true - } - } - } -]; +// const initialContributions = [ +// { +// status: TaskStatus.Created, +// id: "d327e620-7cfa-48fe-8432-39cd0d67b651", +// metadata: { +// name: "Let's get to know you!", +// description: +// "We would love to know more about you. Please tell us your favourite season and upload a picture you find interesting.", +// startDate: new Date("2024-10-05"), +// endDate: new Date("2024-10-15"), +// contributionType: "open", +// properties: { +// textRequired: true, +// attachmentType: "image", +// attachmentRequired: true +// } +// } +// }, +// { +// status: TaskStatus.Created, +// id: "2a026607-ab47-4777-9f66-2b2c578c50eb", +// metadata: { +// name: "Introduction", +// description: +// "Please write a short introduction, so we can get to know you better.", +// startDate: new Date("2024-10-05"), +// endDate: new Date("2024-10-15"), +// contributionType: "open", +// properties: { +// textRequired: true +// } +// } +// }, +// { +// status: TaskStatus.Created, +// id: "6df121f6-32cc-4f3f-8d45-bb3a6bf8e9f8", +// metadata: { +// name: "A quiz about Web3", +// description: "Take a quiz to test your knowledge about our project.", +// startDate: new Date("2024-10-10"), +// endDate: new Date("2024-10-11"), +// contributionType: "quiz", +// properties: { +// questions: [ +// { +// question: "What does 'decentralized' mean in the context of Web3?", +// answers: [ +// { value: "Controlled by a single entity", correct: false }, +// { value: "Distributed across multiple nodes", correct: true }, +// { value: "Hosted on a central server", correct: false }, +// { value: "Owned by a government", correct: false } +// ] +// }, +// { +// question: "What is a DAO in the context of Web3?", +// answers: [ +// { value: "Digital Asset Organization", correct: false }, +// { value: "Decentralized Autonomous Organization", correct: true }, +// { value: "Distributed Application Operator", correct: false }, +// { value: "Digital Application Organizer", correct: false } +// ] +// } +// ] +// } +// } +// }, +// { +// status: TaskStatus.Created, +// id: "db9096cc-469b-41ef-ac0d-0cc284bd7ad5", +// metadata: { +// name: "Image Contest", +// description: +// "Upload a picture that represents how you think about our project.", +// startDate: new Date("2024-10-20"), +// endDate: new Date("2024-10-30"), +// contributionType: "open", +// properties: { +// attachmentType: "image", +// attachmentRequired: true, +// textRequired: false +// } +// } +// }, +// { +// status: TaskStatus.Created, +// id: "1781cd39-f55b-490d-8a59-cf8180186420", +// metadata: { +// name: "Join our Discord", +// description: "Become a member of our Discord community.", +// startDate: new Date("2024-11-01"), +// endDate: new Date("2024-11-10"), +// contributionType: "discord", +// properties: { +// inviteUrl: "https://discord.gg/invite" +// } +// } +// }, +// { +// status: TaskStatus.Created, +// id: "13871cc2-fa8f-4d25-8010-c690809dfb12", +// metadata: { +// name: "Upload a cover letter", +// description: +// "Write a bit about yourself and why you want to join our project.", +// startDate: new Date("2024-10-01"), +// endDate: new Date("2024-11-05"), +// contributionType: "open", +// properties: { +// attachmentType: "text", +// attachmentRequired: true, +// textRequired: true +// } +// } +// } +// ]; export interface ContributionState { status: ResultState; @@ -143,7 +143,7 @@ const initialState: ContributionState = { status: ResultState.Idle, errorMessage: "", selectedContribution: null, - contributions: initialContributions + contributions: [] }; export const contributionSlice = createSlice({ @@ -162,7 +162,7 @@ export const contributionSlice = createSlice({ updateContributionById(state, action) { const { id, data } = action.payload; const index = state.contributions.findIndex( - (contribution) => contribution.id === id + (contribution) => contribution?.id === id ); if (index !== -1) { state.contributions[index] = { ...state.contributions[index], ...data }; diff --git a/src/utils/hooks/GetContributions.tsx b/src/utils/hooks/GetContributions.tsx new file mode 100644 index 0000000..72ed954 --- /dev/null +++ b/src/utils/hooks/GetContributions.tsx @@ -0,0 +1,70 @@ +/* eslint-disable no-debugger */ + +import AutSDK, { + BaseNFTModel, + fetchMetadata, + Hub, + TaskContribution, + TaskContributionNFT +} from "@aut-labs/sdk"; +import { QueryFunctionOptions, QueryResult } from "@apollo/client"; +import { useEffect, useState } from "react"; +import { environment } from "@api/environment"; +import { AutOSHub } from "@api/models/hub.model"; +import { useSelector } from "react-redux"; +import { Select } from "@mui/material"; +import { SelectedHub, SelectedHubAddress } from "@store/aut/aut.reducer"; +import { RootState } from "@react-three/fiber"; + +const fetchOnChainContributions = async ( + hubData: AutOSHub +): Promise => { + const sdk = await AutSDK.getInstance(); + const hubService: Hub = sdk.initService(Hub, hubData.properties.address); + const taskFactory = await hubService.getTaskFactory(); + const ids = (await taskFactory.functions.contributionIds()) as string[]; + + const contributions = await Promise.all( + ids.map(async (id) => { + const _contribution = await taskFactory.functions.getContributionById(id); + const contribution = TaskContribution.mapFromTuple(_contribution as any); + const metadata = await fetchMetadata>( + contribution.uri, + environment.ipfsGatewayUrl + ); + return { + ...metadata, + properties: { + ...metadata.properties, + ...contribution + } + }; + }) + ); + return contributions; +}; + +const useQueryContributions = (props: QueryFunctionOptions = {}) => { + const [contributions, setContributions] = useState([]); + const [loadingMetadata, setLoadingMetadata] = useState(false); + const selectedHubAddress = useSelector(SelectedHubAddress); + const hubData = useSelector(SelectedHub(selectedHubAddress)); + useEffect(() => { + if (hubData) { + const fetch = async () => { + setLoadingMetadata(true); + const contributions = await fetchOnChainContributions(hubData); + setLoadingMetadata(false); + setContributions(contributions); + }; + fetch(); + } + }, [hubData]); + + return { + data: contributions || [], + loading: loadingMetadata + } as QueryResult; +}; + +export default useQueryContributions; diff --git a/yarn.lock b/yarn.lock index 02cf177..f47b6e0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -45,10 +45,10 @@ tslib "^2.3.0" zen-observable-ts "^1.2.5" -"@aut-labs/abi-types@^0.0.81-dev": - version "0.0.81-dev" - resolved "https://registry.npmjs.org/@aut-labs/abi-types/-/abi-types-0.0.81-dev.tgz" - integrity sha512-/I+6aL353cYrp220yASBHM9KONRd7NFWutonAoRIkZnEzh2fixEHEskkEYB9+3jAAN4LnwKt+/tnKheja8uv9g== +"@aut-labs/abi-types@^0.0.83-dev": + version "0.0.83-dev" + resolved "https://registry.npmjs.org/@aut-labs/abi-types/-/abi-types-0.0.83-dev.tgz" + integrity sha512-TYdWEyJ5rAM5uJSF4HwsKbSpygfDhg7PTyahXwEO2cyT4cDz65VAu9B5kA2FOum0teraKrbxHA+5gILVHYzeig== "@aut-labs/connector@^0.0.203": version "0.0.203" @@ -68,12 +68,12 @@ resolved "https://registry.npmjs.org/@aut-labs/d-aut/-/d-aut-1.0.202-dev.tgz" integrity sha512-ocqU6ousVfW/ffOz8IIpx8Kr8OjS2xKTyPR/y4PgLetEb0rC7BJKDztTd6ztHMvTddsH24OvdHp4oiN0EgdmJQ== -"@aut-labs/sdk@^0.0.202-dev": - version "0.0.202-dev" - resolved "https://registry.npmjs.org/@aut-labs/sdk/-/sdk-0.0.202-dev.tgz" - integrity sha512-e7GK257fmXEq62g3NYvo5ve9O6lVXsRUvw3SCLBKeyh8y7E5C6jn+/tMC1n8glq1x0q0+SAZIq8QUcUXvAPSKg== +"@aut-labs/sdk@^0.0.212-dev": + version "0.0.212-dev" + resolved "https://registry.npmjs.org/@aut-labs/sdk/-/sdk-0.0.212-dev.tgz" + integrity sha512-+dbUE8TdthXebu1nRAMGaT/MmGs9ZCLR/ysWUWtLJvi0ESAmEPrgvgJO2qNGVmdTrzvfNCfOs5+ppu9IxoUIiw== dependencies: - "@aut-labs/abi-types" "^0.0.81-dev" + "@aut-labs/abi-types" "^0.0.83-dev" date-fns "^2.29.3" ethers "^6.10.0"