From 853bd07b78cf9e65c8cbd8343c8685856bae96b7 Mon Sep 17 00:00:00 2001
From: Ryan Tanenholz <44756861+RockCrafts@users.noreply.github.com>
Date: Sun, 13 Oct 2024 03:20:19 -0400
Subject: [PATCH] Refactored Queue Forms to make consistent with other forms
 and between each other

---
 .../CreateQueue/CreateQueue.tsx               | 334 ------------
 .../InstructorQueuePage.tsx                   |   4 +-
 .../InstructorQueuePage/QuestionCard.tsx      |  24 +-
 .../InstructorQueuePage/QuestionTimer.tsx     |  16 +-
 .../QueueCreate/QueueCreate.tsx               |  99 ++++
 .../InstructorQueuePage/QueueFormFields.tsx   | 412 ++++++++++++++
 .../QueueSettings/QueueForm.tsx               | 501 ------------------
 .../QueueSettings/QueueSettings.tsx           |   4 +-
 .../QueueSettings/QueueSettingsForm.tsx       | 142 +++++
 .../InstructorQueuePage/timeupsound.mp3       | Bin 0 -> 21150 bytes
 10 files changed, 683 insertions(+), 853 deletions(-)
 delete mode 100644 frontend/components/Course/InstructorQueuePage/CreateQueue/CreateQueue.tsx
 create mode 100644 frontend/components/Course/InstructorQueuePage/QueueCreate/QueueCreate.tsx
 create mode 100644 frontend/components/Course/InstructorQueuePage/QueueFormFields.tsx
 delete mode 100644 frontend/components/Course/InstructorQueuePage/QueueSettings/QueueForm.tsx
 create mode 100644 frontend/components/Course/InstructorQueuePage/QueueSettings/QueueSettingsForm.tsx
 create mode 100644 frontend/components/Course/InstructorQueuePage/timeupsound.mp3

