feat: UI improvements

.eslintrc.yml

@@ -35,3 +35,5 @@ rules:
         caseInsensitive: true
       newlines-between: always-and-inside-groups
   react/no-unescaped-entities: "off"
+  no-unreachable:
+    - warn

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run lint:fix
+npm run format:write

README.md

@@ -1,14 +1,21 @@
-# ade-ufc-onsevoitquand [![Netlify Status](https://api.netlify.com/api/v1/badges/2fd7a0b6-ea48-4ed6-b807-9c0a91749db4/deploy-status)](https://app.netlify.com/sites/admiring-hamilton-f49fca/deploys)
+# ade-ufc-onsevoitquand [![Netlify Status](https://api.netlify.com/api/v1/badges/2fd7a0b6-ea48-4ed6-b807-9c0a91749db4/deploy-status)](https://app.netlify.com/sites/ade-ufc-onsevoitquand/deploys)
 
 An easy way to find when you can meet your mates in the University of Franche-Comté.
 
 ---
 
 Trouver un créneau pour se voir entre étudiants de l'UFC.
 
+## Development
+
+Run `npm install` then `npm start` to launch the development version, powered by [Create React App](https://create-react-app.dev/)
+
 ## Deploy
 
-To avoid CORS issues, the ADE API has to be proxied by the app. Nginx config for reference:
+To avoid CORS issues, the ADE API has to be proxied by the app. 
+The provided `netlify.toml` config includes this functionnality.  
+
+If you need it, here is the nginx config for reference:
 ```nginx
     location /api/v1/ {
         rewrite ^/api/v1/(.*)$ /jsp/custom/ufc/$1 break;

netlify.toml

@@ -0,0 +1,6 @@
+
+[[redirects]]
+  from = "/api/v1/*"
+  to = "https://sedna.univ-fcomte.fr/jsp/custom/ufc/:splat"
+  status = 200
+  force = true # COMMENT: ensure that we always redirect

package.json

@@ -3,6 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@mui/icons-material": "^5.2.5",
+    "@mui/material": "^5.2.6",
+    "@mui/styles": "^5.2.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -12,13 +17,13 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-query": "^3.24.3",
-    "react-scripts": "4.0.3",
     "react-select": "^5.0.0",
     "react-tooltip": "^4.2.21",
     "sass": "^1.41.1",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
+    "prepare": "husky install",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
@@ -29,7 +34,8 @@
     "format:write": "prettier --write ."
   },
   "prettier": {
-    "printWidth": 100
+    "printWidth": 100,
+    "useTabs": true
   },
   "browserslist": {
     "production": [
@@ -46,6 +52,13 @@
   "devDependencies": {
     "eslint": "^7.32.0",
     "http-proxy-middleware": "^2.0.1",
-    "prettier": "^2.4.1"
+    "husky": "^7.0.4",
+    "prettier": "^2.4.1",
+    "react-scripts": "5.0.0"
+  },
+  "pnpm": {
+    "overrides": {
+      "nth-check@<2.0.1": ">=2.0.1"
+    }
   }
 }

src/App.jsx

@@ -1,98 +1,58 @@
-import queryString from "query-string";
-import { React, useEffect, useState } from "react";
+import ShareIcon from "@mui/icons-material/Share";
+import Fab from "@mui/material/Fab";
+import { React, useState } from "react";
 import { QueryClientProvider } from "react-query";
 import ReactTooltip from "react-tooltip";
 
 import "./App.scss";
-import DeleteGroups from "./components/GroupeSelector/DeleteGroups";
-import GroupSelector from "./components/GroupeSelector/GroupSelector";
-import ControlledCheckbox from "./components/miscellaneous/ControlledCheckbox";
-import ControlledInput from "./components/miscellaneous/ControlledInput";
-import Footer from "./components/miscellaneous/Footer";
-import Title from "./components/miscellaneous/Title";
+import HeaderBar from "./components/miscellaneous/HeaderBar";
 import CompareSchedule from "./components/Schedule/CompareSchedule";
-import ShareUrl from "./components/Share/ShareUrl";
+import SettingsDialog from "./components/Setttings/SettingsDialog";
+import LoadURLConfig from "./components/Share/LoadURLConfig";
+import { shareGroupsUrl } from "./components/Share/share";
 import queryClient from "./utils/queryClient";
 import { useLocalStorage } from "./utils/useLocalStorage";
 
 function App() {
-  const [config, setConfig] = useLocalStorage("config", { isCompact: true, nbWeeks: 2 });
-  const [groups, setGroups] = useLocalStorage("saved-groups", {});
-  const [error, setError] = useState();
-
-  useEffect(() => {
-    console.debug("test");
-    if (window.location.search !== "") {
-      let newGroups;
-      try {
-        const { groups: JSONGroups } = queryString.parse(window.location.search);
-        newGroups = JSON.parse(JSONGroups);
-        localStorage.setItem("saved-groups", JSON.stringify(newGroups));
-        window.location.search = "";
-      } catch (error) {
-        console.error(error, "groups:", newGroups);
-        setError(
-          "Impossible de charger les groupes depuis le lien, essaie en copiant-collant directement le lien dans ton navigateur, ou ajoute les groupes manuellement"
-        );
-      }
-    }
-  }, []);
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      <header>
-        <Title />
-
-        <div className="buttons">
-          <GroupSelector
-            groupId={0}
-            addGroup={(group) => {
-              console.info("Adding group", group);
-              setGroups((oldList) => ({ ...oldList, [group.id]: group.name }));
-              if (error) {
-                setError(false);
-              }
-            }}
-          />
-          <hr />
-          <DeleteGroups groups={groups} setGroups={setGroups} />
-          <hr />
-          <ShareUrl groups={groups} />
-
-          <div id="config">
-            <ControlledCheckbox
-              id="config-compact"
-              value={config.isCompact}
-              handleInput={(ev) => setConfig((old) => ({ ...old, isCompact: ev.target.checked }))}
-              data-tip="Cache les heures libres dans tous les emplois du temps en début et en fin de journée"
-            >
-              <>Économiser de la place</>
-            </ControlledCheckbox>
-            <ControlledInput
-              id="config-weeks"
-              value={config.nbWeeks}
-              handleInput={(ev) =>
-                setConfig((old) => ({ ...old, nbWeeks: parseInt(ev.target.value) }))
-              }
-              data-tip="Nombre de semaines à afficher dans la comparaison"
-            >
-              <>Nombre de semaines</>
-            </ControlledInput>
-          </div>
-
-          {error && <pre className="error">{error}</pre>}
-        </div>
-      </header>
-
-      <main>
-        <CompareSchedule groups={groups} config={config} />
-      </main>
-
-      <Footer />
-
-      <ReactTooltip multiline effect="solid" />
-    </QueryClientProvider>
-  );
+	const [config, setConfig] = useLocalStorage("config", { nbWeeks: 2 });
+	const [groups, setGroups] = useLocalStorage("saved-groups-v2", {});
+
+	const [isSettingsModalOpened, setIsSettingsModalOpened] = useState(false);
+
+	const loadGroups = window.location.search !== "";
+
+	if (loadGroups) {
+		return <LoadURLConfig originalConfig={config} originalGroups={groups} />;
+	}
+
+	return (
+		<QueryClientProvider client={queryClient}>
+			<HeaderBar openSettings={() => setIsSettingsModalOpened(true)} />
+
+			<main>
+				<CompareSchedule groups={groups} config={config} />
+			</main>
+
+			<SettingsDialog
+				open={isSettingsModalOpened}
+				onClose={() => setIsSettingsModalOpened(false)}
+				config={config}
+				groups={groups}
+				setConfig={setConfig}
+				setGroups={setGroups}
+			/>
+
+			<Fab
+				color="primary"
+				sx={{ position: "fixed", bottom: 16, right: 16 }}
+				onClick={() => shareGroupsUrl(groups)}
+			>
+				<ShareIcon />
+			</Fab>
+
+			<ReactTooltip multiline effect="solid" />
+		</QueryClientProvider>
+	);
 }
 
 export default App;