app/components/form.tsx

@@ -0,0 +1,47 @@
+'use client';
+import { useState } from "react";
+
+const Form = <T,>({ initialData, onSubmit }) => {
+  const [formData, setFormData] = useState( initialData );
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+
+    //q = formData;
+
+    //addQuestion( q );
+
+    //console.log( `Adding question ${JSON.stringify(q)}` );
+
+    onSubmit( formData );
+  }
+
+  const handleChange = (event) => {
+    const { name, value } = event.target;
+    setFormData( (prevData) => ({
+      ...prevData,
+      [name]: value
+    }));
+  }
+
+  return ( 
+    <form onSubmit={handleSubmit} className="flex">
+      <div>
+        {initialData.entries.map( (key, val) => {
+          return(
+            <input
+              type = { typeof( val ) == typeof( 0 ) ? "number" : "text" /* pretty hacky, we should change this */ } 
+              id = {key}
+              name = {key}
+              value = {formData[ key ]}
+              onChange = {handleChange}
+              required
+            />)})}
+      </div>
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+
+export default Form;
+

app/lib/api.ts

@@ -0,0 +1,33 @@
+// the base URL of the api; all requests start with it
+const base_url: string = "http://localhost:4000/";
+
+/*
+export const makeGetRequest = async<T> (path: string): Promise<T> => {
+  return await (await fetch( base_url + path )).json();
+}
+*/
+
+// generic function that makes a web request
+const makeRequest = async (path: string, method: string, body?: string): Promise<Response> => {
+  console.log( `making ${method} request: ${base_url + path}, ${body}` );
+  return fetch( base_url + path, { method: method, body: body ? body : null } );
+}
+
+// the following functions are wrappers around `makeRequest`,
+// for every type of request that's needed.
+
+export const makeGetRequest = async<T> (path: string): Promise<T> => {
+  return (await makeRequest( path, "GET" )).json();
+}
+
+export const makePostRequest = async<T> (path: string, body: T): Promise<T> => {
+  return (await makeRequest( path, "POST", JSON.stringify( body ) )).json();
+} 
+
+export const makePutRequest = async<T> (path: string, body: T): Promise<T> => {
+  return (await makeRequest( path, "PUT", JSON.stringify( body ) )).json();
+}
+
+export const makeDeleteRequest = async<T> (path: string): Promise<T> => {
+  return (await makeRequest( path, "DELETE" )).json();
+}

app/lib/question.ts

@@ -0,0 +1,33 @@
+import { makeDeleteRequest, makeGetRequest, makePostRequest } from "./api";
+
+export const enum QuizQuestion {
+  UL,
+  UR,
+  DL, 
+  DR
+};
+
+export type Question = {
+  id: number;
+  category: string | null;
+  type: string | null; // TODO: make a TS type for every question type
+  text: string;
+  answer: string | boolean | QuizQuestion;
+} 
+
+export const getQuestion = async (id: number): Promise<Question> => {
+  return makeGetRequest( `questions/${id}/` );
+}
+
+export const addQuestion = async (question: Question): Promise<Question> => {
+  console.log( `adding question ${JSON.stringify( question)}` );
+  return makePostRequest( `questions`, question );
+}
+
+export const editQuestion = async (question: Question): Promise<Question> => {
+  return makePostRequest( `questions/${question.id}`, question );
+}
+
+export const deleteQuestion = async (id: number): Promise<Question> => {
+  return makeDeleteRequest( `questions/${id}` );
+}

app/lib/session.ts

@@ -0,0 +1,17 @@
+import { makeGetRequest, makePostRequest } from "./api";
+
+export type Session = {
+  id: number;
+  right: number;
+  wrong: number;
+  total: number;
+  // user: string;
+}
+
+export const getSession = async (id: number): Promise<Session> => {
+  return makeGetRequest( `sessions/${id}/` );
+}
+
+export const postSession = async (session: Session): Promise<Session> => {
+  return makePostRequest( `sessions`, session );
+}