Quackety quack

src/components/welcome/BackendChecker.tsx

@@ -2,31 +2,31 @@ import { FC, useState, useEffect } from "react";
 import {
   getTestData,
   getBaseUrl,
-  TestDuckType,
-  cleanse
+  cleanse,
+  TestQuarticleType
 } from "../../services/instance";
 import CleanseButton from "../debug/Cleanser";
 import Spinner from "../debug/Spinner";
 import { codeClass } from "./Welcome.css";
 
 const BackendChecker: FC = () => {
   const [backendIsChecked, setBackendIsChecked] = useState<boolean>(false);
-  const [persons, setPersons] = useState<TestDuckType[]>([]);
+  const [quarticles, setQuarticles] = useState<TestQuarticleType[]>([]);
   const url = getBaseUrl();
 
   useEffect(() => {
     const initializer = async () => {
-      const persons = await getTestData();
+      const quarticles = await getTestData();
 
-      if (persons.length !== 0) {
-        setPersons(persons);
+      if (quarticles.length !== 0) {
+        setQuarticles(quarticles);
         setBackendIsChecked(true);
         return;
       }
 
       await cleanse();
       const cleansed = await getTestData();
-      setPersons(cleansed);
+      setQuarticles(cleansed);
       setBackendIsChecked(true);
     };
 
@@ -55,32 +55,35 @@ const BackendChecker: FC = () => {
 
       <p>
         Below is an iframe fetching stuff from your backend. If the iframe
-        contains a mysterious JSON blob of mysterious duck data, you are good to
-        go backend-wise. If not, reload the page and it <em>should be ok</em>.
-        If it does not want to work even after multiple reloads, it could be a
-        more mysterious issue and you should contact the teacher.
+        contains a mysterious JSON blob of mysterious quarticle data, you are
+        good to go backend-wise. If not, try to push the{" "}
+        <strong>CLEANSE</strong> button. If it does not want to work even after
+        multiple reloads, it could be a more mysterious issue and you should
+        contact the teacher.
       </p>
 
       <p>
         Also open the browser dev console and assert that it has all kinds of
         stuff. Warnings and whatnot!
       </p>
 
-      {persons.length > 0 && (
-        <iframe title="check-json" width="100%" src={`${url}/duck`}></iframe>
+      {quarticles.length > 0 && (
+        <iframe
+          title="check-json"
+          width="100%"
+          src={`${url}/quarticle`}
+        ></iframe>
       )}
 
       <p>
-        If you manage to mess up your ducks (it might happen) you can always
-        cleanse the flock with the pre-made <code>CleanseButton</code> component
-        from <code>/src/components/debug/CleanseButton.tsx</code>. Just render
-        the component and click the cleanse button and wait patiently and your
-        flock should be reset to a safe starting state.
+        If you manage to mess up your data (it might happen) you can always
+        cleanse everything with the pre-made <code>CleanseButton</code>{" "}
+        component from <code>/src/components/debug/CleanseButton.tsx</code>.
+        Just render the component and click the cleanse button and wait
+        patiently and your data should be reset to a safe starting state.
       </p>
 
-      <p>
-        <CleanseButton />
-      </p>
+      <CleanseButton />
     </>
   );
 };

src/services/instance.ts

@@ -1,4 +1,6 @@
-export type TestDuckType = {
+import axios from "axios";
+
+export type TestQuarticleType = {
   id: string;
   appId: string;
 };
@@ -16,11 +18,9 @@ export const getAppId = (): string => {
 export const getBaseUrl = (): string =>
   `${process.env.NEXT_PUBLIC_API}/${getAppId()}`;
 
-export const getTestData = async (): Promise<TestDuckType[]> => {
-  const response = await fetch(`${getBaseUrl()}/duck`);
-  const data = (await response.json()) as TestDuckType[];
-
-  return data;
+export const getTestData = async (): Promise<TestQuarticleType[]> => {
+  const ret = await axios.get<TestQuarticleType[]>(`${getBaseUrl()}/quarticle`);
+  return ret.data;
 };
 
 export const cleanse = async (): Promise<boolean> => {