initial commit

client/src/App.tsx

@@ -0,0 +1,86 @@
+import "./App.css";
+import Musicians from "./Musicians/Musicians";
+import NavBar from "./NavBar/NavBar";
+import ContactForm from "./Forms/Contact/ContactForm";
+import { Container } from "react-bootstrap";
+import Group, { GroupObj } from "./Group/Group";
+import SeriesList, { EventSeriesObj } from "./Series/SeriesList";
+import { useState, useEffect } from "react";
+import Footer from "./Footer/Footer";
+import { getRoot } from "./api";
+import { MusicianObj } from "./Musicians/Musician/Musician";
+import ErrorModal from "./ErrorModal/ErrorModal";
+import Cookies from "js-cookie";
+
+function App() {
+  const tokenCookie = Cookies.get("token");
+  const [group, setGroup] = useState<GroupObj>();
+  const [update, setUpdate] = useState<boolean>(false);
+  const [musicians, setMusicians] = useState<MusicianObj[]>([]);
+  const [seriesList, setSeriesList] = useState<EventSeriesObj[]>([]);
+  const [apiVersion, setApiVersion] = useState<string>("");
+  const [error, setError] = useState<string>("");
+  const [errorModalShow, setErrorModalShow] = useState<boolean>(false);
+  const [errorEntity, setErrorEntity] = useState<string>("");
+  const [token, setToken] = useState<string>(tokenCookie ? tokenCookie : "");
+  const appVersion = import.meta.env.PACKAGE_VERSION;
+
+  const handleGroupBioChange = () => {
+    setUpdate(!update);
+  };
+
+  const handleError = (error: string, entity: string) => {
+    console.error(error);
+    setError(error);
+    setErrorEntity(entity);
+    setErrorModalShow(true);
+  };
+
+  useEffect(() => {
+    getRoot()
+      .then((tgd): void => {
+        setGroup(tgd.group);
+        setMusicians(tgd.musicians);
+        setSeriesList(tgd.events);
+        setApiVersion(tgd.version);
+      })
+      .catch((error) => {
+        handleError(error.message, "root");
+      });
+  }, []);
+
+  return (
+    <div id="home">
+      <NavBar
+        musicians={musicians}
+        apiVersion={apiVersion}
+        appVersion={appVersion}
+        token={token}
+        setToken={setToken}
+      />
+      <Container id="content" style={{ maxWidth: "1200px", margin: "0 auto" }}>
+        <Group
+          group={group}
+          onBioChange={handleGroupBioChange}
+          setGroup={setGroup}
+          token={token}
+        />
+        <Musicians
+          musicians={musicians}
+          setMusicians={setMusicians}
+          token={token}
+        />
+        <SeriesList
+          seriesList={seriesList}
+          setSeriesList={setSeriesList}
+          token={token}
+        />
+        <ContactForm />
+      </Container>
+      <Footer />
+      <ErrorModal error={error} show={errorModalShow} entity={errorEntity} />
+    </div>
+  );
+}
+
+export default App;