Merge pull request #16 from SocialGouv/feat/ajout-demande-bo

feat(ajout): branchement bo

.talismanrc

@@ -8,13 +8,15 @@ fileignoreconfig:
 - filename: README.md
   checksum: 8dc48ffdeb5f0ff5987ed48bee751b2551d37960e8dbbfc7c951ed2f48347b4c
 - filename: pages/ajout-demande.tsx
-  checksum: 9f3910cf12b854fa65fc88503bae817f7655f9cfea2e4c85ee3396adbd0f3a95
+  checksum: 003d2db04d4af3b830320847718f11f4c9bccf26f09d2211bf27ff04aaf63e76
 - filename: pages/api/auth/[...nextauth].ts
   checksum: 8c1d12d8b6179d284cce19aa33eaed6839861d85da22b368ba22e19b437e52fb
 - filename: pages/index.tsx
   checksum: abc2a89b85d95e759866b9a7b53ba934aff7b2f65e453e3ef65954320a926b38
 - filename: pages/mui.tsx
   checksum: 65dd6ab0469f43924ffc92d26055de14a77b1ef873e0efe69a014b582c38b694
+- filename: src/__generated__/graphql.ts
+  checksum: 841075bc002b0ec4bdd16bb57dfb52aba3a361b5a7f7fc6711255558a3eb8a1a
 - filename: src/components/SelectDepartment.tsx
   checksum: d8074633be1f7eb9bf5fbeb4f387ea7ea087b04a5675bff25e9e252dda5f6913
 scopeconfig:

apollo-client.js

@@ -0,0 +1,26 @@
+import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client"
+import { setContext } from '@apollo/client/link/context';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL
+
+const httpLink = createHttpLink({
+  uri: `${API_URL}/graphql?nocache`,
+});
+
+const authLink = setContext((_, { headers }) => {
+  const token = localStorage.getItem("token");
+  return {
+    headers: {
+      ...headers,
+      authorization: token ? `Bearer ${token}` : "",
+    }
+  }
+});
+
+export const client = new ApolloClient({
+  cache: new InMemoryCache(),
+  headers: {
+    "content-type": "application/json",
+  },
+  link: authLink.concat(httpLink),
+})

pages/_app.tsx

@@ -19,7 +19,7 @@ import { Footer } from "@codegouvfr/react-dsfr/Footer";
 import { init } from "@socialgouv/matomo-next";
 import Head from "next/head";
 import { SessionProvider } from "next-auth/react";
-import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
+import { ApolloClient, InMemoryCache } from '@apollo/client';
 
 // Only in TypeScript projects
 declare module "@codegouvfr/react-dsfr" {
@@ -166,9 +166,7 @@ function App({ Component, pageProps }: AppProps) {
           })}
         >
           <SessionProvider session={pageProps.session}>
-            <ApolloProvider client={client} >
-              <Component {...pageProps} />
-            </ApolloProvider>
+            <Component {...pageProps} />
           </SessionProvider>
         </div>
         <Footer

pages/ajout-demande.tsx

@@ -1,11 +1,16 @@
 import React, { Fragment, useEffect, useState } from "react";
 import { useSession } from "next-auth/react";
-import { useQuery } from '@apollo/client';
-
+import { useLazyQuery, useMutation } from '@apollo/client';
+import { client } from "../apollo-client"
+import { useRouter } from "next/router";
 import { useStyles } from "tss-react/dsfr";
 import { LoggedState } from "../src/components/LoggedState";
 import DatabaseApi from "../src/services/api/database";
-import { Enum_Demandedecontact_Type_De_Contact, WidgetEpdsSources } from "../src/__generated__/graphql";
+import {
+  Enum_Contacts_Mode,
+  Enum_Contacts_Personne_Accompagnee,
+  WidgetEpdsSources,
+} from "../src/__generated__/graphql";
 import { sortWidgetSourceByName } from "../src/utils/main.util";
 import { Departement } from "../types/geogouv";
 
