diff --git a/frontend/app/app/questions/create/page.tsx b/frontend/app/app/questions/create/page.tsx
new file mode 100644
index 0000000000..383b26daee
--- /dev/null
+++ b/frontend/app/app/questions/create/page.tsx
@@ -0,0 +1,5 @@
+import QuestionCreate from "@/components/questions/question-create";
+
+export default function QuestionCreatePage() {
+ return ;
+}
diff --git a/frontend/components/questions/question-create.tsx b/frontend/components/questions/question-create.tsx
new file mode 100644
index 0000000000..e7baee5f69
--- /dev/null
+++ b/frontend/components/questions/question-create.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { Question } from "@/lib/schemas/question-schema";
+import QuestionForm from "@/components/questions/question-form";
+import { useAuth } from "@/app/auth/auth-context";
+import { useRouter } from "next/navigation";
+import { useToast } from "@/components/hooks/use-toast";
+
+export default function QuestionCreate() {
+ const auth = useAuth();
+ const router = useRouter();
+ const { toast } = useToast();
+
+ const handleCreate = async (newQuestion: Question) => {
+ try {
+ const response = await fetch("http://localhost:8000/questions", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ title: newQuestion.title,
+ description: newQuestion.description,
+ category: newQuestion.category,
+ complexity: newQuestion.complexity,
+ }),
+ });
+
+ if (!response.ok) {
+ if (response.status == 409) {
+ throw new Error("A question with this title already exists.");
+ }
+ }
+
+ toast({
+ title: "Success",
+ description: "Question created successfully!",
+ variant: "success",
+ duration: 3000,
+ });
+
+ router.push(`/app/questions/`);
+ } catch (err) {
+ toast({
+ title: "An error occured!",
+ description:
+ err instanceof Error ? err.message : "An unknown error occurred",
+ variant: "destructive",
+ duration: 5000,
+ });
+ }
+ };
+
+ return (
+
+
Create a New Question
+
+
+ );
+}
diff --git a/frontend/components/questions/question-form.tsx b/frontend/components/questions/question-form.tsx
index 3950f7434b..b8719515ff 100644
--- a/frontend/components/questions/question-form.tsx
+++ b/frontend/components/questions/question-form.tsx
@@ -22,31 +22,49 @@ import { Label } from "@/components/ui/label";
import { AutosizeTextarea } from "../ui/autosize-textarea";
interface QuestionFormProps {
- data: Question | undefined;
+ initialData?: Question;
isAdmin: boolean | undefined;
- handleSubmit?: (question: Question) => void;
+ handleSubmit: (question: Question) => void;
+ submitButtonText: string;
}
const QuestionForm: React.FC = ({ ...props }) => {
- const [question, setQuestion] = useState();
+ const [question, setQuestion] = useState(
+ props.initialData || {
+ id: "",
+ title: "",
+ category: "",
+ complexity: "easy",
+ description: "",
+ }
+ );
useEffect(() => {
- setQuestion(props.data);
- }, [props.data]);
+ if (props.initialData) {
+ setQuestion(props.initialData);
+ }
+ }, [props.initialData]);
+
+ const onSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ props.handleSubmit(question);
+ };
return (
-