creating own route component and adjusting header

src/DTOs/User.tsx

@@ -0,0 +1,5 @@
+export interface IUser {
+  name: string;
+  username: string;
+  email: string;
+}

src/DTOs/index.tsx

@@ -0,0 +1,2 @@
+export * from './User';
+export * from './Minute';

src/components/Header/Header.tsx → src/components/Header/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 
 import addIcon from '../../assets/add_icon.svg';
 import homeIcon from '../../assets/home_icon.svg';
@@ -8,10 +9,19 @@ import logoutIcon from '../../assets/logout_icon.svg';
 import { StyledHeader } from './styles';
 
 const Header = () => {
+  const history = useHistory();
+
+  const handleNavigateToHome = () => {
+    history.push('/');
+  };
+
   return (
     <StyledHeader>
       <section className="shortOptions">
-        <img src={homeIcon} alt="" />
+        <button type="button" onClick={handleNavigateToHome}>
+          <img src={homeIcon} alt="" />
+        </button>
+
         <img src={addIcon} alt="" />
       </section>
 

src/components/Header/styles.ts

@@ -33,4 +33,9 @@ export const StyledHeader = styled.header`
       width: 14.375rem;
     }
   }
+
+  button {
+    border: none;
+    background: none;
+  }
 `;

src/components/Route/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import Header from 'components/Header';
+
+import { Route as ReactRoute } from 'react-router-dom';
+
+interface RouteProps {
+  component: Function;
+  path: string;
+  exact?: boolean;
+  isPrivate?: boolean;
+}
+
+const Route = ({ component: Component, isPrivate, ...rest }: RouteProps) => {
+  return (
+    <ReactRoute
+      {...rest}
+      render={() => {
+        return (
+          <>
+            {isPrivate && <Header />}
+            <Component />
+          </>
+        );
+      }}
+    />
+  );
+};
+
+Route.defaultProps = {
+  exact: false,
+  isPrivate: false,
+};
+
+export default Route;

src/contexts/AuthContext.tsx

@@ -0,0 +1,35 @@
+import React, { createContext, useState } from 'react';
+
+import { IUser } from 'DTOs';
+
+interface IAuthProvider {
+  children: React.ReactNode;
+}
+
+interface IAuthContextData {
+  user: any;
+  setUser: Function;
+}
+
+export const AuthContext = createContext({} as IAuthContextData);
+
+export const AuthProvider: React.FC<IAuthProvider> = ({
+  children,
+}: IAuthProvider) => {
+  const [user, setUser] = useState<IUser>({
+    name: '',
+    username: '',
+    email: '',
+  });
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        setUser,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};

src/contexts/MainContext.tsx

@@ -5,7 +5,7 @@ import {
   IAddressAndHour,
   IProjectInfo,
   ISubject,
-} from 'pages/Main/components/MinuteViewer/components/Minute/DTOs';
+} from 'DTOs';
 
 interface IMainProvider {
   children: React.ReactNode;

src/pages/Home/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { Container } from './styles';
+
+const Home = () => {
+  const history = useHistory();
+
+  const handleNavigate = () => {
+    history.push('/minute');
+  };
+
+  return (
+    <Container>
+      Home asd123 12312
+      <button type="button" onClick={handleNavigate}>
+        Teste
+      </button>
+    </Container>
+  );
+};
+
+export default Home;

src/pages/Home/styles.ts

@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+
+export const Container = styled.div``;

src/pages/LandingPage/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { ReactComponent as WorkInProgress } from 'assets/workInProgress.svg';
+
+import { Container } from './styles';
+
+const LandingPage = () => {
+  return (
+    <Container>
+      <h1>LandingPage</h1>
+      <p>Working in progress</p>
+      <WorkInProgress />
+    </Container>
+  );
+};
+
+export default LandingPage;

src/pages/LandingPage/styles.ts

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  svg {
+    max-width: 40rem;
+    width: 100%;
+  }
+`;

src/pages/Main/components/MinuteViewer/components/Minute/components/GeneralInfo/index.tsx

@@ -3,10 +3,9 @@ import moment from 'moment';
 
 import iacitLogo from 'assets/iacit_logo.jpg';
 
+import { IAddressAndHour } from 'DTOs';
 import { Container } from './styles';
 
-import { IAddressAndHour } from '../../DTOs';
-
 interface IGeneralInfoProps {
   addressAndHour: IAddressAndHour;
 }

src/pages/Main/components/MinuteViewer/components/Minute/components/Project/index.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 
+import { IProjectInfo } from 'DTOs';
 import { Container } from './styles';
 
-import { IProjectInfo } from '../../DTOs';
-
 interface IProjectProps {
   projectInfo: IProjectInfo;
 }

src/pages/Main/components/MinuteViewer/components/Minute/components/Subjects/index.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { Table } from 'antd';
 
+import { ISubject } from 'DTOs';
 import { Container } from './styles';
 
-import { ISubject } from '../../DTOs';
-
 interface ISubjectsProp {
   subjects: Array<ISubject>;
   distributions: Array<String>;

src/pages/Main/components/MinuteViewer/components/Minute/components/Topics/index.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 
+import { ITopic } from 'DTOs';
 import { Container } from './styles';
 
-import { ITopic } from '../../DTOs';
-
 interface ITopicsProps {
   topics: Array<ITopic>;
 }

src/pages/Main/components/MinuteViewer/components/Minute/index.tsx

@@ -1,15 +1,14 @@
 /* eslint-disable react/prop-types */
 import React, { PureComponent } from 'react';
 
+import { IMinute } from 'DTOs';
 import GeneralInfo from './components/GeneralInfo';
 import Project from './components/Project';
 import Topics from './components/Topics';
 import Subjects from './components/Subjects';
 
 import { Container } from './styles';
 
-import { IMinute } from './DTOs';
-
 interface IPrintProps {
   minute: IMinute;
 }

src/pages/Main/components/Subjects/components/SubjectModal/index.tsx

@@ -4,10 +4,9 @@ import Button from 'components/Button/Button';
 import Input from 'components/Input/Input';
 import TextArea from 'components/TextArea/TextArea';
 
+import { ISubject } from 'DTOs';
 import { Container } from './styles';
 
-import { ISubject } from '../../../MinuteViewer/components/Minute/DTOs';
-
 interface ISubjectModalProps {
   setOpenSubjectModal: Function;
   setSubjects: Function;

src/pages/Main/components/Topics/Topics.tsx

@@ -8,12 +8,13 @@ import Input from 'components/Input/Input';
 import Button from 'components/Button/Button';
 import BoxInformation from 'components/BoxInformation/BoxInformation';
 import ScrollBox from 'components/ScrollBox/ScrollBox';
+
+import { ITopic } from 'DTOs';
+
 import addIcon from '../../../../assets/add_icon.svg';
 
 import StyledTopics from './styles';
 
-import { ITopic } from '../MinuteViewer/components/Minute/DTOs';
-
 const Topics = () => {
   const { topics, setTopics } = useContext(MainContext);
 

src/pages/Main/index.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useState } from 'react';
 
 import { MainContext, MainProvider } from 'contexts/MainContext';
 
-import Header from 'components/Header/Header';
+import { IMinute } from 'DTOs';
 import Initial from './components/Initial/Initial';
 import ProjectInformation from './components/ProjectInformation/ProjectInformation';
 import OptionButtons from './components/OptionButtons';
@@ -16,10 +16,6 @@ import ScheduleModal from './components/ScheduleModal';
 
 import Container from './styles';
 
-import {
-  IMinute,
-} from './components/MinuteViewer/components/Minute/DTOs';
-
 const Main = () => {
   const {
     topics,
@@ -46,7 +42,6 @@ const Main = () => {
 
   return (
     <>
-      <Header />
       <MainProvider>
         {showMinute && (
           <MinuteViewer setShowMinute={setShowMinute} minute={minute} />

src/pages/NewPassword/index.tsx

@@ -6,7 +6,7 @@ import Logo from 'assets/logo.svg';
 
 import StyledNewPassword from './styles';
 
-const index = () => {
+const NewPassword = () => {
     return (
       <StyledNewPassword>
         <img src={Logo} alt="Logo Typext" />
@@ -38,4 +38,4 @@ const index = () => {
     );
 };
 
-export default index;
+export default NewPassword;

src/routes.tsx

@@ -1,23 +1,33 @@
 import React from 'react';
 import RecoveryPassword from 'pages/RecoveryPassword';
-import { Switch, Route, BrowserRouter } from 'react-router-dom';
+import { Switch, BrowserRouter } from 'react-router-dom';
 
+import { getMode } from 'services/api';
+
+import Route from 'components/Route';
+
+import LandingPage from 'pages/LandingPage';
 import NewPassword from 'pages/NewPassword';
 import RegisterNewUser from 'pages/RegisterNewUser';
+import Home from 'pages/Home';
 import Main from './pages/Main';
 import Login from './pages/Login';
 import InviteUsers from './pages/InviteUsers';
 
 export default function Routes() {
+  const isNotProduction = getMode();
+
   return (
     <BrowserRouter>
       <Switch>
-        <Route path="/" exact component={Main} />
-        <Route path="/new-password" exact component={NewPassword} />
-        <Route path="/recovery-password" exact component={RecoveryPassword} />
-        <Route path="/login" exact component={Login} />
-        <Route path="/register-new-user" exact component={RegisterNewUser} />
-        <Route path="/invite-users" exact component={InviteUsers} />
+        {isNotProduction && <Route path="/" exact component={LandingPage} />}
+        <Route path="/home" exact isPrivate component={Home} />
+        <Route path="/minute" isPrivate component={Main} />
+        <Route path="/reset" component={NewPassword} />
+        <Route path="/recovery" component={RecoveryPassword} />
+        <Route path="/login" component={Login} />
+        <Route path="/register" component={RegisterNewUser} />
+        <Route path="/invite" component={InviteUsers} />
       </Switch>
     </BrowserRouter>
   );

src/services/auth.ts

@@ -0,0 +1,7 @@
+export function getUser(): any {
+  const storegedUser = <string>localStorage.getItem('tpxt_user');
+
+  const user = JSON.parse(storegedUser);
+
+  return user;
+}