Add reset button to footer

client/src/components/Footer.tsx

@@ -2,6 +2,7 @@ import navLinks from 'lib/navLinks';
 import Link from 'next/link';
 import React from 'react';
 import Logo from './Logo';
+import ResetButton from './ResetButton';
 
 const LINK_STYLE = 'font-display hover:underline';
 
@@ -11,7 +12,10 @@ export default function Footer() {
       <div className="container flex flex-col md:flex-row items-center justify-between py-4 text-gray-400">
         <LogoSection className="mb-4 h-12 w-24" />
 
-        <small className="text-center">©2022, CoEDL</small>
+        <div className="flex flex-col space-y-2">
+          <small className="text-center">©2022, CoEDL</small>
+          <ResetButton />
+        </div>
         <NavSection />
       </div>
     </div>

client/src/components/ResetButton.tsx

@@ -0,0 +1,27 @@
+import {useAtom} from 'jotai';
+import {resetApp} from 'lib/api/reset';
+import React from 'react';
+import {datasetsAtom, modelsAtom, transcriptionsAtom} from 'store';
+
+export default function ResetButton() {
+  const [, setDatasets] = useAtom(datasetsAtom);
+  const [, setModels] = useAtom(modelsAtom);
+  const [, setTranscriptions] = useAtom(transcriptionsAtom);
+
+  const reset = async () => {
+    const response = await resetApp();
+    if (response.ok) {
+      setDatasets([]);
+      setModels([]);
+      setTranscriptions([]);
+    } else {
+      console.error('Error resetting app');
+    }
+  };
+
+  return (
+    <button className="button" onClick={reset}>
+      Reset
+    </button>
+  );
+}

client/src/lib/api/reset.ts

@@ -0,0 +1,7 @@
+import urls, {server} from 'lib/urls';
+
+const url = server + urls.api.reset;
+
+export async function resetApp(): Promise<Response> {
+  return fetch(url);
+}

client/src/lib/urls.ts

@@ -22,6 +22,7 @@ export const urls = {
     datasets: '/api/datasets/',
     models: '/api/models/',
     transcriptions: '/api/transcriptions/',
+    reset: '/api/reset/',
   },
 };
 

server/server/api/__init__.py

@@ -2,9 +2,10 @@
 
 from server.api.datasets import dataset_bp
 from server.api.models import model_bp
+from server.api.reset import reset_bp
 from server.api.transcribe import transcription_bp
 
 api_bp = Blueprint("api_bp", __name__, url_prefix="/api")
 
-for bp in dataset_bp, model_bp, transcription_bp:
+for bp in dataset_bp, model_bp, transcription_bp, reset_bp:
     api_bp.register_blueprint(bp)

server/server/api/reset.py

@@ -0,0 +1,15 @@
+from http import HTTPStatus
+
+from flask import Blueprint, Response
+from flask import current_app as app
+
+from server.interface import Interface
+
+reset_bp = Blueprint("reset_bp", __name__, url_prefix="/reset")
+
+
+@reset_bp.route("/", methods=["GET"])
+def reset():
+    interface = Interface.from_app(app)
+    interface.reset()
+    return Response(status=HTTPStatus.NO_CONTENT)