diff --git a/frontend/components/Course/InstructorQueuePage/CreateQueue/CreateQueue.tsx b/frontend/components/Course/InstructorQueuePage/CreateQueue/CreateQueue.tsx
deleted file mode 100644
index 436d19219..000000000
--- a/frontend/components/Course/InstructorQueuePage/CreateQueue/CreateQueue.tsx
+++ /dev/null
@@ -1,334 +0,0 @@
-import { useState, useMemo } from "react";
-import { Grid, Segment, Header, Form, Button } from "semantic-ui-react";
-import { mutateResourceListFunction } from "@pennlabs/rest-hooks/dist/types";
-import Snackbar from "@material-ui/core/Snackbar";
-import Alert from "@material-ui/lab/Alert";
-import { createQueue } from "../../../../hooks/data-fetching/course";
-import { Queue, VideoChatSetting } from "../../../../types";
-
-interface CreateQueueProps {
-    courseId: number;
-    backFunc: () => void;
-    successFunc: () => void;
-    mutate: mutateResourceListFunction<Queue>;
-}
-
-interface QueueFormInput {
-    name: string;
-    description: string;
-    questionTemplate: string;
-    videoChatSetting: VideoChatSetting;
-    pinEnabled: boolean;
-    rateLimitEnabled: boolean;
-    rateLimitLength?: number;
-    rateLimitQuestions?: number;
-    rateLimitMinutes?: number;
-}
-
-enum RateLimitFields {
-    RATE_LIMIT_QUESTIONS = "rateLimitQuestions",
-    RATE_LIMIT_MINUTES = "rateLimitMinutes",
-    RATE_LIMIT_LENGTH = "rateLimitLength",
-}
-
-const castInt = (n: string): number | undefined => {
-    let casted: number | undefined = parseInt(n, 10);
-    if (isNaN(casted)) {
-        casted = undefined;
-    }
-
-    return casted;
-};
-
-const CreateQueue = (props: CreateQueueProps) => {
-    const { courseId, backFunc, successFunc, mutate } = props;
-    /* STATE */
-    const [error, setError] = useState(false);
-    const [input, setInput] = useState<QueueFormInput>({
-        name: "",
-        description: "",
-        questionTemplate: "",
-        videoChatSetting: VideoChatSetting.DISABLED,
-        pinEnabled: false,
-        rateLimitEnabled: false,
-        rateLimitLength: undefined,
-        rateLimitQuestions: undefined,
-        rateLimitMinutes: undefined,
-    });
-
-    const handleVideoChatInputChange = (e, { name }) => {
-        switch (name) {
-            case "videoChatRequired":
-                input.videoChatSetting = VideoChatSetting.REQUIRED;
-                break;
-            case "videoChatOptional":
-                input.videoChatSetting = VideoChatSetting.OPTIONAL;
-                break;
-            case "videoChatDisabled":
-                input.videoChatSetting = VideoChatSetting.DISABLED;
-                break;
-        }
-        setInput({ ...input });
-    };
-
-    const handlePinInputChange = (e, { name }) => {
-        switch (name) {
-            case "pinEnabled":
-                input.pinEnabled = true;
-                break;
-            case "pinDisabled":
-                input.pinEnabled = false;
-                break;
-        }
-        setInput({ ...input });
-    };
-
-    const isDisabled = useMemo(() => {
-        let invalidInps = !input.name || !input.description;
-        if (input.rateLimitEnabled) {
-            invalidInps =
-                invalidInps ||
-                input.rateLimitLength === undefined ||
-                (input.rateLimitLength !== undefined &&
-                    input.rateLimitLength < 0);
-            invalidInps =
-                invalidInps ||
-                input.rateLimitQuestions === undefined ||
-                (input.rateLimitQuestions !== undefined &&
-                    input.rateLimitQuestions <= 0);
-            invalidInps =
-                invalidInps ||
-                input.rateLimitMinutes === undefined ||
-                (input.rateLimitMinutes !== undefined &&
-                    input.rateLimitMinutes <= 0);
-        }
-        return invalidInps;
-    }, [input]);
-
-    const [validQuestionRate, setValidQuestionRate] = useState(true);
-    const [validMinsRate, setValidMinsRate] = useState(true);
-    const [validLenRate, setValidLenRate] = useState(true);
-    const [mutateLoading, setRefetchLoading] = useState(false);
-
-    /* HANDLER FUNCTIONS */
-    const handleInputChange = (e, { name, value }) => {
-        input[name] = value;
-        if (name === RateLimitFields.RATE_LIMIT_QUESTIONS) {
-            input[name] = castInt(input[name]);
-            setValidQuestionRate(input[name] > 0);
-        }
-
-        if (name === RateLimitFields.RATE_LIMIT_MINUTES) {
-            input[name] = castInt(input[name]);
-            setValidMinsRate(input[name] > 0);
-        }
-
-        if (name === RateLimitFields.RATE_LIMIT_LENGTH) {
-            input[name] = castInt(input[name]);
-            setValidLenRate(input[name] >= 0);
-        }
-        setInput({ ...input });
-    };
-
-    const onSubmit = async () => {
-        try {
-            await createQueue(courseId, input);
-            setRefetchLoading(true);
-            await mutate(-1, null);
-            setRefetchLoading(false);
-            backFunc();
-            successFunc();
-        } catch (e) {
-            setError(true);
-        }
-    };
-
-    return (
-        <Grid.Column width={16}>
-            <Grid.Row>
-                <Segment basic>
-                    <Header as="h3">Create New Queue</Header>
-                </Segment>
-            </Grid.Row>
-            <Grid.Row>
-                <Segment basic>
-                    <Form>
-                        <Form.Field required>
-                            <label htmlFor="form-name">Name</label>
-                            <Form.Input
-                                id="form-name"
-                                placeholder="Name"
-                                name="name"
-                                disabled={mutateLoading}
-                                onChange={handleInputChange}
-                            />
-                        </Form.Field>
-                        <Form.Field required>
-                            <label htmlFor="form-desc">Description</label>
-                            <Form.Input
-                                id="form-desc"
-                                placeholder="Description"
-                                name="description"
-                                disabled={mutateLoading}
-                                onChange={handleInputChange}
-                            />
-                        </Form.Field>
-                        <Form.Field>
-                            <label htmlFor="form-question-template">
-                                Question Template
-                            </label>
-                            <Form.Input
-                                id="form-question-template"
-                                name="questionTemplate"
-                                disabled={mutateLoading}
-                                onChange={handleInputChange}
-                            />
-                        </Form.Field>
-                        <Form.Field>
-                            <Form.Checkbox
-                                name="rateLimitEnabled"
-                                defaultChecked={input.rateLimitEnabled}
-                                label="Enable queue rate-limiting"
-                                onChange={() =>
-                                    setInput({
-                                        ...input,
-                                        rateLimitEnabled:
-                                            !input.rateLimitEnabled,
-                                    })
-                                }
-                            />
-                        </Form.Field>
-                        {input.rateLimitEnabled && (
-                            <Form.Group style={{ alignItems: "center" }}>
-                                <Form.Input
-                                    placeholder="3"
-                                    name={RateLimitFields.RATE_LIMIT_QUESTIONS}
-                                    defaultValue={input.rateLimitQuestions}
-                                    onChange={handleInputChange}
-                                    width={2}
-                                    size="mini"
-                                    type="number"
-                                    min="1"
-                                    id="rate-questions"
-                                    error={!validQuestionRate}
-                                />
-                                <label htmlFor="rate-questions">
-                                    question(s) within{" "}
-                                </label>
-                                <Form.Input
-                                    placeholder="60"
-                                    name={RateLimitFields.RATE_LIMIT_MINUTES}
-                                    defaultValue={input.rateLimitMinutes}
-                                    width={2}
-                                    size="mini"
-                                    onChange={handleInputChange}
-                                    type="number"
-                                    min="1"
-                                    id="rate-minutes"
-                                    error={!validMinsRate}
-                                />
-                                <label htmlFor="rate-minutes">
-                                    minutes per student when queue has at least
-                                </label>
-                                <Form.Input
-                                    placeholder="10"
-                                    name={RateLimitFields.RATE_LIMIT_LENGTH}
-                                    defaultValue={input.rateLimitLength}
-                                    width={2}
-                                    onChange={handleInputChange}
-                                    size="mini"
-                                    type="number"
-                                    min="0"
-                                    id="rate-length"
-                                    error={!validLenRate}
-                                />
-                                <label htmlFor="rate-length">question(s)</label>
-                            </Form.Group>
-                        )}
-                        <Form.Field required>
-                            <label htmlFor="video-radio">Video Chat</label>
-                            <Form.Group id="video-radio">
-                                <Form.Radio
-                                    label="Require Link"
-                                    checked={
-                                        input.videoChatSetting ===
-                                        VideoChatSetting.REQUIRED
-                                    }
-                                    name="videoChatRequired"
-                                    disabled={mutateLoading}
-                                    onChange={handleVideoChatInputChange}
-                                />
-                                <Form.Radio
-                                    label="Allow Link"
-                                    checked={
-                                        input.videoChatSetting ===
-                                        VideoChatSetting.OPTIONAL
-                                    }
-                                    name="videoChatOptional"
-                                    disabled={mutateLoading}
-                                    onChange={handleVideoChatInputChange}
-                                />
-                                <Form.Radio
-                                    label="No Link"
-                                    checked={
-                                        input.videoChatSetting ===
-                                        VideoChatSetting.DISABLED
-                                    }
-                                    name="videoChatDisabled"
-                                    disabled={mutateLoading}
-                                    onChange={handleVideoChatInputChange}
-                                />
-                            </Form.Group>
-                        </Form.Field>
-                        <Form.Field required>
-                            <label htmlFor="pin-radio">Pin</label>
-                            <Form.Group id="pin-radio">
-                                <Form.Radio
-                                    label="Enable Pin"
-                                    checked={input.pinEnabled}
-                                    name="pinEnabled"
-                                    disabled={mutateLoading}
-                                    onChange={handlePinInputChange}
-                                />
-                                <Form.Radio
-                                    label="Disable Pin"
-                                    checked={!input.pinEnabled}
-                                    name="pinDisabled"
-                                    disabled={mutateLoading}
-                                    onChange={handlePinInputChange}
-                                />
-                            </Form.Group>
-                        </Form.Field>
-                        <Button
-                            content="Create"
-                            color="blue"
-                            type="submit"
-                            disabled={isDisabled || mutateLoading}
-                            onClick={onSubmit}
-                        />
-                        <Button
-                            content="Cancel"
-                            type="submit"
-                            disabled={mutateLoading}
-                            onClick={backFunc}
-                        />
-                    </Form>
-                </Segment>
-            </Grid.Row>
-            <Snackbar
-                open={error}
-                autoHideDuration={6000}
-                onClose={() => setError(false)}
-            >
-                <Alert severity="error" onClose={() => setError(false)}>
-                    <span>
-                        There was an error creating this queue. Names must be
-                        unique.
-                    </span>
-                </Alert>
-            </Snackbar>
-        </Grid.Column>
-    );
-};
-
-export default CreateQueue;
diff --git a/frontend/components/Course/InstructorQueuePage/InstructorQueuePage.tsx b/frontend/components/Course/InstructorQueuePage/InstructorQueuePage.tsx
index 07216aa62..0c729c55e 100644
--- a/frontend/components/Course/InstructorQueuePage/InstructorQueuePage.tsx
+++ b/frontend/components/Course/InstructorQueuePage/InstructorQueuePage.tsx
@@ -6,7 +6,7 @@ import Snackbar from "@material-ui/core/Snackbar";
 import InstructorQueues from "./InstructorQueues";
 import Announcements from "../Announcements";
 import QueueSettings from "./QueueSettings/QueueSettings";
