Merge pull request #16 from Typext/feature/own-route-component-and-header-adjusts

creating own route component and adjusting header

Author: MatheusCampos-450

src/pages/Main/components/MinuteViewer/components/Minute/DTOs/index.ts renamed to src/DTOs/Minute.tsx

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

src/DTOs/User.tsx

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

src/DTOs/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/assets/workInProgress.svg

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

src/components/Header/Header.tsx renamed to src/components/Header/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/components/Header/styles.ts

@@ -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/components/Route/index.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/contexts/AuthContext.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;