Frontend file structure refactor (#231)

* chore(frontend): rearranged file structure for better consistency

* chore: remove unused packages

* chore(frontend): rearranged file structure for better consistency

frontend/package.json

@@ -22,11 +22,9 @@
     "papaparse": "^5.4.1",
     "react": "^17.0.2",
     "react-audio-player": "^0.17.0",
-    "react-dnd": "^16.0.1",
     "react-dom": "^17.0.2",
     "react-firebase-hooks": "^3.0.4",
     "react-flow-renderer": "^10.3.16",
-    "react-loading-skeleton": "^2.2.0",
     "react-moveable": "0.29.0",
     "react-router-dom": "^5.2.0",
     "typescript": "^4.3.5",

frontend/src/containers/App.jsx → frontend/src/App.jsx

@@ -1,18 +1,18 @@
 import { ThemeProvider } from "@material-ui/core";
 import "normalize.css";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
-import AuthenticationContextProvider from "../context/AuthenticationContextProvider";
-import ScenarioContextProvider from "../context/ScenarioContextProvider";
-import SceneContextProvider from "../context/SceneContextProvider";
-import AccessLevel from "../enums/route.access.level";
-import ProtectedRoute from "../firebase/ProtectedRoute";
-import "../styling/style.scss";
-import DashboardPage from "./pages/Dashboard/DashboardPage";
-import LoginPage from "./pages/LoginPage";
-import ManageGroupsPage from "./pages/ManageGroups/ManageGroupsPage";
-import PlayScenarioResolver from "./pages/PlayScenarioPage/PlayScenarioResolver";
-import ScenarioSelectionPage from "./pages/ScenarioSelectionPage";
-import { ScenePage } from "./pages/SceneSelectionPage";
+import AuthenticationContextProvider from "./context/AuthenticationContextProvider";
+import ScenarioContextProvider from "./context/ScenarioContextProvider";
+import SceneContextProvider from "./context/SceneContextProvider";
+import AccessLevel from "./enums/route.access.level";
+import ProtectedRoute from "./firebase/ProtectedRoute";
+import "./styles/style.scss";
+import DashboardPage from "./features/dashboard/DashboardPage";
+import LoginPage from "./features/login/LoginPage/LoginPage";
+import ManageGroupsPage from "./features/groups/ManageGroupsPage";
+import PlayScenarioResolver from "./features/playScenario/PlayScenarioResolver";
+import ScenarioSelectionPage from "./features/scenarioSelection/ScenarioSelectionPage";
+import { ScenePage } from "./features/sceneSelection/SceneSelectionPage";
 import theme from "./theme/App.theme";
 
 export default function App() {

frontend/src/components/CreateScenarioCard.jsx → frontend/src/components/CreateScenarioCard/CreateScenarioCard.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import Button from "@material-ui/core/Button";
-import styles from "../styling/CreateScenarioCard.module.scss";
+import styles from "./CreateScenarioCard.module.scss";
 
 export default function CreateScenarioCard({ onCreate, onClose }) {
   const [name, setName] = useState("default name");

frontend/src/components/DashedCard.jsx

@@ -1,5 +1,5 @@
 import { Box } from "@material-ui/core";
-import styles from "../styling/ListContainer.module.scss";
+import styles from "./ListContainer/ListContainer.module.scss";
 
 /**
  * Component used to represent a card with a dashed border, used to indicate that a new card can be created.

frontend/src/components/ListContainer.jsx → frontend/src/components/ListContainer/ListContainer.jsx

@@ -4,10 +4,10 @@ import { Box } from "@material-ui/core";
 import ImageList from "@material-ui/core/ImageList";
 import ImageListItem from "@material-ui/core/ImageListItem";
 
-import Thumbnail from "containers/pages/AuthoringTool/Components/Thumbnail";
-import DashedCard from "./DashedCard";
+import Thumbnail from "features/authoring/components/Thumbnail";
+import DashedCard from "../DashedCard";
 
-import styles from "../styling/ListContainer.module.scss";
+import styles from "./ListContainer.module.scss";
 import useStyles from "./component.styles";
 
 /**

frontend/src/components/ScreenContainer.jsx → frontend/src/components/ScreenContainer/ScreenContainer.jsx

@@ -1,4 +1,4 @@
-import styles from "../styling/ScreenContainer.module.scss";
+import styles from "./ScreenContainer.module.scss";
 
 /**
  * Component used to encapsulate the entire application.

frontend/src/components/ShareModal.jsx → frontend/src/components/ShareModal/ShareModal.jsx

@@ -3,8 +3,8 @@ import Button from "@material-ui/core/Button";
 import Dialog from "@material-ui/core/Dialog";
 import Typography from "@material-ui/core/Typography";
 import { useContext, useState } from "react";
-import ScenarioContext from "../context/ScenarioContext";
-import styles from "../styling/ShareModal.module.scss";
+import ScenarioContext from "../../context/ScenarioContext";
+import styles from "./ShareModal.module.scss";
 
 /**
  * Component used to a display a share model on the screen, conisting of a copiable link and a button.

frontend/src/components/SideBar.jsx → frontend/src/components/SideBar/SideBar.jsx

@@ -1,14 +1,14 @@
 import Button from "@material-ui/core/Button";
 import { useContext, useState } from "react";
 import { Link, useHistory } from "react-router-dom";
-import AuthenticationContext from "../context/AuthenticationContext";
-import ScenarioContext from "../context/ScenarioContext";
-import AccessLevel from "../enums/route.access.level";
-import { useDelete, usePost } from "../hooks/crudHooks";
-import styles from "../styling/SideBar.module.scss";
-import HelpButton from "./HelpButton";
-import CreateScenerioCard from "./CreateScenarioCard";
-import DeleteModal from "./DeleteModal";
+import AuthenticationContext from "../../context/AuthenticationContext";
+import ScenarioContext from "../../context/ScenarioContext";
+import AccessLevel from "../../enums/route.access.level";
+import { useDelete, usePost } from "../../hooks/crudHooks";
+import styles from "./SideBar.module.scss";
+import HelpButton from "../HelpButton";
+import CreateScenerioCard from "../CreateScenarioCard/CreateScenarioCard";
+import DeleteModal from "../DeleteModal";
 
 /**
  * Component used for navigation and executing actions located at the left side of the screen.

frontend/src/components/SpeechboxArrow.jsx → frontend/src/components/SpeechboxArrow/SpeechboxArrow.jsx

@@ -1,4 +1,4 @@
-import Triangle from "components/Triangle";
+import Triangle from "components/SpeechboxArrow/Triangle";
 import React, { useEffect } from "react";
 
 const SpeechTextboxArrow = React.memo(

frontend/src/components/TopBar.jsx → frontend/src/components/TopBar/TopBar.jsx

@@ -2,11 +2,11 @@ import Button from "@material-ui/core/Button";
 import { useContext, useState } from "react";
 import { Link, useHistory } from "react-router-dom";
 
-import BackModal from "../containers/pages/AuthoringTool/BackModal";
-import AuthoringToolContext from "../context/AuthoringToolContext";
-import ScenarioContext from "../context/ScenarioContext";
-import SceneContext from "../context/SceneContext";
-import styles from "../styling/TopBar.module.scss";
+import BackModal from "../../features/authoring/components/BackModal/BackModal";
+import AuthoringToolContext from "../../context/AuthoringToolContext";
+import ScenarioContext from "../../context/ScenarioContext";
+import SceneContext from "../../context/SceneContext";
+import styles from "./TopBar.module.scss";
 
 /**
  * Component used for navigation and executing actions located at the top of the screen.