+
+
+
+ {error && !isMissingParticipantState && (
+ setError(null)} className="mb-0">
+ {error}
+
+ )}
+
+ {success && (
+ setSuccess(null)} className="mb-0">
+ {success}
+
+ )}
+
+ {isMissingParticipantState ? (
+
+ Submission access unavailable
+
+ ) : (
+ <>
+
+
+
+
+
+ !isSubmittingHyperlink && setShowHyperlinkModal(false)}
+ centered
+ >
+
+ Add hyperlink
-
-
- {({ isSubmitting }) => (
-
-
- URL
-
-
-
- Title (Optional)
-
-
-
-
- )}
-
-
+
-
+
);
};
diff --git a/src/pages/Assignments/ViewSubmissions.tsx b/src/pages/Assignments/ViewSubmissions.tsx
index 311e4778..ff401171 100644
--- a/src/pages/Assignments/ViewSubmissions.tsx
+++ b/src/pages/Assignments/ViewSubmissions.tsx
@@ -1,81 +1,468 @@
-import React, { useMemo } from 'react';
-import { Button, Container, Row, Col } from 'react-bootstrap';
-import { useNavigate, useParams } from 'react-router-dom';
-import Table from "../../components/Table/Table";
+import { useEffect, useMemo, useState } from "react";
import { createColumnHelper } from "@tanstack/react-table";
+import { Alert, Button, Col, Container, Row, Spinner } from "react-bootstrap";
+import { useDispatch } from "react-redux";
+import { useLoaderData, useNavigate, useParams } from "react-router-dom";
+import Table from "components/Table/Table";
+import useAPI from "hooks/useAPI";
+import { alertActions } from "store/slices/alertSlice";
+import { IAssignmentResponse } from "utils/interfaces";
+import SubmittedContentService from "../../services/SubmittedContentService";
-interface ISubmission {
+export interface ISubmissionMember {
+ fullName: string;
+ github: string;
+ email: string;
+}
+
+export interface ISubmissionLink {
id: number;
+ url?: string;
+ displayName: string;
name: string;
+ size?: number | string;
+ type?: string;
+ modified?: string;
+ participantId?: string;
+ folder?: string;
+}
+
+export interface ISubmission {
+ id: number;
+ teamId: number;
+ teamName: string;
+ members: ISubmissionMember[];
+ links: ISubmissionLink[];
+ files: ISubmissionLink[];
+}
+
+interface ISubmissionMemberResponse {
+ full_name?: string;
+ github?: string;
+ email?: string;
+}
+
+interface ISubmissionAssetResponse {
+ id?: number;
+ url?: string;
+ display_name?: string;
+ name?: string;
+ size?: number | string;
+ type?: string;
+ modified?: string;
+ participant_id?: string;
+ folder?: string;
}
+interface ISubmissionResponse {
+ id?: number;
+ submission_id?: number;
+ team_id?: number;
+ team_name?: string;
+ participant_id?: string;
+ members?: ISubmissionMemberResponse[];
+ links?: ISubmissionAssetResponse[];
+ files?: ISubmissionAssetResponse[];
+}
+
+interface IViewSubmissionsResponse {
+ assignment_id?: number;
+ assignment_name?: string;
+ submissions?: ISubmissionResponse[];
+}
+
+type ViewSubmissionsLoaderData = Partial & {
+ due_dates?: Array<{ due_at?: string | Date }>;
+ date_time?: Record;
+};
+
const columnHelper = createColumnHelper();
+const EMPTY_MESSAGE = "No submissions are available for this assignment yet.";
+
+const buildGithubUrl = (github?: string) => {
+ if (!github) return "";
+ if (/^https?:\/\//i.test(github)) return github;
+ return `https://github.com/${github.replace(/^@/, "")}`;
+};
+
+const getGithubLabel = (github?: string, email?: string) => {
+ if (!github) return email || "Unknown member";
+
+ const cleanedGithub = github.replace(/^@/, "");
+ if (/^https?:\/\//i.test(cleanedGithub)) {
+ try {
+ const url = new URL(cleanedGithub);
+ return url.pathname.split("/").filter(Boolean).pop() || cleanedGithub;
+ } catch {
+ return cleanedGithub;
+ }
+ }
+
+ return cleanedGithub;
+};
+
+const formatModifiedValue = (value?: string) => {
+ if (!value) return "-";
+
+ const parsedDate = new Date(value);
+ if (Number.isNaN(parsedDate.getTime())) {
+ return value;
+ }
+
+ return parsedDate.toLocaleString();
+};
+
+const transformAsset = (
+ asset: ISubmissionAssetResponse,
+ index: number,
+ participantId?: string
+): ISubmissionLink => ({
+ id: asset.id ?? index + 1,
+ url: asset.url,
+ displayName: asset.display_name ?? asset.name ?? asset.url ?? `Artifact ${index + 1}`,
+ name: asset.name ?? asset.display_name ?? asset.url ?? `Artifact ${index + 1}`,
+ size: asset.size ?? "-",
+ type: asset.type ?? (asset.url ? "Link" : "File"),
+ modified: asset.modified ?? "",
+ participantId: asset.participant_id ?? participantId,
+ folder: asset.folder ?? "/",
+});
+
+export const transformResponse = (
+ response?: IViewSubmissionsResponse | null
+): ISubmission[] | null => {
+ if (!response || !Array.isArray(response.submissions)) {
+ return null;
+ }
+
+ return response.submissions.map((submission, index) => {
+ const submissionId = submission.id ?? submission.submission_id ?? index + 1;
+ const teamId = submission.team_id ?? submission.id ?? index + 1;
+ const participantId = submission.participant_id;
+
+ return {
+ id: submissionId,
+ teamId,
+ teamName: submission.team_name ?? `Team ${index + 1}`,
+ members: Array.isArray(submission.members)
+ ? submission.members.map((member) => ({
+ fullName: member.full_name ?? "",
+ github: member.github ?? "",
+ email: member.email ?? "",
+ }))
+ : [],
+ links: Array.isArray(submission.links)
+ ? submission.links.map((link, linkIndex) => transformAsset(link, linkIndex, participantId))
+ : [],
+ files: Array.isArray(submission.files)
+ ? submission.files.map((file, fileIndex) => transformAsset(file, fileIndex, participantId))
+ : [],
+ };
+ });
+};
+
+const getLatestDueDate = (assignment: ViewSubmissionsLoaderData) => {
+ const dueDateValues = Array.isArray(assignment?.due_dates)
+ ? assignment.due_dates
+ .map((dueDate) => dueDate?.due_at)
+ .filter((value): value is string | Date => Boolean(value))
+ : [];
+
+ if (dueDateValues.length > 0) {
+ const parsedDates = dueDateValues
+ .map((dueDate) => new Date(dueDate))
+ .filter((dueDate) => !Number.isNaN(dueDate.getTime()));
+
+ if (parsedDates.length > 0) {
+ return parsedDates.reduce((latest, current) =>
+ current.getTime() > latest.getTime() ? current : latest
+ );
+ }
+ }
-const ViewSubmissions: React.FC = () => {
- const { id } = useParams<{ id: string }>();
+ const dateTimeEntries = assignment?.date_time ? Object.values(assignment.date_time) : [];
+ const parsedDateTimeEntries = dateTimeEntries
+ .map((value) => new Date(value))
+ .filter((value) => !Number.isNaN(value.getTime()));
+
+ if (parsedDateTimeEntries.length === 0) {
+ return null;
+ }
+
+ return parsedDateTimeEntries.reduce((latest, current) =>
+ current.getTime() > latest.getTime() ? current : latest
+ );
+};
+
+const ViewSubmissions = () => {
+ const assignment = (useLoaderData?.() as ViewSubmissionsLoaderData) || {};
+ const { id: routeAssignmentId } = useParams<{ id: string }>();
+ const assignmentId = Number(assignment?.id ?? routeAssignmentId ?? 0);
const navigate = useNavigate();
+ const dispatch = useDispatch();
+ const { error, isLoading, data: submissionsResponse, sendRequest: fetchSubmissions } = useAPI();
- // Dummy data for submissions
- const submissions = useMemo(() => [
- { id: 1, name: 'Submission 1' },
- { id: 2, name: 'Submission 2' },
- // ...other submissions
- ], []);
-
- const columns = useMemo(() => [
- columnHelper.accessor('name', {
- header: () => 'Submission',
- cell: info => info.getValue()
- }),
- columnHelper.display({
- id: 'actions',
- header: () => 'Actions',
- cell: ({ row }) => (
-
- )
- })
- ], []);
-
- const handleActionClick = (submissionId: number) => {
- console.log(`Action clicked for submission ID ${submissionId}`);
- // Here goes the logic for handling the action
- };
-
- // const handleClose = () => {
- // navigate(-1); // Go back to the previous page
- // };
+ const [submissions, setSubmissions] = useState([]);
+ const [activeActionKey, setActiveActionKey] = useState(null);
+ const [openError, setOpenError] = useState(null);
- return (
-
-
-
-
-
-
- {/*
-
*/}
-
+ ),
+ }),
+ ],
+ [assignmentId, navigate, shouldShowAssignGrade, activeActionKey]
+ );
+
+ const showLoadingState = isLoading && submissions.length === 0 && !submissionsResponse?.data;
+ const showEmptyState = !showLoadingState && submissions.length === 0;
+
+ return (
+
+
+
+
+
+
+ {openError && (
+
+ setOpenError(null)}>
+ {openError}
+
+
+
+ )}
+
+ {showLoadingState ? (
+
+
+ ) : showEmptyState ? (
+
+
+ {EMPTY_MESSAGE}
+
+
+
+ ) : (
+
+
+
+ )}
+
+
);
};
diff --git a/src/pages/Assignments/__tests__/ViewSubmissions.test.tsx b/src/pages/Assignments/__tests__/ViewSubmissions.test.tsx
new file mode 100644
index 00000000..a0d1fbae
--- /dev/null
+++ b/src/pages/Assignments/__tests__/ViewSubmissions.test.tsx
@@ -0,0 +1,265 @@
+import "@testing-library/jest-dom";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Provider } from "react-redux";
+import { configureStore } from "@reduxjs/toolkit";
+import rootReducer from "store/rootReducer";
+import ViewSubmissions, { transformResponse } from "../ViewSubmissions";
+
+const sendRequestMock = vi.fn();
+const mockNavigate = vi.fn();
+
+let loaderData: any;
+let mockApiState: any;
+
+vi.mock("hooks/useAPI", () => ({
+ default: () => mockApiState,
+}));
+
+vi.mock("react-router-dom", async () => {
+ const actual = await vi.importActual("react-router-dom");
+
+ return {
+ ...actual,
+ useLoaderData: () => loaderData,
+ useNavigate: () => mockNavigate,
+ useParams: () => ({ id: String(loaderData?.id ?? 1) }),
+ };
+});
+
+const baseLoaderData = {
+ id: 1,
+ name: "Design Project",
+ due_dates: [{ due_at: "2099-03-20T17:00:00Z" }],
+};
+
+const apiPayload = {
+ assignment_id: 1,
+ assignment_name: "Design Project",
+ submissions: [
+ {
+ id: 901,
+ team_id: 301,
+ team_name: "Team Alpha",
+ members: [
+ {
+ full_name: "Alice Johnson",
+ github: "alice-johnson",
+ email: "alice@example.com",
+ },
+ {
+ full_name: "Bob Carter",
+ github: "https://github.com/bobcarter",
+ email: "bob@example.com",
+ },
+ ],
+ links: [
+ {
+ id: 1,
+ url: "https://github.com/team-alpha/project",
+ display_name: "Project repository",
+ modified: "2026-03-19T13:00:00Z",
+ },
+ ],
+ files: [
+ {
+ id: 2,
+ url: "https://example.com/files/design-doc.pdf",
+ name: "design-doc.pdf",
+ size: "128 KB",
+ type: "PDF",
+ modified: "2026-03-19T13:30:00Z",
+ },
+ ],
+ },
+ ],
+};
+
+const createStore = () =>
+ configureStore({
+ reducer: rootReducer,
+ });
+
+const renderComponent = () => {
+ const store = createStore();
+
+ return {
+ store,
+ ...render(
+
+
+ ),
+ };
+};
+
+describe("transformResponse", () => {
+ it("maps snake_case submission payloads to camelCase interfaces", () => {
+ const transformed = transformResponse(apiPayload);
+
+ expect(transformed).toEqual([
+ {
+ id: 901,
+ teamId: 301,
+ teamName: "Team Alpha",
+ members: [
+ {
+ fullName: "Alice Johnson",
+ github: "alice-johnson",
+ email: "alice@example.com",
+ },
+ {
+ fullName: "Bob Carter",
+ github: "https://github.com/bobcarter",
+ email: "bob@example.com",
+ },
+ ],
+ links: [
+ {
+ id: 1,
+ url: "https://github.com/team-alpha/project",
+ displayName: "Project repository",
+ name: "Project repository",
+ size: "-",
+ type: "Link",
+ modified: "2026-03-19T13:00:00Z",
+ },
+ ],
+ files: [
+ {
+ id: 2,
+ url: "https://example.com/files/design-doc.pdf",
+ displayName: "design-doc.pdf",
+ name: "design-doc.pdf",
+ size: "128 KB",
+ type: "PDF",
+ modified: "2026-03-19T13:30:00Z",
+ },
+ ],
+ },
+ ]);
+ });
+});
+
+describe("ViewSubmissions", () => {
+ beforeEach(() => {
+ loaderData = { ...baseLoaderData };
+ mockApiState = {
+ error: null,
+ isLoading: false,
+ data: { data: apiPayload },
+ sendRequest: sendRequestMock,
+ };
+ sendRequestMock.mockClear();
+ mockNavigate.mockClear();
+ });
+
+ it("renders team names, members, links, and available actions from API data", async () => {
+ renderComponent();
+
+ await waitFor(() => {
+ expect(sendRequestMock).toHaveBeenCalledWith({
+ url: "/submitted_content/1/view_submissions",
+ });
+ });
+
+ expect(screen.getByText("Team Alpha")).toBeInTheDocument();
+ expect(screen.getByRole("link", { name: "alice-johnson" })).toHaveAttribute(
+ "href",
+ "https://github.com/alice-johnson"
+ );
+ expect(screen.getByText("(Alice Johnson)")).toBeInTheDocument();
+ expect(screen.getByRole("link", { name: "Project repository" })).toHaveAttribute(
+ "href",
+ "https://github.com/team-alpha/project"
+ );
+ expect(screen.getByRole("link", { name: "design-doc.pdf" })).toHaveAttribute(
+ "href",
+ "https://example.com/files/design-doc.pdf"
+ );
+ expect(screen.getByRole("button", { name: /view history/i })).toBeDisabled();
+ expect(screen.getByRole("button", { name: /view reviews/i })).toBeInTheDocument();
+ });
+
+ it("shows a loading indicator while submissions are loading", () => {
+ mockApiState = {
+ error: null,
+ isLoading: true,
+ data: undefined,
+ sendRequest: sendRequestMock,
+ };
+
+ renderComponent();
+
+ expect(screen.getByText(/loading submissions/i)).toBeInTheDocument();
+ expect(screen.queryByText("Team Alpha")).not.toBeInTheDocument();
+ });
+
+ it("shows an empty state when the API returns an empty submissions list", async () => {
+ mockApiState = {
+ error: null,
+ isLoading: false,
+ data: {
+ data: {
+ assignment_id: 1,
+ assignment_name: "Design Project",
+ submissions: [],
+ },
+ },
+ sendRequest: sendRequestMock,
+ };
+
+ renderComponent();
+
+ expect(
+ await screen.findByText("No submissions are available for this assignment yet.")
+ ).toBeInTheDocument();
+ });
+
+ it("shows an empty state and dispatches an alert when the API fails", async () => {
+ mockApiState = {
+ error: "Backend unavailable",
+ isLoading: false,
+ data: undefined,
+ sendRequest: sendRequestMock,
+ };
+
+ const { store } = renderComponent();
+
+ expect(
+ await screen.findByText("No submissions are available for this assignment yet.")
+ ).toBeInTheDocument();
+ await waitFor(() => {
+ expect(store.getState().alert).toMatchObject({
+ show: true,
+ variant: "danger",
+ message: "Backend unavailable",
+ });
+ });
+ });
+
+ it("navigates to the review page from row actions", async () => {
+ const user = userEvent.setup();
+
+ renderComponent();
+
+ await user.click(await screen.findByRole("button", { name: /view reviews/i }));
+ expect(mockNavigate).toHaveBeenCalledWith("/assignments/1/review?team_id=301");
+ expect(screen.getByRole("button", { name: /view history/i })).toBeDisabled();
+ });
+
+ it("switches the primary action to assign grade after the due date passes", async () => {
+ const user = userEvent.setup();
+ loaderData = {
+ ...baseLoaderData,
+ due_dates: [{ due_at: "2020-03-20T17:00:00Z" }],
+ };
+
+ renderComponent();
+
+ const assignGradeButton = await screen.findByRole("button", { name: /assign grade/i });
+ await user.click(assignGradeButton);
+
+ expect(mockNavigate).toHaveBeenCalledWith("/assignments/1/assign-grades?team_id=301");
+ });
+});
diff --git a/src/services/SubmittedContentService.ts b/src/services/SubmittedContentService.ts
index 1bee018c..1437457f 100644
--- a/src/services/SubmittedContentService.ts
+++ b/src/services/SubmittedContentService.ts
@@ -1,228 +1,258 @@
-import axios from 'axios';
-
-/**
- * SubmittedContentService
- * Handles all API calls related to submitted content (files and hyperlinks)
- * @author Team CSC517
- */
-
-interface IListFilesResponse {
- files?: Array<{
- name: string;
- path: string;
- type: 'file' | 'directory';
- }>;
+import { AxiosResponse } from "axios";
+import axiosClient from "../utils/axios_client";
+
+interface IParticipantResponse {
+ id?: number;
+ user_id?: number;
+ user?: {
+ id?: number;
+ };
+ team_id?: number;
+ team?: {
+ id?: number;
+ };
+}
+
+export interface IListedFile {
+ name: string;
+ size?: number;
+ type?: string;
+ modified_at?: string;
+}
+
+export interface IListedFolder {
+ name: string;
+ modified_at?: string;
+}
+
+export interface IListFilesResponse {
+ current_folder?: string;
+ files?: IListedFile[];
+ folders?: IListedFolder[];
hyperlinks?: string[];
error?: string;
}
+interface ISubmissionAssetResponse {
+ display_name?: string;
+ name?: string;
+ size?: number | string;
+ type?: string;
+ modified?: string;
+ url?: string;
+}
+
+interface ITeamSubmissionResponse {
+ team_id?: number;
+ links?: ISubmissionAssetResponse[];
+ files?: ISubmissionAssetResponse[];
+}
+
+interface IViewSubmissionsResponse {
+ submissions?: ITeamSubmissionResponse[];
+}
+
+export interface IParticipantContext {
+ participantId: string;
+ teamId: number | null;
+}
+
interface IValidationResult {
valid: boolean;
error?: string;
}
class SubmittedContentService {
- /**
- * Submit a file for an assignment
- * @param formData FormData containing file and metadata
- * @param participantId The participant ID
- * @param currentFolder Current folder path
- * @returns Response data
- */
+ private static normalizeFolder(currentFolder = "/") {
+ const trimmedFolder = currentFolder.trim();
+
+ if (!trimmedFolder || trimmedFolder === "/") {
+ return "/";
+ }
+
+ const cleanedFolder = trimmedFolder.replace(/\/{2,}/g, "/").replace(/\/$/, "");
+ return cleanedFolder.startsWith("/") ? cleanedFolder : `/${cleanedFolder}`;
+ }
+
+ static async findParticipantContext(
+ assignmentId: number,
+ userId: number
+ ): Promise {
+ const response = await axiosClient.get(`/participants/assignment/${assignmentId}`);
+ const participants = Array.isArray(response.data) ? response.data : [];
+ const matchingParticipant = participants.find((participant: IParticipantResponse) => {
+ const participantUserId = participant.user_id ?? participant.user?.id;
+ return Number(participantUserId) === Number(userId);
+ });
+
+ if (!matchingParticipant?.id) {
+ throw new Error("No participant record was found for the current user on this assignment.");
+ }
+
+ return {
+ participantId: String(matchingParticipant.id),
+ teamId: matchingParticipant.team_id ?? matchingParticipant.team?.id ?? null,
+ };
+ }
+
+ static async findParticipantId(assignmentId: number, userId: number): Promise {
+ const participantContext = await this.findParticipantContext(assignmentId, userId);
+ return participantContext.participantId;
+ }
+
static async submitFile(
- formData: FormData,
participantId: string,
- currentFolder: string
+ file: File,
+ currentFolder = "/"
): Promise {
- try {
- const response = await axios.post(
- '/submitted_content/submit_file',
- formData,
- {
- headers: {
- 'Content-Type': 'multipart/form-data',
- },
- }
- );
- return response.data;
- } catch (error: any) {
- throw error.response?.data || error;
- }
+ const formData = new FormData();
+ formData.append("id", participantId);
+ formData.append("uploaded_file", file);
+ formData.append("current_folder[name]", this.normalizeFolder(currentFolder));
+
+ const response = await axiosClient.post("/submitted_content/submit_file", formData);
+
+ return response.data;
}
- /**
- * Submit a hyperlink for an assignment
- * @param url The hyperlink URL
- * @param participantId The participant ID
- * @returns Response data
- */
static async submitHyperlink(url: string, participantId: string): Promise {
- try {
- const response = await axios.post('/submitted_content/submit_hyperlink', {
- id: participantId,
- submission: url,
- });
- return response.data;
- } catch (error: any) {
- throw error.response?.data || error;
- }
+ const response = await axiosClient.post("/submitted_content/submit_hyperlink", {
+ id: participantId,
+ submit_link: url,
+ });
+
+ return response.data;
}
- /**
- * Remove a submitted hyperlink
- * @param participantId The participant ID
- * @param index Index of hyperlink to remove
- * @returns Response data
- */
static async removeHyperlink(participantId: string, index: number): Promise {
- try {
- const response = await axios.post('/submitted_content/remove_hyperlink', {
+ const response = await axiosClient.delete("/submitted_content/remove_hyperlink", {
+ data: {
id: participantId,
chk_links: index,
- });
- return response.data;
- } catch (error: any) {
- throw error.response?.data || error;
- }
+ },
+ });
+
+ return response.data;
}
- /**
- * List all submitted files and hyperlinks
- * @param participantId The participant ID
- * @param currentFolder Current folder path
- * @returns Files and hyperlinks list
- */
static async listFiles(
participantId: string,
- currentFolder: string
+ currentFolder = "/"
): Promise {
- try {
- const response = await axios.get('/submitted_content/list_files', {
- params: {
- id: participantId,
- folder: { name: currentFolder },
- },
- });
- return response.data;
- } catch (error: any) {
- throw error.response?.data || error;
- }
+ const response = await axiosClient.get("/submitted_content/list_files", {
+ params: {
+ id: participantId,
+ folder: { name: this.normalizeFolder(currentFolder) },
+ },
+ });
+
+ return response.data;
}
- /**
- * Perform folder action (create, delete, etc.)
- * @param action The action to perform
- * @param participantId The participant ID
- * @param currentFolder Current folder path
- * @returns Response data
- */
- static async folderAction(
- action: any,
- participantId: string,
- currentFolder: string
- ): Promise {
- try {
- const response = await axios.post('/submitted_content/folder_action', {
- id: participantId,
- current_folder: { name: currentFolder },
- faction: action,
- });
- return response.data;
- } catch (error: any) {
- throw error.response?.data || error;
+ static async getTeamSubmissionSummary(
+ assignmentId: number,
+ teamId: number
+ ): Promise {
+ const response = await axiosClient.get(`/submitted_content/${assignmentId}/view_submissions`);
+ const submissions = (response.data as IViewSubmissionsResponse)?.submissions ?? [];
+ const matchingTeam = submissions.find(
+ (submission) => Number(submission.team_id) === Number(teamId)
+ );
+
+ if (!matchingTeam) {
+ return {
+ current_folder: "/",
+ files: [],
+ folders: [],
+ hyperlinks: [],
+ };
}
+
+ const files = (matchingTeam.files ?? []).map((file) => ({
+ name: file.display_name ?? file.name ?? "Unnamed file",
+ size: typeof file.size === "number" ? file.size : undefined,
+ type: file.type ?? "File",
+ modified_at: file.modified,
+ }));
+
+ const hyperlinks = (matchingTeam.links ?? [])
+ .map((link) => link.url ?? link.name ?? link.display_name)
+ .filter((link): link is string => Boolean(link));
+
+ return {
+ current_folder: "/",
+ files,
+ folders: [],
+ hyperlinks,
+ };
}
- /**
- * Delete a submitted file
- * @param fileName Name of file to delete
- * @param participantId The participant ID
- * @param currentFolder Current folder path
- * @returns Response data
- */
static async deleteFile(
fileName: string,
participantId: string,
- currentFolder: string
+ currentFolder = "/"
): Promise {
- return this.folderAction({ delete: fileName }, participantId, currentFolder);
+ const response = await axiosClient.post("/submitted_content/folder_action", {
+ id: participantId,
+ current_folder: { name: this.normalizeFolder(currentFolder) },
+ faction: { delete: fileName },
+ });
+
+ return response.data;
}
- /**
- * Download a submitted file
- * @param fileName Name of file to download
- * @param participantId The participant ID
- * @param currentFolder Current folder path
- * @returns Blob data
- */
static async downloadFile(
fileName: string,
participantId: string,
- currentFolder: string
- ): Promise {
- try {
- const response = await axios.get('/submitted_content/download', {
- params: {
- id: participantId,
- current_folder: { name: currentFolder },
- download: fileName,
- },
- responseType: 'blob',
- });
- return response.data;
- } catch (error: any) {
- throw error.response?.data || error;
- }
+ currentFolder = "/"
+ ): Promise> {
+ return axiosClient.get("/submitted_content/download", {
+ params: {
+ id: participantId,
+ current_folder: { name: this.normalizeFolder(currentFolder) },
+ download: fileName,
+ },
+ responseType: "blob",
+ });
}
- /**
- * Validate a file for upload
- * @param file The file to validate
- * @returns Validation result
- */
static validateFile(file: File): IValidationResult {
- // Check file size (5MB max)
const maxSize = 5 * 1024 * 1024;
if (file.size > maxSize) {
return {
valid: false,
- error: `File size must be less than 5MB (${(file.size / 1024 / 1024).toFixed(2)}MB)`,
+ error: `File size must be less than 5MB (${(file.size / 1024 / 1024).toFixed(2)}MB).`,
};
}
- // Check file extension
const allowedExtensions = [
- 'pdf',
- 'png',
- 'jpeg',
- 'jpg',
- 'zip',
- 'tar',
- 'gz',
- '7z',
- 'odt',
- 'docx',
- 'md',
- 'rb',
- 'mp4',
- 'txt',
+ "pdf",
+ "png",
+ "jpeg",
+ "jpg",
+ "zip",
+ "tar",
+ "gz",
+ "7z",
+ "odt",
+ "docx",
+ "md",
+ "rb",
+ "mp4",
+ "txt",
];
- const extension = file.name.split('.').pop()?.toLowerCase();
+
+ const extension = file.name.split(".").pop()?.toLowerCase();
if (!extension || !allowedExtensions.includes(extension)) {
return {
valid: false,
- error: `File type not allowed. Allowed types: ${allowedExtensions.join(', ')}`,
+ error: `File type not allowed. Allowed types: ${allowedExtensions.join(", ")}.`,
};
}
return { valid: true };
}
- /**
- * Validate a URL for hyperlink submission
- * @param url The URL to validate
- * @returns Validation result
- */
static validateUrl(url: string): IValidationResult {
try {
new URL(url);
@@ -230,67 +260,19 @@ class SubmittedContentService {
} catch {
return {
valid: false,
- error: 'Invalid URL format. Please enter a valid URL (e.g., https://example.com)',
+ error: "Invalid URL format. Please enter a valid URL such as https://example.com.",
};
}
}
- /**
- * Get file size in human readable format
- * @param bytes File size in bytes
- * @returns Formatted file size string
- */
static formatFileSize(bytes: number): string {
- if (bytes === 0) return '0 Bytes';
- const k = 1024;
- const sizes = ['Bytes', 'KB', 'MB', 'GB'];
- const i = Math.floor(Math.log(bytes) / Math.log(k));
- return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
- }
-
- /**
- * Check if file type is document
- * @param fileName The file name
- * @returns True if file is a document
- */
- static isDocument(fileName: string): boolean {
- const documentExtensions = ['pdf', 'odt', 'docx', 'md', 'txt'];
- const extension = fileName.split('.').pop()?.toLowerCase();
- return extension ? documentExtensions.includes(extension) : false;
- }
-
- /**
- * Check if file type is media
- * @param fileName The file name
- * @returns True if file is media
- */
- static isMedia(fileName: string): boolean {
- const mediaExtensions = ['png', 'jpeg', 'jpg', 'mp4'];
- const extension = fileName.split('.').pop()?.toLowerCase();
- return extension ? mediaExtensions.includes(extension) : false;
- }
+ if (!bytes) return "-";
- /**
- * Check if file type is archive
- * @param fileName The file name
- * @returns True if file is an archive
- */
- static isArchive(fileName: string): boolean {
- const archiveExtensions = ['zip', 'tar', 'gz', '7z'];
- const extension = fileName.split('.').pop()?.toLowerCase();
- return extension ? archiveExtensions.includes(extension) : false;
- }
+ const unit = 1024;
+ const sizes = ["Bytes", "KB", "MB", "GB"];
+ const sizeIndex = Math.floor(Math.log(bytes) / Math.log(unit));
- /**
- * Get icon for file type
- * @param fileName The file name
- * @returns Icon emoji string
- */
- static getFileIcon(fileName: string): string {
- if (this.isDocument(fileName)) return '📄';
- if (this.isMedia(fileName)) return '🎬';
- if (this.isArchive(fileName)) return '📦';
- return '📁';
+ return `${Math.round((bytes / unit ** sizeIndex) * 100) / 100} ${sizes[sizeIndex]}`;
}
}
diff --git a/src/services/__tests__/SubmittedContentService.test.ts b/src/services/__tests__/SubmittedContentService.test.ts
index d87453cb..2d89fe05 100644
--- a/src/services/__tests__/SubmittedContentService.test.ts
+++ b/src/services/__tests__/SubmittedContentService.test.ts
@@ -1,45 +1,85 @@
-import axios from 'axios';
import SubmittedContentService from '../SubmittedContentService';
+import axiosClient from '../../utils/axios_client';
import type { Mocked } from 'vitest';
-vi.mock('axios');
-const mockedAxios = axios as Mocked;
+// Mock the axiosClient instance used by the service (not raw axios,
+// which is never called directly – the service always goes through axiosClient).
+vi.mock('../../utils/axios_client', () => ({
+ default: {
+ get: vi.fn(),
+ post: vi.fn(),
+ delete: vi.fn(),
+ },
+}));
+
+const mockedAxios = axiosClient as Mocked;
describe('SubmittedContentService', () => {
beforeEach(() => {
vi.clearAllMocks();
});
- test('submitFile should call correct endpoint', async () => {
+ // ---------------------------------------------------------------------------
+ // submitFile
+ // ---------------------------------------------------------------------------
+
+ test('submitFile should call correct endpoint with participantId and file', async () => {
const mockResponse = { data: { message: 'File uploaded' } };
mockedAxios.post.mockResolvedValueOnce(mockResponse);
- const formData = new FormData();
- formData.append('file', new File(['test'], 'test.pdf'));
+ const participantId = '123';
+ const file = new File(['test'], 'test.pdf', { type: 'application/pdf' });
- const result = await SubmittedContentService.submitFile(formData, '123', '/');
+ const result = await SubmittedContentService.submitFile(participantId, file);
- expect(mockedAxios.post).toHaveBeenCalledWith(
- '/submitted_content/submit_file',
- formData,
- expect.any(Object)
- );
+ expect(mockedAxios.post).toHaveBeenCalledTimes(1);
+ const [url, formData] = (mockedAxios.post as ReturnType).mock.calls[0];
+ expect(url).toBe('/submitted_content/submit_file');
+ expect(formData).toBeInstanceOf(FormData);
+ expect(formData.get('id')).toBe(participantId);
+ expect(formData.get('uploaded_file')).toBe(file);
+ // default currentFolder normalises to "/"
+ expect(formData.get('current_folder[name]')).toBe('/');
expect(result).toEqual(mockResponse.data);
});
- test('submitFile should handle FormData correctly', async () => {
+ test('submitFile should forward an explicit subfolder via normalizeFolder', async () => {
mockedAxios.post.mockResolvedValueOnce({ data: { message: 'Success' } });
- const file = new File(['test content'], 'test.pdf', { type: 'application/pdf' });
- const formData = new FormData();
- formData.append('id', '123');
- formData.append('uploaded_file', file);
+ const participantId = '123';
+ const file = new File(['test content'], 'notes.txt', { type: 'text/plain' });
+
+ await SubmittedContentService.submitFile(participantId, file, '/week1/');
+
+ const [, formData] = (mockedAxios.post as ReturnType).mock.calls[0];
+ // normalizeFolder strips trailing slash
+ expect(formData.get('current_folder[name]')).toBe('/week1');
+ });
+
+ test('submitFile should prepend leading slash when folder lacks one', async () => {
+ mockedAxios.post.mockResolvedValueOnce({ data: {} });
+
+ const file = new File(['data'], 'data.zip', { type: 'application/zip' });
+ await SubmittedContentService.submitFile('456', file, 'week2/sub');
+
+ const [, formData] = (mockedAxios.post as ReturnType).mock.calls[0];
+ expect(formData.get('current_folder[name]')).toBe('/week2/sub');
+ });
+
+ test('submitFile should treat empty string folder the same as "/"', async () => {
+ mockedAxios.post.mockResolvedValueOnce({ data: {} });
- await SubmittedContentService.submitFile(formData, '123', '/');
+ const file = new File(['x'], 'readme.md', { type: 'text/markdown' });
+ await SubmittedContentService.submitFile('789', file, '');
- expect(mockedAxios.post).toHaveBeenCalled();
+ const [, formData] = (mockedAxios.post as ReturnType).mock.calls[0];
+ expect(formData.get('current_folder[name]')).toBe('/');
});
+ // ---------------------------------------------------------------------------
+ // submitHyperlink
+ // ---------------------------------------------------------------------------
+
test('submitHyperlink should call correct endpoint', async () => {
const mockResponse = { data: { message: 'Hyperlink submitted' } };
mockedAxios.post.mockResolvedValueOnce(mockResponse);
@@ -50,28 +90,38 @@ describe('SubmittedContentService', () => {
'/submitted_content/submit_hyperlink',
expect.objectContaining({
id: '123',
- submission: 'https://example.com',
+ submit_link: 'https://example.com',
})
);
expect(result).toEqual(mockResponse.data);
});
- test('removeHyperlink should call correct endpoint', async () => {
+ // ---------------------------------------------------------------------------
+ // removeHyperlink
+ // ---------------------------------------------------------------------------
+
+ test('removeHyperlink should call correct endpoint via DELETE', async () => {
const mockResponse = { data: { message: 'Hyperlink removed' } };
- mockedAxios.post.mockResolvedValueOnce(mockResponse);
+ mockedAxios.delete.mockResolvedValueOnce(mockResponse);
const result = await SubmittedContentService.removeHyperlink('123', 0);
- expect(mockedAxios.post).toHaveBeenCalledWith(
+ expect(mockedAxios.delete).toHaveBeenCalledWith(
'/submitted_content/remove_hyperlink',
expect.objectContaining({
- id: '123',
- chk_links: 0,
+ data: expect.objectContaining({
+ id: '123',
+ chk_links: 0,
+ }),
})
);
expect(result).toEqual(mockResponse.data);
});
+ // ---------------------------------------------------------------------------
+ // listFiles
+ // ---------------------------------------------------------------------------
+
test('listFiles should call correct endpoint', async () => {
const mockResponse = { data: { files: [], hyperlinks: [] } };
mockedAxios.get.mockResolvedValueOnce(mockResponse);
@@ -85,11 +135,15 @@ describe('SubmittedContentService', () => {
expect(result).toEqual(mockResponse.data);
});
+ // ---------------------------------------------------------------------------
+ // downloadFile
+ // ---------------------------------------------------------------------------
+
test('downloadFile should set responseType to blob', async () => {
const mockBlob = new Blob(['test'], { type: 'application/pdf' });
mockedAxios.get.mockResolvedValueOnce({ data: mockBlob });
- const result = await SubmittedContentService.downloadFile('test.pdf', '123', '/');
+ await SubmittedContentService.downloadFile('test.pdf', '123', '/');
expect(mockedAxios.get).toHaveBeenCalledWith(
'/submitted_content/download',
@@ -99,6 +153,10 @@ describe('SubmittedContentService', () => {
);
});
+ // ---------------------------------------------------------------------------
+ // deleteFile
+ // ---------------------------------------------------------------------------
+
test('deleteFile should call correct endpoint', async () => {
const mockResponse = { data: { message: 'File deleted' } };
mockedAxios.post.mockResolvedValueOnce(mockResponse);
@@ -115,38 +173,48 @@ describe('SubmittedContentService', () => {
expect(result).toEqual(mockResponse.data);
});
- test('validateFile should check size', () => {
- const largeFile = new File(
- [new ArrayBuffer(6 * 1024 * 1024)],
- 'large.pdf'
- );
+ // ---------------------------------------------------------------------------
+ // validateFile
+ // ---------------------------------------------------------------------------
+
+ test('validateFile should reject files over 5 MB', () => {
+ const largeFile = new File([new ArrayBuffer(6 * 1024 * 1024)], 'large.pdf');
const result = SubmittedContentService.validateFile(largeFile);
expect(result.valid).toBe(false);
+ expect(result.error).toMatch(/5MB/i);
});
- test('validateFile should check extension', () => {
+ test('validateFile should reject disallowed extensions', () => {
const invalidFile = new File(['test'], 'test.exe');
const result = SubmittedContentService.validateFile(invalidFile);
expect(result.valid).toBe(false);
});
- test('validateFile should accept valid file', () => {
- const validFile = new File(['test'], 'test.pdf');
+ test('validateFile should accept a valid PDF under 5 MB', () => {
+ const validFile = new File(['test'], 'test.pdf', { type: 'application/pdf' });
const result = SubmittedContentService.validateFile(validFile);
expect(result.valid).toBe(true);
});
- test('validateUrl should accept valid URL', () => {
- const result = SubmittedContentService.validateUrl('https://example.com');
- expect(result.valid).toBe(true);
+ // ---------------------------------------------------------------------------
+ // validateUrl
+ // ---------------------------------------------------------------------------
+
+ test('validateUrl should accept a valid URL', () => {
+ expect(SubmittedContentService.validateUrl('https://example.com').valid).toBe(true);
});
- test('validateUrl should reject invalid URL', () => {
+ test('validateUrl should reject an invalid URL', () => {
const result = SubmittedContentService.validateUrl('not a url');
expect(result.valid).toBe(false);
+ expect(result.error).toBeTruthy();
});
- test('should handle API errors gracefully', async () => {
+ // ---------------------------------------------------------------------------
+ // Error handling
+ // ---------------------------------------------------------------------------
+
+ test('should propagate API errors', async () => {
const error = new Error('Network error');
mockedAxios.post.mockRejectedValueOnce(error);
@@ -155,7 +223,7 @@ describe('SubmittedContentService', () => {
).rejects.toThrow('Network error');
});
- test('should handle response with error field', async () => {
+ test('should return response with error field from listFiles', async () => {
mockedAxios.get.mockResolvedValueOnce({
data: { error: 'File not found' },
});
@@ -163,4 +231,4 @@ describe('SubmittedContentService', () => {
const result = await SubmittedContentService.listFiles('123', '/');
expect(result).toEqual({ error: 'File not found' });
});
-});
+});
\ No newline at end of file
diff --git a/src/utils/axios_client.ts b/src/utils/axios_client.ts
index 77a4ba16..7d0bc423 100644
--- a/src/utils/axios_client.ts
+++ b/src/utils/axios_client.ts
@@ -16,6 +16,13 @@ const axiosClient = axios.create({
axiosClient.interceptors.request.use((config) => {
const token = getAuthToken();
+ const isMultipartRequest =
+ typeof FormData !== "undefined" && config.data instanceof FormData;
+
+ if (isMultipartRequest && config.headers) {
+ delete config.headers["Content-Type"];
+ }
+
if (token && token !== "EXPIRED") {
config.headers["Authorization"] = `Bearer ${token}`;
return config;
+ Student Workspace
+
+ {assignment.name} - View Submissions
++ {assignment?.name + ? `Review, submit, and manage your team artifacts for ${assignment.name}.` + : "Review, submit, and manage your team artifacts for this assignment."} +
++ You are not set up for submissions on this assignment. +
++ {error || + "No participant record was found for the current user on this assignment."} +
+
+
+
+
+ Submit work
++ Upload files or add links for the current assignment without leaving this page. +
+{actionHelperMessage}
+
+
+
+
+
+
+
+
-
-
- )}
-
- {/* Hyperlinks Section */}
- {hyperlinks.length > 0 && (
-
-
+
+ )}
+
+
+
+
- {file.name}
-
-
- {SubmittedContentService.formatFileSize(file.size)} • {new Date(file.uploadedAt).toLocaleString()}
-
+ Artifacts
++ Open, download, or remove the artifacts submitted by your team. +
+
- ))}
-
-
-
- 🔗 Submitted Hyperlinks
-
- {hyperlinks.map((hyperlink) => (
- setFileModal({ ...fileModal, show: false })}>
-
- Upload File
-
-
-
- {({ isSubmitting, setFieldValue }) => (
-
-
- Select File
- {
- const files = (event.target as HTMLInputElement).files;
- setFieldValue('file', files);
- }}
- disabled={isSubmitting}
- />
-
-
-
-
- )}
-
-
-
- {/* Hyperlink Modal */}
- setHyperlinkModal({ ...hyperlinkModal, show: false })}>
-
- Add Hyperlink
+ {hyperlinks.length === 0 ? (
+
+ No hyperlinks have been submitted for this folder yet.
+
+ ) : (
+
+
+
-
+ setCurrentFolder("/")}
>
-
+ {pathSegments.map((segment) => (
+ setCurrentFolder(segment.path)}
+ >
+ {segment.label}
+
+ ))}
+
+
+ {isUsingSubmissionSummary && (
+
+ Showing your team's submissions from the assignment submission feed.
+ Uploads and removals still use the live team submission workspace, so file
+ deletion is only available when the visible file still exists there.
+
+ )}
+
+ {showLoadingState ? (
+
+ {EMPTY_MESSAGE}
+
+ ) : (
+
+
+
-
- {hyperlink.title}
-
-
+
+
- Submitted: {new Date(hyperlink.submittedAt).toLocaleString()}
+
-
+ Current folder: {currentFolderLabel}
+
+ ) : (
+ <>
+ {folders.length === 0 && files.length === 0 ? (
+
+
+
+
+
+ )}
+
+ )}
+ | Name | +Type | +Size | +Modified | +Actions | +
|---|---|---|---|---|
|
+ |
+ Folder | +- | +{formatTimestamp(folder.modified_at)} | +
+
+
+
+
+ |
+
| {file.name} | +{file.type?.toUpperCase() || "File"} | +{SubmittedContentService.formatFileSize(file.size || 0)} | +{formatTimestamp(file.modified_at)} | +
+
+
+
+
+
+ |
+
+
-
-
- )}
-
- {/* File Upload Modal */}
-
+
- ))}
- Hyperlinks
++ Submitted URLs are shown separately so you can open them directly or remove them. +
+
+
+
+
+ )}
+ | Hyperlink | +Actions | +
|---|---|
| + + {hyperlink} + + | +
+
+
+
+
+ |
+
- This is a placeholder page and is still in progress.
-
- View Submissions
- --
View Submissions
+ {assignment?.name &&{assignment.name}
} + ++