merge from main

.eslintrc.json

@@ -19,13 +19,13 @@
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
-  "plugins": ["import", "react", "@typescript-eslint"],
-
+  "plugins": ["import", "react", "@typescript-eslint", "simple-import-sort"],
   "rules": {
+    "prefer-const": "error",
     "react/react-in-jsx-scope": "off",
     "react/jsx-filename-extension": [
       1,
-      { "extensions": [".js", ".jsx", "ts", "tsx"] }
+      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
     ],
     "import/no-unresolved": "off",
     "import/named": "warn",
@@ -42,7 +42,11 @@
           "caseInsensitive": true
         }
       }
-    ]
+    ],
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+    "import/first": "error",
+    "import/newline-after-import": "error"
   },
   "root": true
 }

client/package.json

@@ -8,7 +8,9 @@
     "@fontsource/oxygen-mono": "^4.5.2",
     "@reach/window-size": "^0.16.0",
     "@styled-icons/bootstrap": "^10.34.0",
+    "@styled-icons/boxicons-regular": "^10.38.0",
     "@styled-icons/boxicons-solid": "^10.38.0",
+    "@styled-icons/evaicons-outline": "^10.34.0",
     "@styled-icons/open-iconic": "^10.18.0",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
@@ -20,20 +22,24 @@
     "add": "^2.0.6",
     "axios": "^0.25.0",
     "cypress": "^9.4.1",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
     "jest": "^27.5.1",
+    "moment": "^2.29.3",
     "prettier": "^2.5.1",
     "reach": "^1.0.1",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.0",
+    "react-bootstrap": "^2.3.0",
     "react-dom": "^17.0.2",
     "react-fast-marquee": "^1.3.1",
     "react-full-screen": "^1.1.0",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
+    "react-select": "^5.2.2",
     "styled-components": "^5.3.5",
+    "styled-icons": "^10.45.0",
     "typescript": "^4.5.5",
-    "web-vitals": "^2.1.4",
-    "yarn": "^1.22.18"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

client/src/.eslintrc.json

@@ -0,0 +1,37 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["import", "react", "@typescript-eslint", "simple-import-sort"],
+  "rules": {
+    "prefer-const": "error",
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-filename-extension": [
+      1,
+      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
+    ],
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+    "import/first": "error",
+    "import/newline-after-import": "error",
+    "sort-imports": "off"
+  },
+  "root": false
+}

client/src/App.test.tsx

@@ -1,5 +1,6 @@
-import React from 'react'
 import { render, screen } from '@testing-library/react'
