Merge branch 'main' of https://github.com/intive/patronage22-bialysto…

…k-js-simple-jira into P2022-1195_basic-modal-corrections

src/App.tsx

@@ -1,28 +1,78 @@
+import { useState } from "react";
+import { Routes, Route, useParams, Navigate, Link } from "react-router-dom";
 import { ThemeProvider } from "@mui/material/styles";
 import { theme } from "./theme/mainTheme";
-import { Routes, Route } from "react-router-dom";
 import { Home } from "./views/Home/Home";
-import { SecondPage } from "./views/SecondPage/SecondPage";
 import { Projects } from "./views/Projects/Projects";
 import { Board } from "./views/Board/Board";
 import Navbar from "./components/Navbar/Navbar";
 import { Owl_components } from "./views/Owl/Owl";
-import { Owl_componentsInput } from "./views/OwlInput/OwlInput";
+import {
+  toProject,
+  toHome,
+  toIssue,
+  toBoard,
+  toProjects,
+} from "./views/routes";
 
-const App = () => (
-  <>
+const Boards = () => {
+  const { projectID } = useParams();
+
+  return (
+    <div style={{ marginTop: 100 }}>
+      <h1>Project/Boards list</h1>
+      {!!projectID && (
+        <>
+          <p>Project: {projectID}</p>
+          <Link to={toProjects}>Go back to Projects</Link>
+          <Link style={{ margin: 5 }} to={toBoard({ projectID, boardID: "2" })}>
+            Go to Board 2
+          </Link>
+        </>
+      )}
+    </div>
+  );
+};
+
+const Issue = () => {
+  const { projectID, boardID, issueID } = useParams();
+
+  return (
+    <div style={{ marginTop: 100 }}>
+      <h1>Issue page</h1>
+      {!!projectID && !!boardID && !!issueID && (
+        <>
+          <p>Project: {projectID}</p>
+          <p>Board: {boardID}</p>
+          <p>Issue: {issueID}</p>
+        </>
+      )}
+    </div>
+  );
+};
+
+const App = () => {
+  const [token, setToken] = useState(true);
+
+  return (
     <ThemeProvider theme={theme}>
       <Navbar />
-      <Routes>
-        <Route index element={<Home />} />
-        <Route path='second' element={<SecondPage />} />
-        <Route path='projects' element={<Projects />} />
-        <Route path='projects/:name' element={<Board />} />
-        <Route path='owl' element={<Owl_components />} />
-        <Route path='owlinput' element={<Owl_componentsInput />} />
-      </Routes>
+      {!token ? (
+        <Owl_components
+        // setToken={setToken}
+        />
+      ) : (
+        <Routes>
+          <Route path={toHome} element={<Home />} />
+          <Route path={toProjects} element={<Projects />} />
+          <Route path={toProject()} element={<Boards />} />
+          <Route path={toBoard()} element={<Board />} />
+          <Route path={toIssue()} element={<Issue />} />
+          <Route path='*' element={<Navigate to={toProjects} />} />
+        </Routes>
+      )}
     </ThemeProvider>
-  </>
-);
+  );
+};
 
 export default App;

src/components/Content/Content.styled.tsx

@@ -0,0 +1,13 @@
+import { styled } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
+
+export const LoaderWrapper = styled(Box)(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  marginTop: 300,
+}));
+
+export const StyledLoader = styled(CircularProgress)(({ theme }) => ({
+  color: theme.palette.grey[600],
+}));

src/components/Content/Content.tsx

@@ -0,0 +1,27 @@
+import { Navigate } from "react-router-dom";
+
+import { toHome } from "../../views/routes";
+import { LoaderWrapper, StyledLoader } from "./Content.styled";
+interface ContentProps {
+  isLoading: boolean;
+  noContentToShow: boolean;
+  children: JSX.Element;
+}
+
+const Content = ({ isLoading, noContentToShow, children }: ContentProps) => {
+  if (isLoading) {
+    return (
+      <LoaderWrapper>
+        <StyledLoader size={50} />
+      </LoaderWrapper>
+    );
+  }
+
+  if (noContentToShow) {
+    return <Navigate to={toHome} />;
+  }
+
+  return children;
+};
+
+export default Content;

src/components/ProjectCard/index.tsx

@@ -1,5 +1,6 @@
 import CardActions from "@mui/material/CardActions";
 import { Link } from "react-router-dom";
