Feature/refetch query

packages/client-redes/src/App.tsx

@@ -13,6 +13,7 @@ import GroupsWrapper from "./pages/Groups";
 import Relations from "./pages/Relations";
 
 import { SessionPageLayout, SessionProvider } from "./services/session";
+import { FilterProvider } from './services/FilterContext'
 import store from "./store";
 
 const AppWrapper = styled.div`
@@ -44,9 +45,11 @@ const InsideApp = () => (
 const App = () => (
   <SessionProvider>
     <StoreProvider store={store}>
-      <Router history={history}>
-        <SessionPageLayout path="/" component={InsideApp} />
-      </Router>
+      <FilterProvider>
+        <Router history={history}>
+          <SessionPageLayout path="/" component={InsideApp} />
+        </Router>
+      </FilterProvider>
     </StoreProvider>
   </SessionProvider>
 );

packages/client-redes/src/app-logic.tsx

@@ -8,23 +8,23 @@ import {
 import { Individual } from "./graphql/FetchIndividuals";
 
 export default function useAppLogic(): {
-  individual,
-  volunteer,
-  tableData,
-  popups,
-  createWhatsappLink,
-  parsedIndividualNumber,
-  parsedVolunteerNumber,
-  getUserData,
-  setTable,
-  setVolunteer,
-  setPopup,
-  setIndividual,
-  encodeText,
-  whatsappText,
-  volunteer_lat,
-  volunteer_lng,
-  distance
+  individual;
+  volunteer;
+  tableData;
+  popups;
+  createWhatsappLink;
+  parsedIndividualNumber;
+  parsedVolunteerNumber;
+  getUserData;
+  setTable;
+  setVolunteer;
+  setPopup;
+  setIndividual;
+  encodeText;
+  whatsappText;
+  volunteer_lat;
+  volunteer_lng;
+  distance;
 } {
   const individual = useStoreState(state => state.individual.data);
   const volunteer = useStoreState(state => state.volunteer.data);

packages/client-redes/src/components/Popups/Confirm.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Title, Text, Button } from "bonde-styleguide";
+import { StyledLink } from "./styles";
+
+export default function Confirm ({
+  individualName,
+  volunteerName,
+  onClose,
+  onSubmit,
+  isEnabled
+}: {
+  individualName: string;
+  volunteerName: string;
+  onClose: () => void;
+  onSubmit: Promise<unknown>;
+  isEnabled: boolean
+}) {
+  return isEnabled 
+    ? (
+      <>
+        <Title.H2>Confirma?</Title.H2>
+        <Text align="center">
+          {individualName} será encaminhada para {volunteerName}
+        </Text>
+        <Button onClick={onSubmit}>confirmar encaminhamento</Button>
+        <StyledLink onClick={onClose}>voltar para o match</StyledLink>
+      </>
+    ) : null;
+}

packages/client-redes/src/components/Popups/Error.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { Title, Text, Button } from "bonde-styleguide";
+import { StyledLink, ErrorWrapper, Box } from "./styles";
+
+export default function Error ({
+  individualName,
+  volunteerName,
+  onClose,
+  onSubmit,
+  message,
+  isEnabled
+}: {
+  individualName: string;
+  volunteerName: string;
+  onClose: () => void;
+  onSubmit: Promise<unknown>;
+  message: string;
+  isEnabled: boolean
+}) {
+  return isEnabled 
+    ? (
+      <ErrorWrapper vertical>
+        <Title.H2>Ops!</Title.H2>
+        <Text align="center">
+          Encontramos um erro e {individualName} não pôde ser encaminhada para{" "}
+          {volunteerName}
+        </Text>
+        <Text align="center">
+          Clique abaixo para tentar outra vez. Se o erro persistir, comunique o time
+          de tech.
+        </Text>
+        <Box middle>
+          <Text>{message}</Text>
+        </Box>
+        <Button onClick={onSubmit}>encaminhar novamente</Button>
+        <StyledLink onClick={onClose}>voltar para o match</StyledLink>
+      </ErrorWrapper>
+    ) : null;
+}

packages/client-redes/src/components/Popups/Popup.tsx

@@ -1,193 +1,33 @@
 import React from "react";
-import { Title, Text, Button, Loading, Spacing } from "bonde-styleguide";
-
-import { If } from "../If";
-import {
-  StyledFlexbox,
-  StyledModal,
-  StyledLink,
-  ErrorWrapper,
-  Box
-} from "./styles";
+import { StyledFlexbox, StyledModal } from "./styles";
 
 type Props = {
-  confirm: {
-    isEnabled: boolean;
-  };
-  success: {
-    link: {
-      individual: () => string | undefined;
-      volunteer: () => string | undefined;
-    };
-    isEnabled: boolean;
-  };
-  error: {
-    isEnabled: boolean;
-    message: string;
-  };
-  warning: {
-    isEnabled: true;
-    id: number;
-    name: string;
-  };
   isOpen: boolean;
   onClose: () => void;
   volunteerName: string;
   individualName: string;
-  isLoading: boolean;
   onSubmit: any;
+  children
 };
 
-const Warning = ({
-  name,
-  id,
-  onClose
-}: {
-  name: string;
-  id: number;
-  onClose: () => void;
-}) => (
-  <>
-    <Title.H2>Ops!</Title.H2>
-    <Text align="center">{"Telefone Inválido ):"}</Text>
-    <Text align="center">
-      A voluntária {name} não possui número de Whastapp
-    </Text>
-    <StyledLink onClick={onClose}>fazer nova busca</StyledLink>
-  </>
-);
-
-const Confirm = ({
-  individualName,
-  volunteerName,
-  onClose,
-  onSubmit
-}: {
-  individualName: string;
-  volunteerName: string;
-  onClose: () => void;
-  onSubmit: Promise<unknown>;
-}) => (
-  <>
-    <Title.H2>Confirma?</Title.H2>
-    <Text align="center">
-      {individualName} será encaminhada para {volunteerName}
-    </Text>
-    <Button onClick={onSubmit}>confirmar encaminhamento</Button>
-    <StyledLink onClick={onClose}>voltar para o match</StyledLink>
-  </>
-);
-
-const Success = ({
-  individualName,
-  volunteerName,
-  onClose,
-  link
-}: {
-  individualName: string;
-  volunteerName: string;
-  onClose: () => void;
-  link: {
-    volunteer: () => string | undefined;
-    individual: () => string | undefined;
-  };
-}) => (
-  <>
-    <Title.H2 align="center">Encaminhamento Realizado</Title.H2>
-    <Text align="center">
-      EBA! {individualName} foi encaminhada para {volunteerName}.
-    </Text>
-    <Spacing margin={{ top: 20, bottom: 20 }}>
-      <a href={link.volunteer()} target="_blank" rel="noopener noreferrer">
-        <Button>enviar whats para voluntária</Button>
-      </a>
-    </Spacing>
-    <Spacing margin={{ bottom: 20 }}>
-      <a href={link.individual()} target="_blank" rel="noopener noreferrer">
-        <Button>enviar whats para psr</Button>
-      </a>
-    </Spacing>
-    <StyledLink onClick={onClose}>voltar à lista de voluntárias</StyledLink>
-  </>
-);
-
-const Error = ({
-  individualName,
-  volunteerName,
-  onClose,
-  onSubmit,
-  message
-}: {
-  individualName: string;
-  volunteerName: string;
-  onClose: () => void;
-  onSubmit: Promise<unknown>;
-  message: string;
-}) => (
-  <ErrorWrapper vertical>
-    <Title.H2>Ops!</Title.H2>
-    <Text align="center">
-      Encontramos um erro e {individualName} não pôde ser encaminhada para{" "}
-      {volunteerName}
-    </Text>
-    <Text align="center">
-      Clique abaixo para tentar outra vez. Se o erro persistir, comunique o time
-      de tech.
-    </Text>
-    <Box middle>
-      <Text>{message}</Text>
-    </Box>
-    <Button onClick={onSubmit}>encaminhar novamente</Button>
-    <StyledLink onClick={onClose}>voltar para o match</StyledLink>
-  </ErrorWrapper>
-);
-
 const Popup = ({
-  confirm,
-  success,
-  error,
-  warning,
   isOpen,
   onClose,
   volunteerName,
   individualName,
-  isLoading,
-  onSubmit
-}: Props) => {
-  return (
-    <StyledModal opened={isOpen} onClose={onClose} width={30}>
-      <StyledFlexbox middle vertical spacing="evenly">
-        <If condition={isLoading}>
-          <Loading />
-        </If>
-        <If condition={confirm.isEnabled}>
-          {Confirm({
-            ...confirm,
-            volunteerName,
-            individualName,
-            onClose,
-            onSubmit
-          })}
-        </If>
-        <If condition={success.isEnabled}>
-          {Success({ ...success, volunteerName, individualName, onClose })}
-        </If>
-        <If condition={error.isEnabled}>
-          {Error({
-            ...error,
-            volunteerName,
-            individualName,
-            onClose,
-            onSubmit
-          })}
-        </If>
-        <If condition={warning.isEnabled}>
-          {Warning({ ...warning, onClose })}
-        </If>
-      </StyledFlexbox>
-    </StyledModal>
-  );
-};
+  onSubmit,
+  children
+}: Props) => 
+  <StyledModal opened={isOpen} onClose={onClose} width={30}>
+    <StyledFlexbox middle vertical spacing="evenly">
+      {children({
+        volunteerName,
+        individualName,
+        onClose,
+        onSubmit
+      })}
+    </StyledFlexbox>
+  </StyledModal>
 
 Popup.defaultProps = {
   isOpen: false

packages/client-redes/src/components/Popups/Success.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Title, Text, Button, Spacing } from "bonde-styleguide";
+import { StyledLink, } from "./styles";
+
+export default function Success ({
+  individualName,
+  volunteerName,
+  onClose,
+  link,
+  isEnabled
+}: {
+  individualName: string;
+  volunteerName: string;
+  onClose: () => void;
+  link: {
+    volunteer: () => string | undefined;
+    individual: () => string | undefined;
+  };
+  isEnabled: boolean
+}) {
+  return isEnabled
+    ? (
+      <>
+        <Title.H2 align="center">Encaminhamento Realizado</Title.H2>
+        <Text align="center">
+          EBA! {individualName} foi encaminhada para {volunteerName}.
+        </Text>
+        <Spacing margin={{ top: 20, bottom: 20 }}>
+          <a href={link.volunteer()} target="_blank" rel="noopener noreferrer">
+            <Button>enviar whats para voluntária</Button>
+          </a>
+        </Spacing>
+        <Spacing margin={{ bottom: 20 }}>
+          <a href={link.individual()} target="_blank" rel="noopener noreferrer">
+            <Button>enviar whats para psr</Button>
+          </a>
+        </Spacing>
+        <StyledLink onClick={onClose}>voltar à lista de voluntárias</StyledLink>
+      </>
+    ) : null;
+}