-import CreateQueue from "./CreateQueue/CreateQueue";
+import QueueCreate from "./QueueCreate/QueueCreate";
 import { AuthUserContext } from "../../../context/auth";
 import { useQueues, useStaff } from "../../../hooks/data-fetching/course";
 import {
@@ -143,7 +143,7 @@ const InstructorQueuePage = (props: InstructorQueuePageProps) => {
                 )}
                 {pageState.kind === PageStateEnum.CREATE && (
                     <Grid.Row style={{ marginTop: "1rem" }}>
-                        <CreateQueue
+                        <QueueCreate
                             courseId={courseId}
                             mutate={mutate}
                             successFunc={() => setSuccess(true)}
diff --git a/frontend/components/Course/InstructorQueuePage/QuestionCard.tsx b/frontend/components/Course/InstructorQueuePage/QuestionCard.tsx
index db73743ea..21ac57912 100644
--- a/frontend/components/Course/InstructorQueuePage/QuestionCard.tsx
+++ b/frontend/components/Course/InstructorQueuePage/QuestionCard.tsx
@@ -197,17 +197,19 @@ const QuestionCard = (props: QuestionCardProps) => {
                                     inverted
                                     position="left center"
                                 />
-                                <QuestionTimer
-                                    questionStartTime={
-                                        question.timeResponseStarted ||
-                                        question.timeAsked
-                                    }
-                                    timerStartTime={
-                                        (queue.questionTimerEnabled &&
-                                            queue.questionTimerStartTime) ||
-                                        10
-                                    }
-                                />
+                                {queue.questionTimerEnabled &&
+                                    question.timeResponseStarted && (
+                                        <QuestionTimer
+                                            questionStartTime={
+                                                question.timeResponseStarted
+                                            }
+                                            timerStartTime={
+                                                (queue.questionTimerEnabled &&
+                                                    queue.questionTimerStartTime) ||
+                                                10
+                                            }
+                                        />
+                                    )}
                             </div>
                         </Header>
                     </div>
diff --git a/frontend/components/Course/InstructorQueuePage/QuestionTimer.tsx b/frontend/components/Course/InstructorQueuePage/QuestionTimer.tsx
index f145e5041..3622f9625 100644
--- a/frontend/components/Course/InstructorQueuePage/QuestionTimer.tsx
+++ b/frontend/components/Course/InstructorQueuePage/QuestionTimer.tsx
@@ -1,5 +1,7 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Label } from "semantic-ui-react";
+import timerAudio from "./timeupsound.mp3";
+import { usePlayer } from "../../../hooks/player";
 
 interface QuestionTimerProps {
     questionStartTime: string;
@@ -9,15 +11,23 @@ const QuestionTimer = ({
     questionStartTime,
     timerStartTime,
 }: QuestionTimerProps) => {
+    const [, , play] = usePlayer(timerAudio);
     const now = Date.now();
     const diff =
-        timerStartTime * 60 * 1000 -
+        (timerStartTime / 10) * 60 * 1000 -
         (now - new Date(questionStartTime).getTime());
     const minutes = Math.floor(Math.abs(diff) / (1000 * 60));
     const seconds = Math.floor((Math.abs(diff) % (1000 * 60)) / 1000);
 
     const sign = diff < 0 ? "-" : ""; // Add a negative sign if the time difference is negative
-
+    // Play a sound effect when hit zero (once)
+    useEffect(() => {
+        if (minutes + seconds === 0) {
+            play.current(
+                `Timer is up! You have answered this question for ${timerStartTime} minute(s).`
+            );
+        }
+    }, [sign]);
     const formated = `${sign}${minutes.toString().padStart(2, "0")}:${seconds
         .toString()
         .padStart(2, "0")}`;
diff --git a/frontend/components/Course/InstructorQueuePage/QueueCreate/QueueCreate.tsx b/frontend/components/Course/InstructorQueuePage/QueueCreate/QueueCreate.tsx
new file mode 100644
index 000000000..7a083c1c5
--- /dev/null
+++ b/frontend/components/Course/InstructorQueuePage/QueueCreate/QueueCreate.tsx
@@ -0,0 +1,99 @@
+import { useState } from "react";
+import { Grid, Segment, Header, Form, Button } from "semantic-ui-react";
+import { mutateResourceListFunction } from "@pennlabs/rest-hooks/dist/types";
+import Snackbar from "@material-ui/core/Snackbar";
+import Alert from "@material-ui/lab/Alert";
+import { createQueue } from "../../../../hooks/data-fetching/course";
+import { Queue, VideoChatSetting } from "../../../../types";
+import QueueFormFields, { QueueFormInput } from "../QueueFormFields";
+
+interface QueueCreateProps {
+    courseId: number;
+    backFunc: () => void;
+    successFunc: () => void;
+    mutate: mutateResourceListFunction<Queue>;
+}
+
+const QueueCreate = (props: QueueCreateProps) => {
+    const { courseId, backFunc, successFunc, mutate } = props;
+    /* STATE */
+    const [error, setError] = useState(false);
+    const [isDisabled, setDisabled] = useState(true);
+    const [input, setInput] = useState<QueueFormInput>({
+        name: "",
+        description: "",
+        questionTemplate: "",
+        videoChatSetting: VideoChatSetting.DISABLED,
+        pinEnabled: false,
+        rateLimitEnabled: false,
+        rateLimitLength: undefined,
+        rateLimitQuestions: undefined,
+        rateLimitMinutes: undefined,
+        questionTimerEnabled: false,
+        questionTimerStartTime: undefined,
+    });
+
+    const [mutateLoading, setRefetchLoading] = useState(false);
+
+    const onSubmit = async () => {
+        try {
+            await createQueue(courseId, input);
+            setRefetchLoading(true);
+            await mutate(-1, null);
+            setRefetchLoading(false);
+            backFunc();
+            successFunc();
+        } catch (e) {
+            setError(true);
+        }
+    };
+
+    return (
+        <Grid.Column width={16}>
+            <Grid.Row>
+                <Segment basic>
+                    <Header as="h3">Create New Queue</Header>
+                </Segment>
+            </Grid.Row>
+            <Grid.Row>
+                <Segment basic>
+                    <Form>
+                        <QueueFormFields
+                            defaultValues={input}
+                            loading={mutateLoading}
+                            setInput={setInput}
+                            setDisabled={setDisabled}
+                        />
+                        <Button
+                            content="Create"
+                            color="blue"
+                            type="submit"
+                            disabled={isDisabled || mutateLoading}
+                            onClick={onSubmit}
+                        />
+                        <Button
+                            content="Cancel"
+                            type="submit"
+                            disabled={mutateLoading}
+                            onClick={backFunc}
+                        />
+                    </Form>
+                </Segment>
+            </Grid.Row>
+            <Snackbar
+                open={error}
+                autoHideDuration={6000}
+                onClose={() => setError(false)}
+            >
+                <Alert severity="error" onClose={() => setError(false)}>
+                    <span>
+                        There was an error creating this queue. Names must be
+                        unique.
+                    </span>
+                </Alert>
+            </Snackbar>
+        </Grid.Column>
+    );
+};
+
+export default QueueCreate;
diff --git a/frontend/components/Course/InstructorQueuePage/QueueFormFields.tsx b/frontend/components/Course/InstructorQueuePage/QueueFormFields.tsx
new file mode 100644
index 000000000..dc70a8c2b
--- /dev/null
+++ b/frontend/components/Course/InstructorQueuePage/QueueFormFields.tsx
@@ -0,0 +1,412 @@
+import { useEffect, useMemo, useState } from "react";
+import { Form, Popup } from "semantic-ui-react";
+import { Queue, VideoChatSetting } from "../../../types";
+
+export interface QueueFormInput {
+    name: string;
+    description: string;
+    questionTemplate: string;
+    queueId?: number;
+    videoChatSetting: VideoChatSetting;
+    pinEnabled: boolean;
+    rateLimitEnabled: boolean;
+    rateLimitLength?: number;
+    rateLimitQuestions?: number;
+    rateLimitMinutes?: number;
+    questionTimerEnabled: boolean;
+    questionTimerStartTime?: number;
+}
+interface QueueFormSettingsProps {
+    defaultValues: any;
+    queue?: Queue;
+    loading: boolean;
+    setInput: (any) => void;
+    setDisabled: (boolean) => void;
+}
+enum RateLimitFields {
+    RATE_LIMIT_QUESTIONS = "rateLimitQuestions",
+    RATE_LIMIT_MINUTES = "rateLimitMinutes",
+    RATE_LIMIT_LENGTH = "rateLimitLength",
+}
+
+enum QuestionTimerFields {
+    QUESTION_TIMER_START_TIME = "questionTimerStartTime",
+}
+
+const castInt = (n: string): number | undefined => {
+    let casted: number | undefined = parseInt(n, 10);
+    if (isNaN(casted)) {
+        casted = undefined;
+    }
+
+    return casted;
+};
+
+const QueueFormFields = ({
+    defaultValues,
+    queue,
+    loading,
+    setInput,
+    setDisabled,
+}: QueueFormSettingsProps) => {
+    const input = defaultValues;
+    const [validQuestionRate, setValidQuestionRate] = useState(true);
+    const [validMinsRate, setValidMinsRate] = useState(true);
+    const [validLenRate, setValidLenRate] = useState(true);
+
+    const [validQuestionTime, setValidQuestionTime] = useState(true);
+    const [nameCharCount, setNameCharCount] = useState(input.name.length);
+    const [descCharCount, setDescCharCount] = useState(
+        input.description.length
+    );
+    const [templCharCount, setTemplCharCount] = useState(
+        input.questionTemplate.length
+    );
+    const descCharLimit: number = 1000;
+    const templCharLimit: number = 1000;
+    const isDisabled = useMemo(() => {
+        let invalidInps = !input.name || !input.description;
+        if (input.rateLimitEnabled) {
+            invalidInps =
+                invalidInps ||
+                input.rateLimitLength === undefined ||
+                (input.rateLimitLength !== undefined &&
+                    input.rateLimitLength < 0);
+            invalidInps =
+                invalidInps ||
+                input.rateLimitQuestions === undefined ||
+                (input.rateLimitQuestions !== undefined &&
+                    input.rateLimitQuestions <= 0);
+            invalidInps =
+                invalidInps ||
+                input.rateLimitMinutes === undefined ||
+                (input.rateLimitMinutes !== undefined &&
+                    input.rateLimitMinutes <= 0);
+        }
+        if (input.questionTimerEnabled) {
+            invalidInps =
+                invalidInps ||
+                input.questionTimerStartTime === undefined ||
+                input.questionTimerStartTime <= 0;
+        }
+        if (!queue) return invalidInps;
+
+        let isSame =
+            input.name === queue.name &&
+            input.description === queue.description &&
+            input.questionTemplate === queue.questionTemplate &&
+            input.videoChatSetting === queue.videoChatSetting &&
+            input.pinEnabled === queue.pinEnabled;
+        if (input.rateLimitEnabled !== queue.rateLimitEnabled) {
+            isSame = false;
+        } else if (input.rateLimitEnabled && queue.rateLimitEnabled) {
+            isSame =
+                isSame &&
+                input.rateLimitLength === queue.rateLimitLength &&
+                input.rateLimitQuestions === queue.rateLimitQuestions &&
+                input.rateLimitMinutes === queue.rateLimitMinutes;
+        }
+        // TODO: this is probably bad
+        if (input.questionTimerEnabled !== queue.questionTimerEnabled) {
+            isSame = false;
+        } else if (input.questionTimerEnabled && queue.questionTimerEnabled) {
+            isSame =
+                isSame &&
+                input.questionTimerStartTime === queue.questionTimerStartTime;
+        }
+        return invalidInps || isSame;
+        // Queue covers all our cases
+        // TODO: Should make this not depend on "stringifying" queue, as it re-renders every time.
+        // eslint-disable-next-line
+    }, [input, JSON.stringify(queue)]);
+    useEffect(() => {
+        setDisabled(isDisabled);
+    }, [isDisabled, setDisabled]);
+
+    /* HANDLER FUNCTIONS */
+    const handleInputChange = (e, { name, value }) => {
+        if (name === "description" && value.length > descCharLimit) return;
+        if (name === "questionTemplate" && value.length > templCharLimit)
+            return;
+        if (name === "name" && value.length > 100) return;
+
+        input[name] = value;
+
+        if (name === RateLimitFields.RATE_LIMIT_QUESTIONS) {
+            input[name] = castInt(input[name]);
+            setValidQuestionRate(input[name] > 0);
+        }
+
+        if (name === RateLimitFields.RATE_LIMIT_MINUTES) {
+            input[name] = castInt(input[name]);
+            setValidMinsRate(input[name] > 0);
+        }
+
+        if (name === RateLimitFields.RATE_LIMIT_LENGTH) {
+            input[name] = castInt(input[name]);
+            setValidLenRate(input[name] >= 0);
+        }
+
+        if (name === QuestionTimerFields.QUESTION_TIMER_START_TIME) {
+            input[name] = castInt(input[name]);
+            setValidQuestionTime(input[name] > 0);
+        }
+
+        setInput({ ...input });
+        setDescCharCount(input.description.length);
+        setTemplCharCount(input.questionTemplate.length);
+        setNameCharCount(input.name.length);
+    };
+
+    const handleVideoChatInputChange = (e, { name }) => {
+        switch (name) {
+            case "videoChatRequired":
+                input.videoChatSetting = VideoChatSetting.REQUIRED;
+                break;
+            case "videoChatOptional":
+                input.videoChatSetting = VideoChatSetting.OPTIONAL;
+                break;
+            case "videoChatDisabled":
+                input.videoChatSetting = VideoChatSetting.DISABLED;
+                break;
+        }
+        setInput({ ...input });
+    };
+
+    const handlePinInputChange = (e, { checked }) => {
+        input.pinEnabled = checked;
+        setInput({ ...input });
+    };
+    /* PROPS UPDATE */
+
+    return (
+        <>
+            <Form.Field>
+                <label htmlFor="form-name">Name</label>
+                <Form.Input
+                    id="form-name"
+                    defaultValue={input.name}
+                    name="name"
+                    disabled={loading}
+                    onChange={handleInputChange}
+                />
+                <div
+                    style={{
+                        textAlign: "right",
+                        color: nameCharCount < 100 ? "" : "crimson",
+                    }}
+                >
+                    {`Characters: ${nameCharCount}/100`}
+                </div>
+            </Form.Field>
+            <Form.Field>
+                <label htmlFor="form-desc">Description</label>
+                <Form.TextArea
+                    id="form-desc"
+                    defaultValue={input.description}
+                    name="description"
+                    disabled={loading}
+                    onChange={handleInputChange}
+                />
+                <div
+                    style={{
+                        textAlign: "right",
+                        color: descCharCount < descCharLimit ? "" : "crimson",
+                    }}
+                >
+                    {`Characters: ${descCharCount}/${descCharLimit}`}
+                </div>
+            </Form.Field>
+            <Form.Field>
+                <label htmlFor="form-desc">Question Template</label>
+                <Form.TextArea
+                    id="form-desc"
+                    defaultValue={input.questionTemplate}
+                    name="questionTemplate"
+                    disabled={loading}
+                    onChange={handleInputChange}
+                />
+                <div
+                    style={{
+                        textAlign: "right",
+                        color: templCharCount < templCharLimit ? "" : "crimson",
+                    }}
+                >
+                    {`Characters: ${templCharCount}/${templCharLimit}`}
+                </div>
+            </Form.Field>
+            <Form.Field required>
+                <Form.Radio
+                    label="Enable Pin"
+                    checked={input.pinEnabled}
+                    name="pinEnabled"
+                    toggle
+                    disabled={loading}
+                    onChange={handlePinInputChange}
+                />
+            </Form.Field>
+
+            <Form.Field>
+                <Form.Radio
+                    name="rateLimitEnabled"
+                    toggle
+                    defaultChecked={input.rateLimitEnabled}
+                    label="Enable queue rate-limiting"
+                    onChange={() =>
+                        setInput({
+                            ...input,
+                            rateLimitEnabled: !input.rateLimitEnabled,
+                        })
+                    }
+                />
+
+                {input.rateLimitEnabled && (
+                    <Form.Group
+                        id="rate-limit"
+                        style={{
+                            alignItems: "center",
+                            marginLeft: "1em",
+                        }}
+                    >
+                        <Form.Input
+                            placeholder="3"
+                            name={RateLimitFields.RATE_LIMIT_QUESTIONS}
+                            defaultValue={input.rateLimitQuestions}
+                            onChange={handleInputChange}
+                            width={2}
+                            size="mini"
+                            type="number"
+                            min="1"
+                            id="rate-questions"
+                            error={!validQuestionRate}
+                        />
+                        <label htmlFor="rate-questions">
+                            question(s) within{" "}
+                        </label>
+                        <Form.Input
+                            placeholder="60"
+                            name={RateLimitFields.RATE_LIMIT_MINUTES}
+                            defaultValue={input.rateLimitMinutes}
+                            width={2}
+                            size="mini"
+                            onChange={handleInputChange}
+                            type="number"
+                            min="1"
+                            id="rate-minutes"
+                            error={!validMinsRate}
+                        />
+                        <label htmlFor="rate-minutes">
+                            minutes per student when queue has at least
+                        </label>
+                        <Form.Input
+                            placeholder="10"
+                            name={RateLimitFields.RATE_LIMIT_LENGTH}
+                            defaultValue={input.rateLimitLength}
+                            width={2}
+                            onChange={handleInputChange}
+                            size="mini"
+                            type="number"
+                            min="0"
+                            id="rate-length"
+                            error={!validLenRate}
+                        />
+                        <label htmlFor="rate-length">question(s)</label>
+                    </Form.Group>
+                )}
+                <Form.Field required>
+                    <label htmlFor="video-radio">Video Chat</label>
+                    <Form.Group id="video-radio">
+                        <Form.Radio
+                            label="Require Link"
+                            checked={
+                                input.videoChatSetting ===
+                                VideoChatSetting.REQUIRED
+                            }
+                            name="videoChatRequired"
+                            disabled={loading}
+                            onChange={handleVideoChatInputChange}
+                        />
+                        <Form.Radio
+                            label="Allow Link"
+                            checked={
+                                input.videoChatSetting ===
+                                VideoChatSetting.OPTIONAL
+                            }
+                            name="videoChatOptional"
+                            disabled={loading}
+                            onChange={handleVideoChatInputChange}
+                        />
+                        <Form.Radio
+                            label="No Link"
+                            checked={
+                                input.videoChatSetting ===
+                                VideoChatSetting.DISABLED
+                            }
+                            name="videoChatDisabled"
+                            disabled={loading}
+                            onChange={handleVideoChatInputChange}
+                        />
+                    </Form.Group>
+                </Form.Field>
+                <Form.Field>
+                    <Popup
+                        trigger={
+                            <label
+                                style={{ display: "inline-block" }}
+                                htmlFor="timer-questions-group"
+                            >
+                                Question Timer
+                            </label>
+                        }
+                        content="The countdown timer is only visable to staff"
+                    />
+
+                    <Form.Radio
+                        name="questionTimerEnabled"
+                        defaultChecked={input.questionTimerEnabled}
+                        toggle
+                        label="Enable a countdown for questions"
+                        onChange={() =>
+                            setInput({
+                                ...input,
+                                questionTimerEnabled:
+                                    !input.questionTimerEnabled,
+                            })
+                        }
+                    />
+                </Form.Field>
+
+                {input.questionTimerEnabled && (
+                    <Form.Group
+                        id="timer-questions-group"
+                        style={{
+                            alignItems: "center",
+                            marginLeft: "1em",
+                        }}
+                    >
+                        <label id="timer-questions-group">
+                            Countdown from{" "}
+                        </label>
+                        <Form.Input
+                            placeholder="10"
+                            name={QuestionTimerFields.QUESTION_TIMER_START_TIME}
+                            defaultValue={input.questionTimerStartTime}
+                            onChange={handleInputChange}
+                            width={2}
+                            size="mini"
+                            type="number"
+                            min="1"
+                            id="timer-questions"
+                            error={!validQuestionTime}
+                        />
+                        <label htmlFor="timer-questions">
+                            minute(s) per question
+                        </label>
+                    </Form.Group>
+                )}
+            </Form.Field>
+        </>
+    );
+};
+
+export default QueueFormFields;
diff --git a/frontend/components/Course/InstructorQueuePage/QueueSettings/QueueForm.tsx b/frontend/components/Course/InstructorQueuePage/QueueSettings/QueueForm.tsx
deleted file mode 100644
index 4a5d572f6..000000000
--- a/frontend/components/Course/InstructorQueuePage/QueueSettings/QueueForm.tsx
+++ /dev/null
@@ -1,501 +0,0 @@
-import { useState, useMemo } from "react";
-import { Form, Button, Modal } from "semantic-ui-react";
-import { mutateResourceListFunction } from "@pennlabs/rest-hooks/dist/types";
-import Snackbar from "@material-ui/core/Snackbar";
-import Alert from "@material-ui/lab/Alert";
-import { Queue, VideoChatSetting } from "../../../../types";
-import { logException } from "../../../../utils/sentry";
-
-// TODO: error check PATCH
-interface QueueFormProps {
-    queue: Queue;
-    mutate: mutateResourceListFunction<Queue>;
-    backFunc: () => void;
-}
-
-interface QueueFormInput {
-    name: string;
-    description: string;
-    questionTemplate: string;
-    queueId: number;
-    videoChatSetting: VideoChatSetting;
-    pinEnabled: boolean;
-    rateLimitEnabled: boolean;
-    rateLimitLength?: number;
-    rateLimitQuestions?: number;
-    rateLimitMinutes?: number;
-    questionTimerEnabled: boolean;
-    questionTimerStartTime?: number;
-}
-
-enum RateLimitFields {
-    RATE_LIMIT_QUESTIONS = "rateLimitQuestions",
-    RATE_LIMIT_MINUTES = "rateLimitMinutes",
-    RATE_LIMIT_LENGTH = "rateLimitLength",
-}
-
-enum QuestionTimerFields {
-    QUESTION_TIMER_START_TIME = "questionTimerStartTime",
-}
-
-const castInt = (n: string): number | undefined => {
-    let casted: number | undefined = parseInt(n, 10);
-    if (isNaN(casted)) {
-        casted = undefined;
-    }
-
-    return casted;
-};
-
-const QueueForm = (props: QueueFormProps) => {
-    /* STATE */
-    const descCharLimit: number = 1000;
-    const templCharLimit: number = 1000;
-    const [success, setSuccess] = useState(false);
-    const [error, setError] = useState(false);
-    const [loading, setLoading] = useState(false);
-    const { queue } = props;
-    const [open, setOpen] = useState(false);
-    const [input, setInput] = useState<QueueFormInput>({
-        name: queue.name,
-        description: queue.description,
-        questionTemplate: queue.questionTemplate,
-        queueId: queue.id,
-        videoChatSetting: queue.videoChatSetting,
-        pinEnabled: queue.pinEnabled,
-        rateLimitEnabled: queue.rateLimitEnabled,
-        rateLimitLength: queue.rateLimitEnabled
-            ? queue.rateLimitLength
-            : undefined,
-        rateLimitMinutes: queue.rateLimitEnabled
-            ? queue.rateLimitMinutes
-            : undefined,
-        rateLimitQuestions: queue.rateLimitEnabled
-            ? queue.rateLimitQuestions
-            : undefined,
-        questionTimerEnabled: queue.questionTimerEnabled,
-        questionTimerStartTime: queue.questionTimerEnabled
-            ? queue.questionTimerStartTime
-            : undefined,
-    });
-    const [validQuestionRate, setValidQuestionRate] = useState(true);
-    const [validMinsRate, setValidMinsRate] = useState(true);
-    const [validLenRate, setValidLenRate] = useState(true);
-
-    const [validQuestionTime, setValidQuestionTime] = useState(true);
-    const [nameCharCount, setNameCharCount] = useState(input.name.length);
-    const [descCharCount, setDescCharCount] = useState(
-        input.description.length
-    );
-    const [templCharCount, setTemplCharCount] = useState(
-        input.questionTemplate.length
-    );
-
-    const isDisabled = useMemo(() => {
-        let invalidInps = !input.name || !input.description;
-        if (input.rateLimitEnabled) {
-            invalidInps =
-                invalidInps ||
-                input.rateLimitLength === undefined ||
-                (input.rateLimitLength !== undefined &&
-                    input.rateLimitLength < 0);
-            invalidInps =
-                invalidInps ||
-                input.rateLimitQuestions === undefined ||
-                (input.rateLimitQuestions !== undefined &&
-                    input.rateLimitQuestions <= 0);
-            invalidInps =
-                invalidInps ||
-                input.rateLimitMinutes === undefined ||
-                (input.rateLimitMinutes !== undefined &&
-                    input.rateLimitMinutes <= 0);
-        }
-
-        let isSame =
-            input.name === queue.name &&
-            input.description === queue.description &&
-            input.questionTemplate === queue.questionTemplate &&
-            input.videoChatSetting === queue.videoChatSetting &&
-            input.pinEnabled === queue.pinEnabled;
-        if (input.rateLimitEnabled !== queue.rateLimitEnabled) {
-            isSame = false;
-        } else if (input.rateLimitEnabled && queue.rateLimitEnabled) {
-            isSame =
-                isSame &&
-                input.rateLimitLength === queue.rateLimitLength &&
-                input.rateLimitQuestions === queue.rateLimitQuestions &&
-                input.rateLimitMinutes === queue.rateLimitMinutes;
-        }
-        return invalidInps || isSame;
-        // Queue covers all our cases
-        // eslint-disable-next-line
-    }, [input, JSON.stringify(queue)]);
-
-    /* HANDLER FUNCTIONS */
-    const handleInputChange = (e, { name, value }) => {
-        if (name === "description" && value.length > descCharLimit) return;
-        if (name === "questionTemplate" && value.length > templCharLimit)
-            return;
-        if (name === "name" && value.length > 100) return;
-
-        input[name] = value;
-
-        if (name === RateLimitFields.RATE_LIMIT_QUESTIONS) {
-            input[name] = castInt(input[name]);
-            setValidQuestionRate(input[name] > 0);
-        }
-
-        if (name === RateLimitFields.RATE_LIMIT_MINUTES) {
-            input[name] = castInt(input[name]);
-            setValidMinsRate(input[name] > 0);
-        }
-
-        if (name === RateLimitFields.RATE_LIMIT_LENGTH) {
-            input[name] = castInt(input[name]);
-            setValidLenRate(input[name] >= 0);
-        }
-
-        if (name === QuestionTimerFields.QUESTION_TIMER_START_TIME) {
-            input[name] = castInt(input[name]);
-            setValidQuestionTime(input[name] > 0);
-        }
-
-        setInput({ ...input });
-        setDescCharCount(input.description.length);
-        setTemplCharCount(input.questionTemplate.length);
-        setNameCharCount(input.name.length);
-    };
-
-    const handleVideoChatInputChange = (e, { name }) => {
-        switch (name) {
-            case "videoChatRequired":
-                input.videoChatSetting = VideoChatSetting.REQUIRED;
-                break;
-            case "videoChatOptional":
-                input.videoChatSetting = VideoChatSetting.OPTIONAL;
-                break;
-            case "videoChatDisabled":
-                input.videoChatSetting = VideoChatSetting.DISABLED;
-                break;
-        }
-        setInput({ ...input });
-    };
-
-    const handlePinInputChange = (e, { name }) => {
-        switch (name) {
-            case "pinEnabled":
-                input.pinEnabled = true;
-                break;
-            case "pinDisabled":
-                input.pinEnabled = false;
-                break;
-        }
-        setInput({ ...input });
-    };
-
-    const onSubmit = async () => {
-        try {
-            setLoading(true);
-            await props.mutate(queue.id, input);
-            setSuccess(true);
-        } catch (e) {
-            logException(e);
-            setError(true);
-        }
-        setLoading(false);
-    };
-
-    const onArchived = async () => {
-        await props.mutate(queue.id, { archived: true });
-        setOpen(false);
-        props.backFunc();
-    };
-
-    /* PROPS UPDATE */
-
-    return (
-        <Form>
-            {queue && (
-                <div>
-                    <Form.Field>
-                        <label htmlFor="form-name">Name</label>
-                        <Form.Input
-                            id="form-name"
-                            defaultValue={input.name}
-                            name="name"
-                            disabled={loading}
-                            onChange={handleInputChange}
-                        />
-                        <div
-                            style={{
-                                textAlign: "right",
-                                color: nameCharCount < 100 ? "" : "crimson",
-                            }}
-                        >
-                            {`Characters: ${nameCharCount}/100`}
-                        </div>
-                    </Form.Field>
-                    <Form.Field>
-                        <label htmlFor="form-desc">Description</label>
-                        <Form.TextArea
-                            id="form-desc"
-                            defaultValue={input.description}
-                            name="description"
-                            disabled={loading}
-                            onChange={handleInputChange}
-                        />
-                        <div
-                            style={{
-                                textAlign: "right",
-                                color:
-                                    descCharCount < descCharLimit
-                                        ? ""
-                                        : "crimson",
-                            }}
-                        >
-                            {`Characters: ${descCharCount}/${descCharLimit}`}
-                        </div>
-                    </Form.Field>
-                    <Form.Field>
-                        <label htmlFor="form-desc">Question Template</label>
-                        <Form.TextArea
-                            id="form-desc"
-                            defaultValue={input.questionTemplate}
-                            name="questionTemplate"
-                            disabled={loading}
-                            onChange={handleInputChange}
-                        />
-                        <div
-                            style={{
-                                textAlign: "right",
-                                color:
-                                    templCharCount < templCharLimit
-                                        ? ""
-                                        : "crimson",
-                            }}
-                        >
-                            {`Characters: ${templCharCount}/${templCharLimit}`}
-                        </div>
-                    </Form.Field>
-                    <Form.Field>
-                        <Form.Checkbox
-                            name="rateLimitEnabled"
-                            defaultChecked={input.rateLimitEnabled}
-                            label="Enable queue rate-limiting"
-                            onChange={() =>
-                                setInput({
-                                    ...input,
-                                    rateLimitEnabled: !input.rateLimitEnabled,
-                                })
-                            }
-                        />
-                    </Form.Field>
-
-                    {input.rateLimitEnabled && (
-                        <Form.Group style={{ alignItems: "center" }}>
-                            <Form.Input
-                                placeholder="3"
-                                name={RateLimitFields.RATE_LIMIT_QUESTIONS}
-                                defaultValue={input.rateLimitQuestions}
-                                onChange={handleInputChange}
-                                width={2}
-                                size="mini"
-                                type="number"
-                                min="1"
-                                id="rate-questions"
-                                error={!validQuestionRate}
-                            />
-                            <label htmlFor="rate-questions">
-                                question(s) within{" "}
-                            </label>
-                            <Form.Input
-                                placeholder="60"
-                                name={RateLimitFields.RATE_LIMIT_MINUTES}
-                                defaultValue={input.rateLimitMinutes}
-                                width={2}
-                                size="mini"
-                                onChange={handleInputChange}
-                                type="number"
-                                min="1"
-                                id="rate-minutes"
-                                error={!validMinsRate}
-                            />
-                            <label htmlFor="rate-minutes">
-                                minutes per student when queue has at least
-                            </label>
-                            <Form.Input
-                                placeholder="10"
-                                name={RateLimitFields.RATE_LIMIT_LENGTH}
-                                defaultValue={input.rateLimitLength}
-                                width={2}
-                                onChange={handleInputChange}
-                                size="mini"
-                                type="number"
-                                min="0"
-                                id="rate-length"
-                                error={!validLenRate}
-                            />
-                            <label htmlFor="rate-length">question(s)</label>
-                        </Form.Group>
-                    )}
-
-                    <Form.Field required>
-                        <label htmlFor="video-radio">Video Chat</label>
-                        <Form.Group id="video-radio">
-                            <Form.Radio
-                                label="Require Link"
-                                checked={
-                                    input.videoChatSetting ===
-                                    VideoChatSetting.REQUIRED
-                                }
-                                name="videoChatRequired"
-                                disabled={loading}
-                                onChange={handleVideoChatInputChange}
-                            />
-                            <Form.Radio
-                                label="Allow Link"
-                                checked={
-                                    input.videoChatSetting ===
-                                    VideoChatSetting.OPTIONAL
-                                }
-                                name="videoChatOptional"
-                                disabled={loading}
-                                onChange={handleVideoChatInputChange}
-                            />
-                            <Form.Radio
-                                label="No Link"
-                                checked={
-                                    input.videoChatSetting ===
-                                    VideoChatSetting.DISABLED
-                                }
-                                name="videoChatDisabled"
-                                disabled={loading}
-                                onChange={handleVideoChatInputChange}
-                            />
-                        </Form.Group>
-                        <Form.Field required>
-                            <label htmlFor="pin-radio">Pin</label>
-                            <Form.Group id="pin-radio">
-                                <Form.Radio
-                                    label="Enable Pin"
-                                    checked={input.pinEnabled}
-                                    name="pinEnabled"
-                                    disabled={loading}
-                                    onChange={handlePinInputChange}
-                                />
-                                <Form.Radio
-                                    label="Disable Pin"
-                                    checked={!input.pinEnabled}
-                                    name="pinDisabled"
-                                    disabled={loading}
-                                    onChange={handlePinInputChange}
-                                />
-                            </Form.Group>
-                        </Form.Field>
-                        <Form.Field>
-                            <label htmlFor="pin-radio">Question Timer</label>
-                            <Form.Checkbox
-                                name="questionTimerEnabled"
-                                defaultChecked={input.questionTimerEnabled}
-                                label="Enable a countdown for questions (Only shown to staff)"
-                                onChange={() =>
-                                    setInput({
-                                        ...input,
-                                        questionTimerEnabled:
-                                            !input.questionTimerEnabled,
-                                    })
-                                }
-                            />
-                        </Form.Field>
-
-                        {input.questionTimerEnabled && (
-                            <Form.Group style={{ alignItems: "center" }}>
-                                <label id="timer-questions">
-                                    Countdown from{" "}
-                                </label>
-                                <Form.Input
-                                    placeholder="10"
-                                    name={
-                                        QuestionTimerFields.QUESTION_TIMER_START_TIME
-                                    }
-                                    defaultValue={input.questionTimerStartTime}
-                                    onChange={handleInputChange}
-                                    width={2}
-                                    size="mini"
-                                    type="number"
-                                    min="1"
-                                    id="timer-questions"
-                                    error={!validQuestionTime}
-                                />
-                                <label htmlFor="timer-questions">
-                                    minutes per question
-                                </label>
-                            </Form.Group>
-                        )}
-                    </Form.Field>
-
-                    <Button
-                        color="blue"
-                        type="submit"
-                        disabled={isDisabled || loading}
-                        loading={loading}
-                        onClick={onSubmit}
-                    >
-                        Save
-                    </Button>
-                    <Modal
-                        open={open}
-                        trigger={
-                            <Button type="submit" onClick={() => setOpen(true)}>
-                                Archive
-                            </Button>
-                        }
-                    >
-                        <Modal.Header>Archive Queue</Modal.Header>
-                        <Modal.Content>
-                            You are about to archive this queue:{" "}
-                            <b>{queue.name}</b>.
-                        </Modal.Content>
-                        <Modal.Actions>
-                            <Button
-                                content="Cancel"
-                                disabled={loading}
-                                onClick={() => setOpen(false)}
-                            />
-                            <Button
-                                content="Archive"
-                                onClick={onArchived}
-                                disabled={loading}
-                                color="red"
-                            />
-                        </Modal.Actions>
-                    </Modal>
-                </div>
-            )}
-            <Snackbar
-                open={success}
-                autoHideDuration={2000}
-                onClose={() => setSuccess(false)}
-            >
-                <Alert severity="success" onClose={() => setSuccess(false)}>
-                    <span>
-                        <b>{queue.name}</b> successfully updated
-                    </span>
-                </Alert>
-            </Snackbar>
-            <Snackbar
-                open={error}
-                autoHideDuration={6000}
-                onClose={() => setError(false)}
-            >
-                <Alert severity="error" onClose={() => setError(false)}>
-                    <span>
-                        There was an error editing <b>{queue.name}</b>
-                    </span>
-                </Alert>
-            </Snackbar>
-        </Form>
-    );
-};
-
-export default QueueForm;
diff --git a/frontend/components/Course/InstructorQueuePage/QueueSettings/QueueSettings.tsx b/frontend/components/Course/InstructorQueuePage/QueueSettings/QueueSettings.tsx
index 3d0ee0ce8..6a6b4720c 100644
--- a/frontend/components/Course/InstructorQueuePage/QueueSettings/QueueSettings.tsx
+++ b/frontend/components/Course/InstructorQueuePage/QueueSettings/QueueSettings.tsx
@@ -7,7 +7,7 @@ import {
     Loader,
 } from "semantic-ui-react";
 import { mutateResourceListFunction } from "@pennlabs/rest-hooks/dist/types";
-import QueueForm from "./QueueForm";
+import UpdateQueueForm from "./QueueSettingsForm";
 import { Queue } from "../../../../types";
 
 interface QueueSettingsProps {
@@ -48,7 +48,7 @@ const QueueSettings = (props: QueueSettingsProps) => {
             </Grid.Row>
             <Grid.Row>
                 <Segment basic>
-                    <QueueForm
+                    <UpdateQueueForm
                         mutate={mutate}
                         queue={queue}
                         backFunc={backFunc}
diff --git a/frontend/components/Course/InstructorQueuePage/QueueSettings/QueueSettingsForm.tsx b/frontend/components/Course/InstructorQueuePage/QueueSettings/QueueSettingsForm.tsx
new file mode 100644
index 000000000..b55e82776
--- /dev/null
+++ b/frontend/components/Course/InstructorQueuePage/QueueSettings/QueueSettingsForm.tsx
@@ -0,0 +1,142 @@
+import { useState } from "react";
+import { Form, Button, Modal } from "semantic-ui-react";
+import { mutateResourceListFunction } from "@pennlabs/rest-hooks/dist/types";
+import Snackbar from "@material-ui/core/Snackbar";
+import Alert from "@material-ui/lab/Alert";
+import { Queue } from "../../../../types";
+import { logException } from "../../../../utils/sentry";
+import QueueFormFields, { QueueFormInput } from "../QueueFormFields";
+
+// TODO: error check PATCH
+interface QueueFormProps {
+    queue: Queue;
+    mutate: mutateResourceListFunction<Queue>;
+    backFunc: () => void;
+}
+
+const UpdateQueueForm = (props: QueueFormProps) => {
+    /* STATE */
+
+    const [success, setSuccess] = useState(false);
+    const [error, setError] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const { queue } = props;
+    const [open, setOpen] = useState(false);
+    const [isDisabled, setDisabled] = useState(true);
+    const [input, setInput] = useState<QueueFormInput>({
+        name: queue.name,
+        description: queue.description,
+        questionTemplate: queue.questionTemplate,
+        queueId: queue.id,
+        videoChatSetting: queue.videoChatSetting,
+        pinEnabled: queue.pinEnabled,
+        rateLimitEnabled: queue.rateLimitEnabled,
+        rateLimitLength: queue.rateLimitEnabled
+            ? queue.rateLimitLength
+            : undefined,
+        rateLimitMinutes: queue.rateLimitEnabled
+            ? queue.rateLimitMinutes
+            : undefined,
+        rateLimitQuestions: queue.rateLimitEnabled
+            ? queue.rateLimitQuestions
+            : undefined,
+        questionTimerEnabled: queue.questionTimerEnabled,
+        questionTimerStartTime: queue.questionTimerEnabled
+            ? queue.questionTimerStartTime
+            : undefined,
+    });
+
+    const onSubmit = async () => {
+        try {
+            setLoading(true);
+            await props.mutate(queue.id, input);
+            setSuccess(true);
+        } catch (e) {
+            logException(e);
+            setError(true);
+        }
+        setLoading(false);
+    };
+
+    const onArchived = async () => {
+        await props.mutate(queue.id, { archived: true });
+        setOpen(false);
+        props.backFunc();
+    };
+
+    return (
+        <Form>
+            {queue && (
+                <div>
+                    <QueueFormFields
+                        defaultValues={input}
+                        queue={queue}
+                        loading={loading}
+                        setInput={setInput}
+                        setDisabled={setDisabled}
+                    />
+                    <Button
+                        color="blue"
+                        type="submit"
+                        disabled={isDisabled || loading}
+                        loading={loading}
+                        onClick={onSubmit}
+                    >
+                        Save
+                    </Button>
+                    <Modal
+                        open={open}
+                        trigger={
+                            <Button type="submit" onClick={() => setOpen(true)}>
+                                Archive
+                            </Button>
+                        }
+                    >
+                        <Modal.Header>Archive Queue</Modal.Header>
+                        <Modal.Content>
+                            You are about to archive this queue:{" "}
+                            <b>{queue.name}</b>.
+                        </Modal.Content>
+                        <Modal.Actions>
+                            <Button
+                                content="Cancel"
+                                disabled={loading}
+                                onClick={() => setOpen(false)}
+                            />
+                            <Button
+                                content="Archive"
+                                onClick={onArchived}
+                                disabled={loading}
+                                color="red"
+                            />
+                        </Modal.Actions>
+                    </Modal>
+                </div>
+            )}
+            <Snackbar
+                open={success}
+                autoHideDuration={2000}
+                onClose={() => setSuccess(false)}
+            >
+                <Alert severity="success" onClose={() => setSuccess(false)}>
+                    <span>
+                        <b>{queue.name}</b> successfully updated
+                    </span>
+                </Alert>
+            </Snackbar>
+            <Snackbar
+                open={error}
+                autoHideDuration={6000}
+                onClose={() => setError(false)}
+            >
+                <Alert severity="error" onClose={() => setError(false)}>
+                    <span>
+                        There was an error editing <b>{queue.name}</b>
+                    </span>
+                </Alert>
+            </Snackbar>
+        </Form>
+    );
+};
+
+export default UpdateQueueForm;
diff --git a/frontend/components/Course/InstructorQueuePage/timeupsound.mp3 b/frontend/components/Course/InstructorQueuePage/timeupsound.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..130090a8b6a7d5d426f2d310778b3a697b904678
GIT binary patch
literal 21150
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
Kb)x=>`uqnehRzuP

literal 0
HcmV?d00001