+
@@ -51,3 +56,4 @@ const TaskCard = ({ startingIn, task, id, type, spaceId}: TaskCardProps) => {
};
export default TaskCard;
+
diff --git a/src/atlas_frontend/src/components/Submissions/TaskSummation.tsx b/src/atlas_frontend/src/components/Submissions/TaskSummation.tsx
new file mode 100644
index 0000000..42ba209
--- /dev/null
+++ b/src/atlas_frontend/src/components/Submissions/TaskSummation.tsx
@@ -0,0 +1,237 @@
+import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import type { ActorSubclass } from "@dfinity/agent";
+import { Principal } from "@dfinity/principal";
+import {
+ acceptSubtaskSubmission,
+ getSpaceTasks,
+ rejectSubtaskSubmission,
+} from "../../canisters/atlasSpace/api";
+import type {
+ _SERVICE,
+ TaskType,
+} from "../../../../declarations/atlas_space/atlas_space.did";
+import type { UserSubmissions } from "../../canisters/atlasSpace/tasks";
+import Button from "../Shared/Button";
+import type { TaskData } from "../../canisters/atlasSpace/types";
+import toast from "react-hot-toast";
+import type { RootState } from "../../store/store";
+import { useForm, type SubmitHandler } from "react-hook-form";
+import { runWithLoading } from "../../utils/loading";
+
+type GenericTaskType = Extract['GenericTask'];
+type DiscordTaskType = Extract['DiscordTask'];
+
+export interface TaskSummationProps {
+ task: GenericTaskType | DiscordTaskType;
+ usersSubmissions: UserSubmissions;
+ submission: TaskData;
+ authAtlasSpace: ActorSubclass<_SERVICE>;
+ taskId: string;
+ subtaskId: string;
+ unAuthAtlasSpace: ActorSubclass<_SERVICE>;
+ spaceId: string;
+ submissionState: "Rejected" | "WaitingForReview" | "Accepted";
+ user: string;
+}
+
+interface SubtaskSubmission {
+ authAtlasSpace: ActorSubclass<_SERVICE>;
+ userPrincipal: Principal;
+ taskId: bigint;
+ subtaskId: bigint;
+ reason: string | null;
+}
+
+const getDiscordAccountCreationDate = (userId: string): Date => {
+ const discordEpoch = 1420070400000;
+ const timestamp = (BigInt(userId) >> 22n) + BigInt(discordEpoch);
+ return new Date(Number(timestamp));
+};
+
+const TaskSummation = ({
+ task,
+ submission,
+ authAtlasSpace,
+ taskId,
+ subtaskId,
+ unAuthAtlasSpace,
+ spaceId,
+ submissionState,
+ user,
+}: TaskSummationProps) => {
+ const dispatch = useDispatch();
+ const userPrincipal = Principal.from(user);
+ const isLoading = useSelector((state: RootState) => state.app.isLoading);
+ const [showRejectPopup, setShowRejectPopup] = useState(false);
+
+ const { register, handleSubmit } = useForm();
+ const onSubmit: SubmitHandler = async (data) => {
+ const rawReason = data.reason?.trim();
+ const trimmedRawReason = !rawReason || rawReason === "" ? null : rawReason;
+
+ await runWithLoading(async () => {
+ await toast.promise(
+ rejectSubtaskSubmission({
+ authAtlasSpace,
+ userPrincipal,
+ taskId: BigInt(taskId),
+ subtaskId: BigInt(subtaskId),
+ reason: trimmedRawReason,
+ }),
+ {
+ loading: "Rejecting task...",
+ error: "Failed to reject task.",
+ }
+ );
+ setShowRejectPopup(false);
+ await getSpaceTasks({
+ spaceId,
+ unAuthAtlasSpace,
+ dispatch,
+ });
+ }, dispatch,
+ () => setShowRejectPopup(false)
+ );
+ };
+
+ const acceptSubtask = async () => {
+ await runWithLoading(async () => {
+ await toast.promise(
+ acceptSubtaskSubmission({
+ authAtlasSpace,
+ userPrincipal,
+ taskId: BigInt(taskId),
+ subtaskId: BigInt(subtaskId),
+ }),
+ {
+ loading: "Accepting task...",
+ success: "Task accepted successfully.",
+ error: "Failed to accept task.",
+ }
+ );
+ await getSpaceTasks({
+ spaceId,
+ unAuthAtlasSpace,
+ dispatch,
+ });
+ }, dispatch);
+ };
+
+ const singleSubmissionState = Object.keys(submission.submissionData.state)[0];
+
+ const renderTitleAndDescription = () => {
+ if ('DiscordTask' in task.task_content) {
+ return (
+ <>
+
["GenericTask"];
+type DiscordTaskType = Extract["DiscordTask"];
+
+const TaskRenderer: React.FC = ({ task, ...props }) => {
+ const [subtaskId, taskData] = task;
+
+ if ("GenericTask" in taskData) {
+ const GenericTaskComponent = taskRegistry.GenericTask;
+ return (
+
-
+
+
);
};
diff --git a/src/atlas_frontend/src/modals/tasks/DiscordTask.tsx b/src/atlas_frontend/src/modals/tasks/DiscordTask.tsx
new file mode 100644
index 0000000..e05c81b
--- /dev/null
+++ b/src/atlas_frontend/src/modals/tasks/DiscordTask.tsx
@@ -0,0 +1,248 @@
+import React, { useEffect, useState } from "react";
+import type {
+ FieldErrors,
+ FieldValues,
+ Path,
+ UseFormRegister,
+} from "react-hook-form";
+import Button from "../../components/Shared/Button";
+import type { DiscordGuild as DiscordGuildType } from "../../components/Integrations/discord/types";
+import { Principal } from "@dfinity/principal";
+import { useDiscordAdmin } from "../../hooks/useDiscordAdmin";
+import { useDiscordAuth } from "../../hooks/useDiscordAuth";
+
+interface DiscordGuildProps {
+ guild: DiscordGuildType;
+ onClick: () => void;
+}
+
+const DiscordGuild: React.FC+ {task.task_content.DiscordTask.task_title} +
++ {task.task_content.DiscordTask.task_description} +
+ + ); + } + if ('TitleAndDescription' in task.task_content) { + return ( + <> ++ {task.task_content.TitleAndDescription.task_title} +
++ {task.task_content.TitleAndDescription.task_description} +
+ + ); + } + return null; + }; + + const renderSubmissionContent = () => { + if ('Discord' in submission.submissionData.submission) { + const { username, user_id } = submission.submissionData.submission.Discord; + const creationDate = getDiscordAccountCreationDate(user_id.toString()); + return ( +
+
+ );
+ }
+ return
+
+ Username: {username}
+Account Creation Date: {creationDate.toLocaleDateString()}
+{submission.submissionData.submission.Text.content}
; + }; + + return ( +
+ {singleSubmissionState} {taskId} {subtaskId}
+ {renderTitleAndDescription()}
+
+ );
+};
+
+export default TaskSummation;
\ No newline at end of file
diff --git a/src/atlas_frontend/src/components/Submissions/index.tsx b/src/atlas_frontend/src/components/Submissions/index.tsx
index c7a5e11..138567c 100644
--- a/src/atlas_frontend/src/components/Submissions/index.tsx
+++ b/src/atlas_frontend/src/components/Submissions/index.tsx
@@ -6,7 +6,6 @@ import {
import type {
_SERVICE,
Task,
- TaskType,
} from "../../../../declarations/atlas_space/atlas_space.did";
import { deserialize, type RootState } from "../../store/store";
import { useDispatch, useSelector } from "react-redux";
@@ -14,10 +13,8 @@ import { useNavigate, useParams } from "react-router-dom";
import { useSpaceId } from "../../hooks/space";
import { useEffect, useState } from "react";
import {
- acceptSubtaskSubmission,
getAtlasSpace,
getSpaceTasks,
- rejectSubtaskSubmission,
} from "../../canisters/atlasSpace/api";
import {
getUsersSubmissions,
@@ -25,16 +22,13 @@ import {
} from "../../canisters/atlasSpace/tasks";
import { shortPrincipal } from "../../utils/icp";
import { TiArrowSortedDown } from "react-icons/ti";
-import Button from "../Shared/Button";
import type { ActorSubclass } from "@dfinity/agent";
-import { Principal } from "@dfinity/principal";
-import type { TaskData, TasksData } from "../../canisters/atlasSpace/types";
+import type { TasksData } from "../../canisters/atlasSpace/types";
import type { Space } from "../../store/slices/spacesSlice";
-import { FaArrowLeftLong } from "react-icons/fa6";
import { getTaskPath } from "../../router/paths";
-import { useForm, type SubmitHandler } from "react-hook-form";
-import toast from "react-hot-toast";
-import { runWithLoading } from "../../utils/loading";
+import Button from "../Shared/Button";
+import TaskSummation from "./TaskSummation";
+import { FaArrowLeftLong } from "react-icons/fa6";
const Submissions = () => {
const { spacePrincipal, taskId } = useParams();
@@ -76,7 +70,11 @@ const Submissions = () => {
const currentTask = taskId && tasks ? tasks[taskId] : null;
const tasksCount = currentTask?.tasks?.length ?? 0;
const usersSubmissions = currentTask?.tasks
- ? getUsersSubmissions(currentTask.tasks)
+ ? getUsersSubmissions(
+ Object.fromEntries(
+ currentTask.tasks.map((task, idx) => [idx.toString(), task])
+ )
+ )
: new UserSubmissions({});
if (
@@ -90,7 +88,6 @@ const Submissions = () => {
) {
return <>;
}
-
return (
+
+ {showRejectPopup && (
+ Submitted response:
+
+ {renderSubmissionContent()}
+
+ {submissionState === "Rejected" &&
+ submission.submissionData.rejection_reason[0] &&
+ submission.submissionData.rejection_reason[0].trim().length > 0 && (
+
+
+ )}
+ Reject Reason:
++ {submission.submissionData.rejection_reason[0]} +
+
+ {submissionState === "WaitingForReview" &&
+ singleSubmissionState === "WaitingForReview" && (
+ <>
+
+
+
+
+
+
+ )}
+
+
+ )}
+
+
+ + Reason for Rejection +
+ +
@@ -211,7 +208,7 @@ const Summation = ({
spaceId,
}: SummationProps) => {
const [isSummationOpen, setSummationOpen] = useState(false);
- const submissionState = usersSubmissions.getSubmissionState(userPrincipal);
+ const submissionState = usersSubmissions.getSubmissionState(userPrincipal) as "Rejected" | "WaitingForReview" | "Accepted";
return (
<>
@@ -242,201 +239,41 @@ const Summation = ({
{isSummationOpen && (
-
- {Object.entries(currentTaskData).map(([key]) => (
-
-
- )}
-
- );
-};
-
-interface GenericTaskSummationProps {
- genericTask: TaskType["GenericTask"];
- usersSubmissions: UserSubmissions;
- submission: TaskData;
- authAtlasSpace: ActorSubclass<_SERVICE>;
- taskId: string;
- subtaskId: string;
- unAuthAtlasSpace: ActorSubclass<_SERVICE>;
- spaceId: string;
- submissionState: "Rejected" | "WaitingForReview" | "Accepted";
- user: string;
-}
-
-interface SubtaskSubmission {
- authAtlasSpace: ActorSubclass<_SERVICE>;
- userPrincipal: Principal;
- taskId: bigint;
- subtaskId: bigint;
- reason: string | null;
-}
+
+ {Object.entries(currentTaskData).map(([key]) => {
+ const subtask = currentTask.tasks[Number(key)];
-const GenericTaskSummation = ({
- genericTask,
- submission,
- authAtlasSpace,
- taskId,
- subtaskId,
- unAuthAtlasSpace,
- spaceId,
- submissionState,
- user,
-}: GenericTaskSummationProps) => {
- const dispatch = useDispatch();
- const userPrincipal = Principal.from(user);
- const isLoading = useSelector((state: RootState) => state.app.isLoading);
-
- const { register, handleSubmit } = useForm();
- const onSubmit: SubmitHandler = async (data) => {
- const rawReason = data.reason?.trim();
- const trimmedRawReason = !rawReason || rawReason === "" ? null : rawReason;
- await runWithLoading(
- async () => {
- await toast.promise(
- rejectSubtaskSubmission({
- authAtlasSpace,
- userPrincipal,
- taskId: BigInt(taskId),
- subtaskId: BigInt(subtaskId),
- reason: trimmedRawReason,
- }),
- {
- loading: "Rejecting task...",
- error: "Failed to reject task.",
- }
- );
- setShowRejectPopup(false);
- await getSpaceTasks({
- spaceId,
- unAuthAtlasSpace,
- dispatch,
- });
- },
- dispatch,
- () => setShowRejectPopup(false)
- );
- };
-
- const [showRejectPopup, setShowRejectPopup] = useState(false);
+ const commonProps = {
+ usersSubmissions: usersSubmissions,
+ submission: usersSubmissions.getSubmission(userPrincipal, key),
+ authAtlasSpace: authAtlasSpace,
+ taskId: taskId,
+ subtaskId: key,
+ unAuthAtlasSpace: unAuthAtlasSpace,
+ spaceId: spaceId,
+ submissionState: submissionState,
+ user: userPrincipal,
+ };
- const acceptSubtask = async () => {
- await runWithLoading(async () => {
- await toast.promise(
- acceptSubtaskSubmission({
- authAtlasSpace,
- userPrincipal,
- taskId: BigInt(taskId),
- subtaskId: BigInt(subtaskId),
- }),
- {
- loading: "Accepting task...",
- success: "Task accepted successfully.",
- error: "Failed to accept task.",
- }
- );
- await getSpaceTasks({
- spaceId,
- unAuthAtlasSpace,
- dispatch,
- });
- }, dispatch);
- };
+ const task = "GenericTask" in subtask ? subtask.GenericTask : subtask.DiscordTask;
- const singleSubmissionState = Object.keys(submission.submissionData.state)[0];
+ if (task) {
+ return (
+
+
)}
-
+
);
};
-
export default Submissions;
diff --git a/src/atlas_frontend/src/components/Task/TaskRenderer.tsx b/src/atlas_frontend/src/components/Task/TaskRenderer.tsx
new file mode 100644
index 0000000..a74121e
--- /dev/null
+++ b/src/atlas_frontend/src/components/Task/TaskRenderer.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { taskRegistry } from './tasks/taskRegistry';
+import type { TaskType } from "../../../../declarations/atlas_space/atlas_space.did";
+import type { Principal } from '@dfinity/principal';
+import type { ActorSubclass } from '@dfinity/agent';
+import type { _SERVICE } from '../../../../declarations/atlas_space/atlas_space.did';
+
+interface TaskRendererProps {
+ task: [number, TaskType];
+ spacePrincipal: Principal;
+ taskId: string;
+ unAuthAtlasSpace: ActorSubclass<_SERVICE> | null;
+ isUserInHub: boolean;
+}
+
+type GenericTaskType = Extract
-
- Subtask: {subtaskId} | Status: {singleSubmissionState} -
-- {genericTask.task_content.TitleAndDescription.task_title} -
-- {genericTask.task_content.TitleAndDescription.task_description} -
-
-
- {showRejectPopup && (
- Submitted response:
-
- {submission.submissionData.submission.Text.content}
-
- {submissionState === "Rejected" &&
- submission.submissionData.rejection_reason[0] &&
- submission.submissionData.rejection_reason[0].trim().length > 0 && (
-
-
- )}
- Reject Reason:
-- {submission.submissionData.rejection_reason[0]} -
-
- {submissionState === "WaitingForReview" &&
- singleSubmissionState === "WaitingForReview" && (
- <>
-
-
-
-
-
-
- )}
-
-
+ console.warn(`Unknown task type for key ${key}:`, subtask);
+ return null;
+ })}
+
-
- - Reason for Rejection -
- -
- {currentTask.tasks.map((task, key) => (
-
diff --git a/src/atlas_frontend/src/components/Task/tasks/DiscordTask.tsx b/src/atlas_frontend/src/components/Task/tasks/DiscordTask.tsx
new file mode 100644
index 0000000..9bc9491
--- /dev/null
+++ b/src/atlas_frontend/src/components/Task/tasks/DiscordTask.tsx
@@ -0,0 +1,175 @@
+import React from "react";
+import type {
+ _SERVICE,
+ TaskType,
+} from "../../../../../declarations/atlas_space/atlas_space.did";
+import type { Principal } from "@dfinity/principal";
+import type { ActorSubclass } from "@dfinity/agent";
+import { useDispatch } from "react-redux";
+import { useAuth } from "@nfid/identitykit/react";
+import toast from "react-hot-toast";
+import { submitSubtaskSubmission, getSpaceTasks, getRejectionInfo} from "../../../canisters/atlasSpace/api";
+import { useAuthAtlasSpaceActor } from "../../../hooks/identityKit";
+import Button from "../../Shared/Button";
+import { useDiscordUser } from "../../../hooks/useDiscordUser";
+import { useDiscordAuth } from "../../../hooks/useDiscordAuth";
+import { getErrorWithInfoToast } from "../../../utils/errors";
+import { runWithLoading } from "../../../utils/loading";
+
+type DiscordTaskType = Extract['DiscordTask'];
+
+interface DiscordTaskProps {
+ discordTask: DiscordTaskType;
+ spacePrincipal: Principal;
+ taskId: string;
+ subtaskId: number;
+ unAuthAtlasSpace: ActorSubclass<_SERVICE> | null;
+ isUserInHub: boolean;
+}
+
+const DiscordTask = ({
+ discordTask,
+ spacePrincipal,
+ taskId,
+ subtaskId,
+ unAuthAtlasSpace,
+ isUserInHub,
+}: DiscordTaskProps) => {
+ const dispatch = useDispatch();
+ const { user, connect } = useAuth();
+ const authAtlasSpace = useAuthAtlasSpaceActor(spacePrincipal);
+
+ const { signIn, accessToken } = useDiscordAuth();
+ const { isJoined, setIsJoined, joinServer, checkGuildMembership, discordUser } = useDiscordUser(spacePrincipal);
+
+ const handleSubmit = async () => {
+ const requiredGuildId = 'DiscordTask' in discordTask.task_content && discordTask.task_content.DiscordTask.guild_id;
+
+ if (!requiredGuildId) {
+ toast.error("Guild ID not found in task details.");
+ return;
+ }
+
+ const isMember = await checkGuildMembership(requiredGuildId);
+
+ if (isMember && authAtlasSpace) {
+ await runWithLoading(async () => {
+ const call = submitSubtaskSubmission({
+ authAtlasSpace,
+ taskId: BigInt(taskId),
+ subtaskId: BigInt(subtaskId),
+ submission: { Discord: { username: discordUser?.username ?? "", user_id: BigInt(discordUser?.id ?? "0") } },
+ });
+
+ await toast.promise(call, {
+ loading: "Submitting response...",
+ success: "Submitted response.",
+ error: getErrorWithInfoToast("Failed to submit response."),
+ });
+
+ if (unAuthAtlasSpace) {
+ getSpaceTasks({
+ spaceId: spacePrincipal.toString(),
+ unAuthAtlasSpace,
+ dispatch,
+ });
+ }
+ }, dispatch);
+ }
+ };
+
+ const [, submissionData] = user?.principal
+ ? (discordTask.submission.find(
+ ([principal]) => principal.toString() === user.principal.toString()
+ ) ?? [])
+ : [];
+
+ const currentSubmissionState = submissionData?.state
+ ? Object.keys(submissionData?.state)[0]
+ : null;
+
+ const canSubmit = user && isUserInHub && (
+ currentSubmissionState === null ||
+ (currentSubmissionState === "Rejected" && ("DiscordTask" in discordTask.task_content
+ ? discordTask.task_content.DiscordTask.allow_resubmit : "N/A"))
+ );
+
+ const rawState = Object.keys(submissionData?.state || {})[0] ?? null;
+
+ const validStates = ["Rejected", "WaitingForReview", "Accepted"] as const;
+ type SubmissionState = typeof validStates[number];
+
+ const submissionState = validStates.includes(rawState as SubmissionState)
+ ? (rawState as SubmissionState)
+ : null;
+
+ const { reasonText, showRejectionReason } = getRejectionInfo(
+ submissionData ?? null,
+ submissionState
+ )
+
+ const inviteLink = 'DiscordTask' in discordTask.task_content ? discordTask.task_content.DiscordTask.invite_link : undefined;
+
+ return (
+ ['GenericTask'];
+
interface GenericTaskProps {
- genericTask: TaskType["GenericTask"];
+ genericTask: GenericTaskType;
spacePrincipal: Principal;
taskId: string;
subtaskId: number;
@@ -106,7 +108,8 @@ const GenericTask = ({
const canSubmit = user && isUserInHub && (
currentSubmissionState === null ||
- (currentSubmissionState === "Rejected" && genericTask.task_content.TitleAndDescription.allow_resubmit)
+ (currentSubmissionState === "Rejected" && ("TitleAndDescription" in genericTask.task_content
+ ? genericTask.task_content.TitleAndDescription.allow_resubmit : "N/A"))
);
const rawState = Object.keys(submissionData?.state || {})[0] ?? null;
@@ -138,16 +141,16 @@ const GenericTask = ({
+
+ );
+};
+
+export default DiscordTask;
diff --git a/src/atlas_frontend/src/components/Task/tasks/GenericTask.tsx b/src/atlas_frontend/src/components/Task/tasks/GenericTask.tsx
index 8c82f5c..1d6e3f0 100644
--- a/src/atlas_frontend/src/components/Task/tasks/GenericTask.tsx
+++ b/src/atlas_frontend/src/components/Task/tasks/GenericTask.tsx
@@ -22,8 +22,10 @@ import type { ActorSubclass } from "@dfinity/agent";
import { getErrorWithInfoToast } from "../../../utils/errors";
import { runWithLoading } from "../../../utils/loading";
+type GenericTaskType = Extract
+
+
+ {submissionState === "WaitingForReview" && (
+ 
+ )}
+ {submissionState === "Accepted" && (
+
+ )}
+
+
+
+ )}
+ {submissionState === "Accepted" && (
+
+ )}
+
+
+
+ { 'DiscordTask' in discordTask.task_content && (
+ <>
+
+ {showRejectionReason && (
+ + {discordTask.task_content.DiscordTask.task_title} +
++ {discordTask.task_content.DiscordTask.task_description} +
+ + )} +
+
+ )}
+ {canSubmit && !accessToken && (
+
+ )}
+ {canSubmit && accessToken && !isJoined && inviteLink && (
+
+ )}
+ {canSubmit && accessToken && isJoined && (
+
+ )}
+ {!user && (
+ Rejected reason:
++ {reasonText} +
+
+
+
+ )}
+
-
{showRejectionReason && (
- {"TitleAndDescription" in genericTask.task_content - ? genericTask.task_content.TitleAndDescription.task_title - : "N/A"} -
-- {"TitleAndDescription" in genericTask.task_content - ? genericTask.task_content.TitleAndDescription.task_description - : "N/A"} -
+ { 'TitleAndDescription' in genericTask.task_content && ( + <> ++ {genericTask.task_content.TitleAndDescription.task_title} +
++ {genericTask.task_content.TitleAndDescription.task_description} +
+ + )}
diff --git a/src/atlas_frontend/src/components/Task/tasks/taskRegistry.ts b/src/atlas_frontend/src/components/Task/tasks/taskRegistry.ts
new file mode 100644
index 0000000..24ab204
--- /dev/null
+++ b/src/atlas_frontend/src/components/Task/tasks/taskRegistry.ts
@@ -0,0 +1,7 @@
+import GenericTask from './GenericTask';
+import DiscordTask from './DiscordTask';
+
+export const taskRegistry = {
+ GenericTask,
+ DiscordTask,
+};
\ No newline at end of file
diff --git a/src/atlas_frontend/src/hooks/identityKit.ts b/src/atlas_frontend/src/hooks/identityKit.ts
index a1eb248..d974897 100644
--- a/src/atlas_frontend/src/hooks/identityKit.ts
+++ b/src/atlas_frontend/src/hooks/identityKit.ts
@@ -80,7 +80,10 @@ export const useUnAuthCkUsdcIndexerActor = () => {
export const useAuthAtlasSpaceActor = (canisterId: Principal) => {
const agent = useAuthAgent();
- return agent && atlasSpaceActor(agent, canisterId)
+ return useMemo(() => {
+ if (!agent) return null;
+ return atlasSpaceActor(agent, canisterId);
+ }, [agent, canisterId]);
};
export const useUnAuthAtlasSpaceActor = (canisterId: Principal) => {
diff --git a/src/atlas_frontend/src/hooks/useDiscordAdmin.ts b/src/atlas_frontend/src/hooks/useDiscordAdmin.ts
new file mode 100644
index 0000000..8a4a8c9
--- /dev/null
+++ b/src/atlas_frontend/src/hooks/useDiscordAdmin.ts
@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { Principal } from "@dfinity/principal";
+import toast from "react-hot-toast";
+import { getDiscordGuilds, validateDiscordInvite } from "../canisters/atlasSpace/api";
+import type { DiscordGuild as DiscordGuildType } from "../components/Integrations/discord/types";
+import { useDiscordAuth } from "./useDiscordAuth";
+import { validateDiscordInviteLink } from "../utils/discord";
+
+export type ValidationStatus = "idle" | "validating" | "valid" | "invalid";
+
+export interface ValidationState {
+ status: ValidationStatus;
+ error?: string | null;
+ expiresAt?: string | null;
+}
+
+export const useDiscordAdmin = (
+ spacePrincipal?: Principal,
+ inviteLink?: string,
+ guildId?: string | null,
+ isLinkFormatValid?: boolean
+) => {
+ const { accessToken } = useDiscordAuth();
+ const [discordGuilds, setDiscordGuilds] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [validationState, setValidationState] = useState({
+ status: "idle",
+ });
+ const hasFetchedGuilds = useRef(false);
+ const previousValidationInput = useRef<{ inviteLink?: string; guildId?: string } | null>(null);
+
+ const fetchAdminGuilds = useCallback(async () => {
+ if (!accessToken || hasFetchedGuilds.current) return;
+ hasFetchedGuilds.current = true;
+ setLoading(true);
+ try {
+ const toastId = toast.loading("Loading Discord guilds...");
+ const guilds = await getDiscordGuilds(accessToken);
+ setDiscordGuilds(guilds);
+ toast.success("Discord guilds loaded!", { id: toastId });
+ } catch (err) {
+ console.error('Failed to fetch Discord guilds: ', err);
+ toast.error('Failed to load Discord guilds.');
+ } finally {
+ setLoading(false);
+ }
+ }, [accessToken]);
+
+ useEffect(() => {
+ if (accessToken) {
+ fetchAdminGuilds();
+ }
+ }, [accessToken, fetchAdminGuilds]);
+
+ useEffect(() => {
+ if (!isLinkFormatValid || !inviteLink || !guildId) {
+ setValidationState({ status: "idle" });
+ return;
+ }
+
+ if (
+ validationState.status === "valid" &&
+ previousValidationInput.current?.inviteLink === inviteLink &&
+ previousValidationInput.current?.guildId === guildId
+ ) {
+ return;
+ }
+
+ previousValidationInput.current = { inviteLink, guildId };
+
+ const validate = async () => {
+ setValidationState({ status: "validating" });
+
+ const result = await validateDiscordInviteLink(
+ inviteLink,
+ guildId,
+ validateDiscordInvite
+ );
+
+ setValidationState({
+ status: result.status,
+ expiresAt: result.expiresAt,
+ error: result.error,
+ });
+ };
+
+ const timeoutId = setTimeout(validate, 500);
+ return () => clearTimeout(timeoutId);
+ }, [inviteLink, guildId, isLinkFormatValid]);
+
+ return {
+ adminGuilds: discordGuilds,
+ validationState,
+ loading,
+ fetchAdminGuilds,
+ };
+};
\ No newline at end of file
diff --git a/src/atlas_frontend/src/hooks/useDiscordAuth.ts b/src/atlas_frontend/src/hooks/useDiscordAuth.ts
new file mode 100644
index 0000000..d162ad1
--- /dev/null
+++ b/src/atlas_frontend/src/hooks/useDiscordAuth.ts
@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useAuth } from "@nfid/identitykit/react";
+import toast from "react-hot-toast";
+import { setDiscordUserAccessToken } from "../store/slices/userSlice";
+import type { RootState } from "../store/store";
+import { getOAuth2URL, getUserData, type UserData } from "../components/Integrations/discord/discord";
+
+export const useDiscordAuth = () => {
+ const dispatch = useDispatch();
+ const { user } = useAuth();
+ const accessToken = useSelector((state: RootState) => state.user.accessToken);
+ const [discordUser, setDiscordUser] = useState(null);
+ const [loading, setLoading] = useState(false);
+
+ const signIn = () => {
+ window.open(getOAuth2URL(user?.principal.toString()), "_blank", "width=500,height=600");
+ };
+
+ const fetchUserData = useCallback(
+ async (token: string) => {
+ setLoading(true);
+ try {
+ const userData: UserData = await getUserData(token);
+ setDiscordUser(userData);
+ dispatch(setDiscordUserAccessToken({ accessToken: token }));
+ toast.success(`Welcome, ${userData.username}!`, { id: "discord-welcome" });
+ } catch (err) {
+ console.error('Failed to fetch Discord data: ', err);
+ toast.error('Failed to load Discord data.');
+ } finally {
+ setLoading(false);
+ }
+ },
+ [dispatch]
+ );
+
+ const handleMessage = useCallback(
+ (event: MessageEvent) => {
+ if (event.origin !== window.location.origin) return;
+ const { accessToken } = event.data as { accessToken: string };
+ if (accessToken) {
+ fetchUserData(accessToken);
+ }
+ },
+ [fetchUserData]
+ );
+
+ useEffect(() => {
+ window.addEventListener('message', handleMessage);
+ return () => {
+ window.removeEventListener("message", handleMessage);
+ };
+ }, [handleMessage]);
+
+ return {
+ signIn,
+ accessToken,
+ discordUser,
+ isAuthenticated: !!accessToken,
+ loading,
+ };
+};
\ No newline at end of file
diff --git a/src/atlas_frontend/src/hooks/useDiscordUser.ts b/src/atlas_frontend/src/hooks/useDiscordUser.ts
new file mode 100644
index 0000000..9e87aca
--- /dev/null
+++ b/src/atlas_frontend/src/hooks/useDiscordUser.ts
@@ -0,0 +1,56 @@
+import { useState } from "react";
+import type { Principal } from "@dfinity/principal";
+import toast from "react-hot-toast";
+import { useAuthAtlasSpaceActor } from "./identityKit";
+import { getDiscordGuilds } from "../canisters/atlasSpace/api";
+import { useDiscordAuth } from "./useDiscordAuth";
+
+export const useDiscordUser = (spacePrincipal?: Principal) => {
+ const { accessToken, discordUser } = useDiscordAuth();
+ const [isJoined, setIsJoined] = useState(false);
+ const authAtlasSpace = spacePrincipal
+ ? useAuthAtlasSpaceActor(spacePrincipal)
+ : null;
+
+ const joinServer = (inviteLink: string) => {
+ window.open(inviteLink, "_blank");
+ setIsJoined(true);
+ };
+
+ const checkGuildMembership = async (requiredGuildId: string) => {
+ if (!accessToken) {
+ toast.error("Authentication details are missing.");
+ return false;
+ }
+
+ const toastId = toast.loading("Fetching your Discord guilds...");
+
+ try {
+ const userGuilds = await getDiscordGuilds(accessToken);
+ toast.loading("Checking if you are a member of the guild...", { id: toastId });
+
+ const isMember = userGuilds.some((guild) => guild.id === requiredGuildId);
+
+ if (isMember) {
+ toast.success("Approved! You are a member of the guild.", { id: toastId });
+ return true;
+ } else {
+ toast.error(`You have to be a member of the required guild.`, { id: toastId });
+ setIsJoined(false);
+ return false;
+ }
+ } catch (error) {
+ console.error("Failed to check guild membership:", error);
+ toast.error("Failed to verify guild membership. Please try again.", { id: toastId });
+ return false;
+ }
+ };
+
+ return {
+ isJoined,
+ setIsJoined,
+ joinServer,
+ checkGuildMembership,
+ discordUser,
+ };
+};
\ No newline at end of file
diff --git a/src/atlas_frontend/src/modals/CreateNewTaskModal.tsx b/src/atlas_frontend/src/modals/CreateNewTaskModal.tsx
index 4df27ce..629c6eb 100644
--- a/src/atlas_frontend/src/modals/CreateNewTaskModal.tsx
+++ b/src/atlas_frontend/src/modals/CreateNewTaskModal.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm, useFieldArray, type SubmitHandler } from "react-hook-form";
import Button from "../components/Shared/Button";
@@ -30,9 +30,10 @@ import {
} from "../store/slices/appSlice";
import { deserialize, type RootState } from "../store/store";
import { getErrorWithInfoToast } from "../utils/errors";
+import DiscordTask from "./tasks/DiscordTask";
+import { mapTasks, TaskType } from "../utils/taskMapper";
+
-type TaskType = "generic";
-const allowedTaskTypes = ["generic"] as const;
interface CreateNewTaskFormInput {
numberOfUses: number;
@@ -42,6 +43,8 @@ interface CreateNewTaskFormInput {
taskType: TaskType;
title: string;
description: string;
+ guildId?: string;
+ inviteLink?: string;
allowresubmit: boolean;
}[];
}
@@ -50,7 +53,7 @@ const maxTitleLength = 50;
const maxDescriptionLength = 500;
const taskSchema = yup.object({
- taskType: yup.mixed().oneOf(allowedTaskTypes).required(),
+ taskType: yup.mixed().oneOf(Object.values(TaskType)).required(),
title: yup
.string()
.trim()
@@ -64,6 +67,27 @@ const taskSchema = yup.object({
.min(2)
.required()
.label("Task description"),
+ guildId: yup
+ .string()
+ .when("taskType", {
+ is: (value: TaskType) => value === TaskType.Discord,
+ then: (schema: yup.StringSchema) =>
+ schema
+ .typeError("Guild ID must be a valid string")
+ .required("Guild ID is required for Discord tasks"),
+ })
+ .label("Guild ID"),
+ inviteLink: yup
+ .string()
+ .when("taskType", {
+ is: (value: TaskType) => value === TaskType.Discord,
+ then: (schema: yup.StringSchema) =>
+ schema
+ .trim()
+ .matches(/^(https?:\/\/)?(www\.)?discord\.(gg|com\/invite)\/[a-zA-Z0-9-]+$/, "Invalid invite link format")
+ .required("Invite link is required for Discord tasks"),
+ })
+ .label("Invite Link"),
allowresubmit: yup.boolean().required(),
});
@@ -99,6 +123,7 @@ const CreateNewTaskModal = ({ callback }: CreateNewTaskModalArgs) => {
const navigate = useNavigate();
const location = useLocation();
const dispatch = useDispatch();
+ const [isInviteValid, setInviteValid] = useState(false);
const isLoading = useSelector(
(state: RootState) => state.app.isLoading
);
@@ -110,12 +135,13 @@ const CreateNewTaskModal = ({ callback }: CreateNewTaskModalArgs) => {
formState: { errors },
} = useForm({
resolver: yupResolver(schema),
+ mode: "onChange",
defaultValues: {
numberOfUses: 1,
rewardPerUsage: 0.1,
tasks: [
{
- taskType: "generic",
+ taskType: TaskType.Generic,
title: "",
description: "",
allowresubmit: false,
@@ -182,18 +208,7 @@ const CreateNewTaskModal = ({ callback }: CreateNewTaskModalArgs) => {
return;
}
- const taskContent = tasks
- ?.map((task) => {
- if (task.taskType === "generic") {
- return {
- task_type: "generic",
- title: task.title,
- description: task.description,
- allow_resubmit: task.allowresubmit,
- };
- }
- })
- .filter((item) => item !== undefined);
+ const taskContent = mapTasks(tasks ?? []);
if (!taskContent || taskContent.length === 0) {
toast.error("Invalid subtasks: the minimum number of subtasks is one.");
@@ -262,7 +277,7 @@ const CreateNewTaskModal = ({ callback }: CreateNewTaskModalArgs) => {
+ )}
+
+
+
+ {errors?.tasks?.[index]?.allowresubmit?.message && (
+
+ {errors.tasks[index].allowresubmit.message.toString()}
+
+ )}
- );
- })}
-
-
-
+ );
+ })}
+
- Estimated cost: {formatUnits(estimatedCost, DECIMALS)}
- 
+
+
+
+ Estimated cost: {formatUnits(estimatedCost, DECIMALS)}
+
+
+ {iconUrl && (
+ 
+ )}
+ {guild.name}
+
+ );
+};
+
+interface DiscordGuildDropdownProps {
+ guilds: DiscordGuildType[];
+ selectedGuild: DiscordGuildType | null;
+ onSelect: (guild: DiscordGuildType) => void;
+}
+
+const DiscordGuildDropdown: React.FC
+
+ );
+};
+
+
+interface DiscordTaskProps setIsOpen(!isOpen)}
+ >
+ {selectedGuild && selectedGuildIconUrl && (
+ 
+ )}
+ {selectedGuild ? selectedGuild.name : '-- Select a guild --'}
+
+ {isOpen && (
+
+ {guilds.map((guild) => (
+ handleSelect(guild)}
+ />
+ ))}
+
+ )}
+
+ {
+ setSelectedGuild(guild);
+ onChange({
+ target: { name: `tasks.${index}.guildId`, value: guild.id },
+ });
+ }}
+ />
+ {guildIdError && (
+ {guildIdError}
+ )}
+ {!accessToken && (
+
+ )}
+
+ );
+};
+export default DiscordTask;
diff --git a/src/atlas_frontend/src/store/slices/userSlice.ts b/src/atlas_frontend/src/store/slices/userSlice.ts
index 6e240d8..a6e37ac 100644
--- a/src/atlas_frontend/src/store/slices/userSlice.ts
+++ b/src/atlas_frontend/src/store/slices/userSlice.ts
@@ -78,6 +78,7 @@ interface UserState {
};
blockchain: StorableUser | null;
userHub: string | null;
+ accessToken: string | null;
}
const initialState = (): UserState => {
@@ -88,6 +89,7 @@ const initialState = (): UserState => {
},
userHub: null,
blockchain: null,
+ accessToken: null,
};
};
@@ -107,6 +109,11 @@ export const userSlice = createSlice({
...action.payload,
};
},
+ setDiscordUserAccessToken: (state, action: PayloadAction<{
+ accessToken: string;
+ }>) => {
+ state.accessToken = action.payload.accessToken;
+ },
},
selectors: {
selectUserBlockchainData: (userState: UserState) => {
@@ -122,11 +129,16 @@ export const userSlice = createSlice({
selectUserTxs: (userState: UserState) => {
return userState.txs;
},
+ selectDiscordUserAccessToken: (userState: UserState) => {
+ if(userState.accessToken)
+ return userState.accessToken;
+ return null;
+ }
},
});
-export const { setUserBlockchainData, setCkUsdcBalance, appendUserTxs } =
+export const { setUserBlockchainData, setCkUsdcBalance, appendUserTxs, setDiscordUserAccessToken } =
userSlice.actions;
-export const { selectUserBlockchainData, selectUserCkUsdc, selectUserTxs } =
+export const { selectUserBlockchainData, selectUserCkUsdc, selectUserTxs, selectDiscordUserAccessToken } =
userSlice.selectors;
export default userSlice.reducer;
diff --git a/src/atlas_frontend/src/utils/discord.ts b/src/atlas_frontend/src/utils/discord.ts
new file mode 100644
index 0000000..604bf9e
--- /dev/null
+++ b/src/atlas_frontend/src/utils/discord.ts
@@ -0,0 +1,59 @@
+import type { DiscordInviteApiResponse } from "../components/Integrations/discord/types";
+
+export interface DiscordValidationResult {
+ status: "valid" | "invalid";
+ expiresAt?: string | null;
+ error?: string | null;
+}
+
+export const createTimeoutPromise = (timeoutMs: number = 5000): PromiseTitle:
+ )} + className={`border-2 p-2 rounded-xl ${ + titleError && "border-red-500" + }`} + /> + {titleError && {titleError}} + +Description:
+ + {descriptionError && ( + {descriptionError} + )} +Guild ID:
+Invitation Link:
+ { + setInviteLink(e.target.value); + onInviteLinkChange(e); + }} + disabled={!selectedGuild} + className={`border-2 p-2 rounded-xl bg-white text-black w-full ${ + !selectedGuild ? "bg-gray-200" : "" + } ${ + validationState.status === "validating" + ? "border-yellow-500" + : validationState.status === "invalid" + ? "border-red-500" + : validationState.status === "valid" + ? "border-green-500" + : "" + } ${inviteLinkError && "border-red-500"}`} + /> +
+ {validationState.status === "validating" && (
+ Validating...
+ )}
+ {validationState.status === "invalid" && (
+ {validationState.error}
+ )}
+ {validationState.status === "valid" && (
+
+ Invite link is valid!
+ {' Expires at: '}
+ {validationState.expiresAt
+ ? new Date(validationState.expiresAt).toLocaleString()
+ : 'Never'}
+
+ )}
+ {validationState.status === "idle" && inviteLinkError && (
+ {inviteLinkError}
+ )}
+
+