+import { toProject } from "src/views/routes";
 
 import {
   Background,
@@ -15,7 +16,7 @@ interface ProjectCardProps {
 
 const ProjectCard = ({ name, menuComponent }: ProjectCardProps) => (
   <StyledCard>
-    <Link to={`/projects/${name}`}>
+    <Link to={toProject({ projectID: name })}>
       <Background />
     </Link>
     <Wrapper>

src/components/ThreeDotsMenu/ThreeDotsMenu.style.tsx

@@ -4,23 +4,21 @@ import IconButton from "@mui/material/IconButton";
 
 export const StyledMenu = styled(Menu)(({ theme }) => ({
   "& .MuiPaper-root": {
-    padding: "10px 0px",
-    color: theme.palette.grey["600"],
     borderRadius: 4,
-    boxShadow: "0px 1px 2px rgb(98 98 98 / 0.24)",
+    boxShadow: theme.customShadows.tertiary,
   },
   "& .MuiSvgIcon-root": {
     color: theme.palette.grey["500"],
     marginRight: 4,
   },
+  "& .MuiTypography-root": {
+    color: theme.palette.grey["600"],
+  },
   "& .MuiList-root": {
     padding: 0,
   },
   "& .MuiButtonBase-root": {
-    padding: "2px 8px",
-  },
-  "& .MuiButtonBase-root:not(:last-of-type)": {
-    marginBottom: 8,
+    padding: "6px 8px 6px 8px",
   },
 }));
 

src/components/ThreeDotsMenu/ThreeDotsMenu.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
 import MenuItem from "@mui/material/MenuItem";
 
 import { StyledMenu, StyledIconButton } from "./ThreeDotsMenu.style";
@@ -66,7 +66,7 @@ export default function ThreeDotsMenu({ menuItems }: ThreeDotsMenuProps) {
             }}
           >
             {item.icon}
-            {item.label}
+            <Typography>{item.label}</Typography>
           </MenuItem>
         ))}
       </StyledMenu>

src/custom.d.ts

@@ -0,0 +1,6 @@
+declare module "*.svg" {
+  import React = require("react");
+  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}

src/modules/NewProjectDialog/NewProjectDialog.tsx

@@ -15,8 +15,8 @@ import {
   NewProjectDialogContent,
 } from "./NewProjectDialog.style";
 
-import { Pages } from "../../views/pages";
 import { createNewProjectPattern } from "../../validation/patterns.const";
+import { toProjects } from "src/views/routes";
 
 interface NewProjectDialogProps {
   isOpen: boolean;
@@ -52,7 +52,7 @@ export default function NewProjectDialog({
       return;
     }
     changeViewTimeout = setTimeout(() => {
-      !board && navigate(Pages.Projects);
+      !board && navigate(toProjects);
       setIsLoading(false);
       setIsOpen(false);
     }, 1000);

src/modules/PageHeader/PageHeader.tsx

@@ -9,6 +9,7 @@ import {
   StyledGridItem,
 } from "./PageHeader.style";
 import { CardActions } from "@mui/material";
+import { toProjects } from "src/views/routes";
 
 export interface SectionProps {
   pageTitle: string;
@@ -30,7 +31,7 @@ export default function PageHeader({
       <StyledGrid container>
         <StyledGridItem>
           {returnLink && (
-            <StyledLink to='/projects'>
+            <StyledLink to={toProjects}>
               <SubTitle>{returnLink}</SubTitle>
             </StyledLink>
           )}

src/theme/mainTheme.ts

@@ -13,13 +13,15 @@ declare module "@mui/material/styles" {
     customShadows: {
       primary: string;
       secondary: string;
+      tertiary: string;
     };
   }
 
   interface ThemeOptions {
     customShadows?: {
       primary?: string;
       secondary?: string;
+      tertiary?: string;
     };
   }
 }
@@ -83,6 +85,7 @@ theme = createTheme(theme, {
   customShadows: {
     primary: "0px 1px 3px rgba(98, 98, 98, 0.24)",
     secondary: "0px 8px 16px rgba(98, 98, 98, 0.24)",
+    tertiary: "0px 1px 2px rgba(98, 98, 98, 0.24)",
   },
 });
 

src/views/Board/Board.tsx

@@ -18,7 +18,7 @@ export const Board = () => {
   const { t } = useTranslation();
   const [boardNumberAlert, setBoardNumberAlert] = useState(false);
   const [boardNameAlert, setBoardNameAlert] = useState(false);
-  const { name } = useParams();
+  const { boardID: name } = useParams();
 
   const menuOptions = [
     {