@@ -19,63 +24,76 @@ import Alert from "@codegouvfr/react-dsfr/Alert";
 export default function AjoutDemande() {
   const { css } = useStyles();
   const widthFitContent = css({ width: "fit-content" })
+  const router = useRouter()
 
-  const { data: session, status } = useSession()
+  const { status } = useSession()
   const [isLogged, setLogged] = useState<Boolean>()
 
   const [widgetSources, setWidgetSources] = useState<WidgetEpdsSources[]>([])
   const [selectedDepartment, setSelectedDepartment] = useState<Departement>()
-  const [selectedContactOrigin, setSelectedContactOrigin] = useState<String>()
-  const [selectedContactMode, setSelectedContactMode] = useState<String>()
-  const [selectedContactSupport, setSelectedContactSupport] = useState<String>()
-
-  useEffect(() => {
-    console.log(isLogged)
-  }, [isLogged])
+  const [selectedContactOrigin, setSelectedContactOrigin] = useState<string>()
+  const [selectedContactMode, setSelectedContactMode] = useState<Enum_Contacts_Mode>()
+  const [selectedContactSupport, setSelectedContactSupport] = useState<Enum_Contacts_Personne_Accompagnee>()
+  const [isLoading, setLoading] = useState(false)
 
   useEffect(() => {
     setLogged(status === "authenticated")
+
+    const getSourcesApi = async () => await getWidgetSourcesRequest()
+    getSourcesApi()
   }, [status])
 
-  const { loading, data, error } = useQuery(
-    DatabaseApi.GET_WIDGET_SOURCES
+  const [getWidgetSourcesRequest] = useLazyQuery(
+    DatabaseApi.GET_WIDGET_SOURCES, {
+    client: client,
+    onCompleted: (data) => setWidgetSources(sortWidgetSourceByName([...data.widgetEpdsSources])),
+    onError: (err) => console.error(err),
+  }
   );
 
-  useEffect(() => {
-    if (data) {
-      setWidgetSources(sortWidgetSourceByName([...data.widgetEpdsSources]))
-    }
-  }, [data])
+  const [saveContactRequest] = useMutation(
+    DatabaseApi.SAVE_CONTACT, {
+    client: client,
+    onCompleted: () => {
+      setLoading(false)
+      goToHome()
+    },
+    onError: (err) => console.error(err),
+  });
 
   const createNewContact = async (event: any) => {
     // Stop the form from submitting and refreshing the page.
     event.preventDefault()
     const target = event.target
 
-    // Get data from the form.
-    const data = {
-      name: target.name.value,
-      childNumber: target.childNumber.value,
-      childBirthDate: target.childBirthDate.value,
-      department: selectedDepartment,
-      contactDate: target.contactDate.value,
-      contactOrigin: selectedContactOrigin,
-      contactMode: selectedContactMode,
-      contactSupport: selectedContactSupport,
-      comment: target.comment.value
+    const dataCollected = {
+      prenom: target.name.value,
+      nombreEnfants: parseInt(target.childNumber.value),
+      dateNaissanceDernierEnfant: target.childBirthDate.value,
+      departementLibelle: selectedDepartment?.nom,
+      departementCode: selectedDepartment?.code,
+      datePriseContact: target.contactDate.value,
+      provenance: selectedContactOrigin,
+      mode: selectedContactMode,
+      personneAccompagnee: selectedContactSupport,
+      commentaire: target.comment.value
     }
 
-    // TODO: branchement back
+    setLoading(true)
+    await saveContactRequest({
+      variables: dataCollected
+    })
+  }
+
+  const goToHome = () => {
+    router.push({
+      pathname: "/",
+    })
   }
 
   return <div>
     <LoggedState showButton={false} />
 
-    <Alert
-      title="Page en cours de développement"
-      severity="info"
-    />
-
     {isLogged &&
       <form onSubmit={createNewContact}>
         <Input
@@ -113,7 +131,7 @@ export default function AjoutDemande() {
         <Select
           label="Provenance du contact"
           nativeSelectProps={{
-            onChange: event => setSelectedContactOrigin(event.target.value),
+            onChange: event => setSelectedContactOrigin(event.target.value)
           }}
         >
           <Fragment key=".0">
@@ -126,7 +144,7 @@ export default function AjoutDemande() {
               Sélectionnez une option
             </option>
             {widgetSources.map((source, index) => (
-              <option key={index} value={source.nom}>{source.nom}</option>
+              <option key={index} value={source.id}>{source.nom}</option>
             ))}
           </Fragment>
         </Select>
@@ -147,26 +165,26 @@ export default function AjoutDemande() {
             id: "comment"
           }} />
 
-        <Button type="submit" onClick={() => { }}>Créer le contact</Button>
+        <Button type="submit" onClick={() => { }} disabled={isLoading}>Créer le contact</Button>
       </form>
     }
   </div>
 }
 
 export type ContactModeComponentProps = {
   label: string;
-  setSelectedContactMode: (arg: string) => void
+  setSelectedContactMode: (arg: Enum_Contacts_Mode) => void
 };
 
 export type ContactSupportComponentProps = {
   label: string;
-  setSelectedContactSupport: (arg: string) => void
+  setSelectedContactSupport: (arg: Enum_Contacts_Personne_Accompagnee) => void
 };
 
 
 // A remplacer par le composant RadioButton de la lib @codegouvfr/react-dsfr lorsqu'il sera disponible
 const ContactModeComponent = ({ label, setSelectedContactMode }: ContactModeComponentProps): JSX.Element => {
-  const typeContactList = Object.values(Enum_Demandedecontact_Type_De_Contact)
+  const typeContactList = Object.values(Enum_Contacts_Mode)
 
   const handleContactMode = (event: any) => {
     setSelectedContactMode(event.target.value)
@@ -192,8 +210,24 @@ const ContactModeComponent = ({ label, setSelectedContactMode }: ContactModeComp
   )
 }
 
+// A remplacer par le composant RadioButton de la lib @codegouvfr/react-dsfr lorsqu'il sera disponible
 const ContactSupportComponent = ({ label, setSelectedContactSupport }: ContactSupportComponentProps): JSX.Element => {
-  const supportList = ["Orientée", "Aidée", "Petit échange initial", "Non accompagnée"]
+  const supportList = Object.values(Enum_Contacts_Personne_Accompagnee)
+
+  const labelForEnum = (item: Enum_Contacts_Personne_Accompagnee): string => {
+    switch (item) {
+      case Enum_Contacts_Personne_Accompagnee.Orientee:
+        return "Orientée"
+      case Enum_Contacts_Personne_Accompagnee.Aidee:
+        return "Aidée"
+      case Enum_Contacts_Personne_Accompagnee.EchangeInitial:
+        return "Petit échange initial"
+      case Enum_Contacts_Personne_Accompagnee.NonAccompagnee:
+        return "Non accompagnée"
+      default:
+        return item
+    }
+  }
 
   const handleContactSupport = (event: any) => {
     setSelectedContactSupport(event.target.value)
@@ -209,7 +243,7 @@ const ContactSupportComponent = ({ label, setSelectedContactSupport }: ContactSu
           {supportList.map((item, index) => (
             <div className="fr-radio-group" key={index}>
               <input type="radio" id={`radio-support-${index}`} name="radio-support" value={item} />
-              <label className="fr-label" htmlFor={`radio-support-${index}`}>{item}
+              <label className="fr-label" htmlFor={`radio-support-${index}`}>{labelForEnum(item)}
               </label>
             </div>
           ))}