Merge pull request #14 from Typext/feature/implementing-use-context

Feature/implementing use context

Author: hsousadev

src/contexts/MainContext.tsx

@@ -1,14 +1,64 @@
-import React, { createContext } from 'react';
+import React, { createContext, useState } from 'react';
 
-interface IMainContext {
+import {
+  ITopic,
+  IAddressAndHour,
+  IProjectInfo,
+  ISubject,
+} from 'pages/Main/components/MinuteViewer/components/Minute/DTOs';
+
+interface IMainProvider {
   children: React.ReactNode;
 }
 
-export const MainContext = createContext({});
+interface IMainContextData {
+  topics: Array<ITopic>;
+  setTopics: Function;
+  showSchedule: Boolean;
+  setShowSchedule: Function;
+  addressAndHour: IAddressAndHour;
+  setAddressAndHour: Function;
+  projectInfo: IProjectInfo;
+  setProjectInfo: Function;
+  subjects: ISubject[];
+  setSubjects: Function;
+  distributions: string[];
+  setDistributions: Function;
+}
+
+export const MainContext = createContext({} as IMainContextData);
+
+export const MainProvider: React.FC<IMainProvider> = ({ children }: IMainProvider) => {
+  const [topics, setTopics] = useState<ITopic[]>([]);
+  const [showSchedule, setShowSchedule] = useState(false);
+  const [addressAndHour, setAddressAndHour] = useState<IAddressAndHour>({
+    local: '',
+    startDate: '',
+    startHour: '',
+  });
+  const [projectInfo, setProjectInfo] = useState<IProjectInfo>({
+    projectName: '',
+    members: [],
+  });
+  const [subjects, setSubjects] = useState<ISubject[]>([]);
+  const [distributions, setDistributions] = useState<string[]>([]);
 
-export const MainProvider: React.FC<IMainContext> = ({ children }: IMainContext) => {
   return (
-    <MainContext.Provider value="teste">
+    <MainContext.Provider value={{
+      topics,
+      setTopics,
+      showSchedule,
+      setShowSchedule,
+      addressAndHour,
+      setAddressAndHour,
+      projectInfo,
+      setProjectInfo,
+      subjects,
+      setSubjects,
+      distributions,
+      setDistributions,
+    }}
+    >
       {children}
     </MainContext.Provider>
   );

src/pages/Main/components/Distributions/Distributions.tsx

@@ -1,6 +1,8 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { message } from 'antd';
 
+import { MainContext } from 'contexts/MainContext';
+
 import Input from 'components/Input/Input';
 import Button from 'components/Button/Button';
 
@@ -10,12 +12,9 @@ import ScrollBox from 'components/ScrollBox/ScrollBox';
 import BoxInformation from 'components/BoxInformation/BoxInformation';
 import StyledDistributions from './styles';
 
-interface DistributionsProps {
-  setDistributions: Function
-  distributions: Array<string>
-}
+const Distributions = () => {
+  const { distributions, setDistributions } = useContext(MainContext);
 
-const Distributions = ({ setDistributions, distributions } : DistributionsProps) => {
   const [distribution, setDistribution] = useState<string>('');
 
   const handleCleanFields = () => {

src/pages/Main/components/Initial/Initial.tsx

@@ -1,13 +1,14 @@
 /* eslint-disable prettier/prettier */
-import React, { useState, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
+
+import { MainContext } from 'contexts/MainContext';
+
 import Input from 'components/Input/Input';
 import { StyledInitial } from './styles';
 
-interface IInitialProps {
-  setAddressAndHour: Function
-}
+const Initial = () => {
+  const { setAddressAndHour } = useContext(MainContext);
 
-const Initial = ({ setAddressAndHour }: IInitialProps) => {
   const [local, setLocal] = useState<string>('');
   const [startHour, setStartHour] = useState<string>('');
   const [startDate, setStartDate] = useState<string>('');

src/pages/Main/components/OptionButtons/index.tsx

@@ -1,4 +1,6 @@
-import React from 'react';
+import React, { useContext } from 'react';
+
+import { MainContext } from 'contexts/MainContext';
 
 import Button from 'components/Button/Button';
 
@@ -7,16 +9,16 @@ import { getMode } from 'services/api';
 import { Container } from './styles';
 
 interface OptionButtonsProps {
-  setShowSchedule: Function;
   setShowMinute: Function;
   handleGenerateMinute: Function;
 }
 
 const OptionButtons: React.FC<OptionButtonsProps> = ({
-  setShowSchedule,
   setShowMinute,
   handleGenerateMinute,
 }: OptionButtonsProps) => {
+  const { setShowSchedule } = useContext(MainContext);
+
   const isNotProduction = getMode();
 
   const handleOpenMinuteModal = () => {

src/pages/Main/components/ProjectInformation/ProjectInformation.tsx

@@ -1,4 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
+
+import { MainContext } from 'contexts/MainContext';
 
 import Button from 'components/Button/Button';
 import Input from 'components/Input/Input';
@@ -19,11 +21,9 @@ interface IMembers {
   enterprise: string;
 }
 
-interface ProjectProps {
-  setProjectInfo: Function;
-}
+const ProjectInformation = () => {
+  const { setProjectInfo } = useContext(MainContext);
 
-const ProjectInformation = ({ setProjectInfo }: ProjectProps) => {
   const [members, setMembers] = useState<IMembers[]>([]);
 
   const [projectName, setProjectName] = useState<string>('');

src/pages/Main/components/ScheduleModal/index.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
+import React, { useContext } from 'react';
+
+import { MainContext } from 'contexts/MainContext';
 
 import scheduleImage from 'assets/calendar.svg';
 import exit_icon from 'assets/exit_logo_red.svg';
 
 import { Container } from './styles';
 
-interface IScheduleModalProps {
-  setShowSchedule: Function;
-}
+const ScheduleModal = () => {
+  const { setShowSchedule } = useContext(MainContext);
 
-const ScheduleModal = ({ setShowSchedule }: IScheduleModalProps) => {
   const handleCloseModal = () => {
     if (setShowSchedule) setShowSchedule();
   };

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

@@ -1,19 +1,16 @@
-import React, { useState } from 'react';
-import ScrollBox from 'components/ScrollBox/ScrollBox';
+import React, { useContext, useState } from 'react';
+
+import { MainContext } from 'contexts/MainContext';
 
+import ScrollBox from 'components/ScrollBox/ScrollBox';
 import Button from 'components/Button/Button';
 import StyledSubjects from './styles';
 
 import SubjectModal from './components/SubjectModal';
 
-import { ISubject } from '../MinuteViewer/components/Minute/DTOs';
-
-interface ISubjectsProps {
-  subjects: Array<ISubject>;
-  setSubjects: Function;
-}
+const Subjects = () => {
+  const { subjects, setSubjects } = useContext(MainContext);
 
-const Subjects = ({ subjects, setSubjects }: ISubjectsProps) => {
   const [openSubjectModal, setOpenSubjectModal] = useState(false);
 
   const handleOpenSubjectModal = () => {

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

@@ -1,7 +1,9 @@
 /* eslint-disable prettier/prettier */
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { message } from 'antd';
 
+import { MainContext } from 'contexts/MainContext';
+
 import Input from 'components/Input/Input';
 import Button from 'components/Button/Button';
 import BoxInformation from 'components/BoxInformation/BoxInformation';
@@ -12,12 +14,9 @@ import StyledTopics from './styles';
 
 import { ITopic } from '../MinuteViewer/components/Minute/DTOs';
 
-interface ITopicsProps {
-  setTopics: Function;
-  topics: Array<ITopic>;
-}
+const Topics = () => {
+  const { topics, setTopics } = useContext(MainContext);
 
-const Topics = ({ setTopics, topics }: ITopicsProps) => {
   const [topicName, setTopicName] = useState<string>('');
 
   const handleCleanFields = () => {

src/pages/Main/index.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 
-import { MainProvider } from 'contexts/MainContext';
+import { MainContext, MainProvider } from 'contexts/MainContext';
 
 import Header from 'components/Header/Header';
 import Initial from './components/Initial/Initial';
@@ -17,31 +17,22 @@ import ScheduleModal from './components/ScheduleModal';
 import Container from './styles';
 
 import {
-  IProjectInfo,
-  ISubject,
-  ITopic,
-  IAddressAndHour,
   IMinute,
 } from './components/MinuteViewer/components/Minute/DTOs';
 
 const Main = () => {
+  const {
+    topics,
+    showSchedule,
+    addressAndHour,
+    projectInfo,
+    subjects,
+    distributions,
+  } = useContext(MainContext);
+
   const [showMinute, setShowMinute] = useState(false);
-  const [showSchedule, setShowSchedule] = useState(false);
 
   const [minute, setMinute] = useState<IMinute>();
-  const [addressAndHour, setAddressAndHour] = useState<IAddressAndHour>({
-    local: '',
-    startDate: '',
-    startHour: '',
-  });
-  const [projectInfo, setProjectInfo] = useState<IProjectInfo>({
-    projectName: '',
-    members: [],
-  });
-
-  const [topics, setTopics] = useState<ITopic[]>([]);
-  const [subjects, setSubjects] = useState<ISubject[]>([]);
-  const [distributions, setDistributions] = useState<string[]>([]);
 
   const handleGenerateMinute = () => {
     setMinute({
@@ -61,22 +52,19 @@ const Main = () => {
           <MinuteViewer setShowMinute={setShowMinute} minute={minute} />
         )}
 
-        {showSchedule && <ScheduleModal setShowSchedule={setShowSchedule} />}
+        {showSchedule && <ScheduleModal />}
 
         <Container>
-          <Initial setAddressAndHour={setAddressAndHour} />
-          <ProjectInformation setProjectInfo={setProjectInfo} />
-          <Topics setTopics={setTopics} topics={topics} />
+          <Initial />
+          <ProjectInformation />
 
-          <Subjects subjects={subjects} setSubjects={setSubjects} />
-          <Distributions
-            setDistributions={setDistributions}
-            distributions={distributions}
-          />
+          <Topics />
+
+          <Subjects />
+          <Distributions />
           <OptionButtons
             setShowMinute={setShowMinute}
             handleGenerateMinute={handleGenerateMinute}
-            setShowSchedule={setShowSchedule}
           />
         </Container>
       </MainProvider>

src/routes.tsx

@@ -1,5 +1,5 @@
-import RecoveryPassword from 'pages/RecoveryPassword';
 import React from 'react';
+import RecoveryPassword from 'pages/RecoveryPassword';
 import { Switch, Route, BrowserRouter } from 'react-router-dom';
 
 import NewPassword from 'pages/NewPassword';