+import React from 'react'
+
 import App from './App'
 
 test('renders learn react link', () => {

client/src/App.tsx

@@ -1,40 +1,25 @@
-import { useState } from 'react'
 import { WindowSize } from '@reach/window-size'
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import { ThemeProvider } from 'styled-components'
-// import { get } from './api/config'
-import { BrowserRouter, Routes, Route } from 'react-router-dom'
-import { FullScreen, useFullScreenHandle } from 'react-full-screen'
+
+import PageEmbed from './components/embed/PageEmbed'
+import LifelineCreationForm from './components/settings/LifelineCreationForm'
 import GlobalStyle, { theme } from './components/ui/GlobalStyle'
-import LanguageCustomization from './components/settings/LanguageCustomizationForm'
-import LifelineCreation from './pages/lifelineCreation'
-import EnterFullScreen from './components/buttons/EnterFullscreen'
-import ExitFullScreen from './components/buttons/ExitFullscreen'
 import Home from './pages/Home'
-function App() {
-  const [showFullscreenButton, setFullscreenButton] = useState(false)
-  const handle = useFullScreenHandle()
+import Settings from './pages/Settings'
 
+function App() {
+  /* Sets the lifeline modules upon load and every defaultLanguage change */
   return (
     <ThemeProvider theme={theme}>
-      <FullScreen
-        handle={handle}
-        onChange={() => setFullscreenButton(!showFullscreenButton)}
-      >
-        <BrowserRouter>
-          <Routes>
-            <Route path="/langForm/*" element={<LanguageCustomization />} />
-            <Route path="/moduleForm/*" element={<LifelineCreation />} />
-            <Route path="/settings/*" element={<LanguageCustomization />} />
-            <Route path="/lifelines/*" element={<LifelineCreation />} />
-            <Route path="/*" element={<Home />} />
-          </Routes>
-        </BrowserRouter>
-        {showFullscreenButton ? (
-          <EnterFullScreen handle={handle.enter} />
-        ) : (
-          <ExitFullScreen handle={handle.exit} />
-        )}
-      </FullScreen>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/settings" element={<Settings />} />
+          <Route path="/lifelines" element={<LifelineCreationForm />} />
+          <Route path="/" element={<Home />} />
+          <Route path="/embed" element={<PageEmbed />} />
+        </Routes>
+      </BrowserRouter>
       <WindowSize>
         {(windowSize) => <GlobalStyle windowSize={windowSize} />}
       </WindowSize>

client/src/api/config.ts

@@ -1,9 +1,10 @@
 import axios, { AxiosResponse } from 'axios'
+
 import { ApiRequestUrl } from './constants'
 
-interface ErrorWrapper {
+export interface ErrorWrapper {
   type: string
-  error: any
+  error: string
 }
 
 const instance = axios.create({

client/src/components/buttons/EnterFullscreen.tsx

@@ -1,6 +1,7 @@
 import { FullscreenEnter } from '@styled-icons/open-iconic'
+import { FullScreenHandle } from 'react-full-screen'
 
-function EnterFullScreen({ handle }: { handle: any }) {
-  return <FullscreenEnter size="2%" onClick={handle} />
+function EnterFullScreen({ handle }: { handle: FullScreenHandle }) {
+  return <FullscreenEnter size="20px" onClick={handle.enter} />
 }
 export default EnterFullScreen

client/src/components/buttons/ExitFullscreen.tsx

@@ -1,13 +1,15 @@
-import styled from 'styled-components'
 import { FullscreenExit } from '@styled-icons/open-iconic'
+import { FullScreenHandle } from 'react-full-screen'
+import styled from 'styled-components'
+
 const ExitButton = styled.div`
   color: white;
 `
 
-function ExitFullScreen({ handle }: { handle: any }) {
+function ExitFullScreen({ handle }: { handle: FullScreenHandle }) {
   return (
     <ExitButton>
-      <FullscreenExit onClick={handle} size="5%" />
+      <FullscreenExit onClick={handle.exit} size="20px" />
     </ExitButton>
   )
 }

client/src/components/buttons/MobileBar.tsx

@@ -0,0 +1,63 @@
+import { Link, useLocation } from 'react-router-dom'
+import styled, { css } from 'styled-components'
+
+const Navbar = styled.div`
+  @media screen and (max-width: 800px) {
+    font-family: ${({ theme }) => theme.secondaryFonts};
+    position: absolute;
+    z-index: 10;
+    top: 0;
+    left: 0;
+    overflow-x: hidden;
+    padding-top: 20px;
+    transform: ${(props) =>
+      props.showMobileNavbar ? 'translateY(0em)' : 'translateY(-60em)'};
+    transition: 0.6s ease;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    background-color: ${({ theme }) => theme.black};
+  }
+`
+
+const StyledLink = styled(Link)`
+  text-decoration: none;
+  color: white;
+  padding-left: 200px;
+  padding-right: 200px;
+  font-weight: bold;
+  transition: 0.2s ease;
+  margin: 0.3em;
+  font-size: 6vw;
+  :hover {
+    background-color: ${({ theme }) => theme.navy};
+  }
+  ${({ selected }) =>
+    selected &&
+    css`
+      background-color: ${({ theme }) => theme.navy};
+    `}
+`
+
+function MobileBar({ showMobileNavbar }: { showMobileNavbar: boolean }) {
+  const location = useLocation()
+  return (
+    <Navbar showMobileNavbar={showMobileNavbar}>
+      <StyledLink to="" selected={location.pathname === '/'}>
+        Clock
+      </StyledLink>
+      <StyledLink to="/lifelines" selected={location.pathname === '/lifelines'}>
+        Lifelines
+      </StyledLink>
+      <StyledLink to="/settings" selected={location.pathname === '/settings'}>
+        Settings
+      </StyledLink>
+    </Navbar>
+  )
+}
+
+export default MobileBar

client/src/components/buttons/Toggle.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import styled from 'styled-components'
+
 const Toggler = styled.div`
   .toggle-button {
     position: relative;

client/src/components/buttons/button.tsx

@@ -0,0 +1,44 @@
+import styled from 'styled-components'
+
+const StyledButton = styled.button`
+  background-color: ${({ theme }) => theme.buttonBackground};
+  border: none;
+  cursor: pointer;
+  text-align: center;
+  text-decoration: none;
+  margin: 4px 2px;
+  display: inline-block;
+  color: white;
+  border-radius: 5px;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 10px 15px;
+  font-family: ${({ theme }) => theme.secondaryFonts};
+  &:hover {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.06) 0 0);
+  }
+`
+
+// const HideButton = styled(StyledButton)`
+//     background: ${({ theme }) => theme.background };
+//     border: 1px solid gray;
+//     cursor: pointer;
+//     text-align: center;
+//     text-decoration: none;
+//     margin: 4px 2px;
+//     display: inline-block;
+//     color: ${({ theme }) => theme.text };
+//     border-radius: 3px;
+//     font-size: 12px;
+//     padding: 6.5px 20px;
+//     font-weight: 500;
+//     font-family:  ${({ theme }) => theme.secondaryFonts };
+//     &:hover {
+//        background-color: #F1F1F1;
+//     }
+// `;
+
+const Button = ({ buttonLabel }: { buttonLabel: string }) => {
+  return <StyledButton>{buttonLabel}</StyledButton>
+}
+export default Button