Merge pull request #66 from intive/P2022-1127

P2022-1127 Routing

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/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

@@ -8,8 +8,8 @@ import { Button } from "@components/Button/Button";
 import Input from "@components/Input/Input";
 import { LoadingButton } from "@mui/lab";
 
-import { Pages } from "../../views/pages";
 import { createNewProjectPattern } from "../../validation/patterns.const";
+import { toProjects } from "src/views/routes";
 
 interface NewProjectDialogProps {
   isOpen: boolean;
@@ -45,7 +45,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/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 = [
     {

src/views/Projects/Projects.tsx

@@ -8,6 +8,7 @@ import { ConfirmationDialog } from "@modules/ConfirmationDialog/ConfirmationDial
 import PageHeader from "@modules/PageHeader/PageHeader";
 import ProjectCard from "@components/ProjectCard";
 import ThreeDotsMenu from "@components/ThreeDotsMenu/ThreeDotsMenu";
+import Content from "@components/Content/Content";
 
 let FetchProjectsAPI: any;
 
@@ -22,11 +23,13 @@ async function importApiModule() {
 }
 
 export const Projects = () => {
-  const { t } = useTranslation();
+  const [isLoading, setIsLoading] = useState(true);
   const [projects, setProjects] = useState<any>([]);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [current, setCurrent] = useState(0);
 
+  const { t } = useTranslation();
+
   const deleteProjectHandler = (id: string) => {
     const newProjectsList = projects.filter(
       (element: any) => element.id !== id
@@ -39,59 +42,66 @@ export const Projects = () => {
       await importApiModule();
       const projects = await FetchProjectsAPI.getProjects();
       setProjects(projects);
+
+      setIsLoading(false);
     }
     fetchProjects();
   }, []);
 
   return (
-    <StyledPageWrapper>
-      <ConfirmationDialog
-        confirmHandler={() => {
-          deleteProjectHandler(projects[current].id);
-          setIsDialogOpen(false);
-        }}
-        isOpen={isDialogOpen}
-        handleClose={() => setIsDialogOpen(false)}
-      >
-        {t("deleteProjectWarning")}
-      </ConfirmationDialog>
-      <PageHeader
-        pageTitle={t("projectsViewTitle")}
-        buttonText={t("newProjectBtn")}
-        buttonHandler={() => console.log("works")}
-      />
-      <StyledProjectList>
-        <Grid container spacing={3}>
-          {projects?.map((project: any, id: number) => (
-            <Grid key={id} item xs={12} sm={12} md={6} lg={4} xl={3}>
-              <ProjectCard
-                menuComponent={
-                  <ThreeDotsMenu
-                    menuItems={[
-                      {
-                        id: 0,
-                        icon: <ViewWeekOutlinedIcon />,
-                        label: "Add column",
-                        onClick: () => console.log("column added"),
-                      },
-                      {
-                        id: 1,
-                        icon: <DeleteOutlineIcon />,
-                        label: "Delete project",
-                        onClick: () => {
-                          setIsDialogOpen(true);
-                          setCurrent(id);
+    <Content
+      isLoading={isLoading}
+      noContentToShow={!projects || projects.length === 0}
+    >
+      <StyledPageWrapper>
+        <ConfirmationDialog
+          confirmHandler={() => {
+            deleteProjectHandler(projects[current].id);
+            setIsDialogOpen(false);
+          }}
+          isOpen={isDialogOpen}
+          handleClose={() => setIsDialogOpen(false)}
+        >
+          {t("deleteProjectWarning")}
+        </ConfirmationDialog>
+        <PageHeader
+          pageTitle={t("projectsViewTitle")}
+          buttonText={t("newProjectBtn")}
+          buttonHandler={() => console.log("works")}
+        />
+        <StyledProjectList>
+          <Grid container spacing={3}>
+            {projects?.map((project: any, id: number) => (
+              <Grid key={id} item xs={12} sm={12} md={6} lg={4} xl={3}>
+                <ProjectCard
+                  menuComponent={
+                    <ThreeDotsMenu
+                      menuItems={[
+                        {
+                          id: 0,
+                          icon: <ViewWeekOutlinedIcon />,
+                          label: "Add column",
+                          onClick: () => console.log("column added"),
+                        },
+                        {
+                          id: 1,
+                          icon: <DeleteOutlineIcon />,
+                          label: "Delete project",
+                          onClick: () => {
+                            setIsDialogOpen(true);
+                            setCurrent(id);
+                          },
                         },
-                      },
-                    ]}
-                  />
-                }
-                name={project.name}
-              />
-            </Grid>
-          ))}
-        </Grid>
-      </StyledProjectList>
-    </StyledPageWrapper>
+                      ]}
+                    />
+                  }
+                  name={project.name}
+                />
+              </Grid>
+            ))}
+          </Grid>
+        </StyledProjectList>
+      </StyledPageWrapper>
+    </Content>
   );
 };