linking the plugin with custom api

devwithmaya · Jun 26, 2023 · 7ae5414 · 7ae5414
1 parent a7d2787
commit 7ae5414
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 22 deletions.
diff --git a/admin/src/pages/HomePage/index.tsx b/admin/src/pages/HomePage/index.tsx
@@ -2,6 +2,8 @@ import React, { useState, useEffect } from 'react';
 import { Box, Typography, BaseHeaderLayout, Button, Table, Thead, Tbody, Tr, Th, Td, BaseCheckbox, Badge, ModalLayout, ModalHeader, ModalBody, ModalFooter, Accordion, AccordionToggle, TextInput, AccordionContent, Checkbox, Textarea } from '@strapi/design-system';
 import { Plus } from '@strapi/icons';
 import { getUsers } from '../../../../services/users';
+import { getEmailingTraces, postEmailingTraces } from '../../../../services/traces';
+import { sendEmail } from '../../../../services/email-sending';
 import { template_1 } from '../../../../services/templates/custom';
 
 type IsVisible = boolean;
@@ -17,7 +19,7 @@ type ComposedTemplate = any;
 
 const Homepage: React.FC = () => {
   const template: any = template_1;
-
+  const [emailingTraces, setEmailingTraces]: any = useState([])
   const [isVisible, setIsVisible] = useState<IsVisible>(false);
   const [isReady, setIsReady] = useState<IsReady>(false);
   const [expanded, setExpanded] = useState<Expanded>(false)
@@ -46,15 +48,7 @@ const Homepage: React.FC = () => {
 
   useEffect(() => {
     fetchEmails();
-    for (let i = 0; i < 5; i++) {
-      setEntries([
-        ...entries,
-        {
-          ...entry,
-          id: i,
-        }
-      ])
-    }
+    fetchEmailingTraces();
   }, []);
 
   const optionHandler = (option: number) => {
@@ -67,22 +61,22 @@ const Homepage: React.FC = () => {
     if (option == 1) {
       setEmailsList(emails);
     }
-    else{
+    else {
       setEmailsList([]);
     }
   }
 
   const optionTemplateHandler = (option: number) => {
     setCurrentOptionTemplate(option)
-    if(option == 1){
+    if (option == 1) {
       setIsReady(true);
     }
-    else{
+    else {
       setIsReady(false);
     }
   }
 
-  const customTemplateHandler = () =>{
+  const customTemplateHandler = () => {
     setIsReady(true);
   }
 
@@ -99,11 +93,41 @@ const Homepage: React.FC = () => {
       .catch(e => console.log(e))
   };
 
+  const fetchEmailingTraces = async () => {
+    getEmailingTraces()
+      .then((res: any) => {
+        console.log(res)
+        setEmailingTraces(res)
+      })
+      .catch(e => console.log(e))
+  };
+
   const handleSendEmailCampaign = () => {
     // Logic to send a new email campaign goes here
     // You can use the Strapi API to create and send emails
     // Make sure to handle any necessary form inputs and validation
-    console.log('start sending emails')
+    if (currentOptionTemplate == 1) {
+      for (let i = 0; i < emailsList.length; i++) {
+        sendEmail(emailsList[i], template.template.subject, template.template.html)
+          .then(res => {
+            postEmailingTraces(emailsList[i], true)
+          })
+          .catch(e => {
+            postEmailingTraces(emailsList[i], false)
+          })
+      }
+    }
+    else {
+      for (let i = 0; i < emailsList.length; i++) {
+        sendEmail(emailsList[i], subject, content)
+          .then(res => {
+            postEmailingTraces(emailsList[i], true)
+          })
+          .catch(e => {
+            postEmailingTraces(emailsList[i], false)
+          })
+      }
+    }
   };
 
 
@@ -142,21 +166,23 @@ const Homepage: React.FC = () => {
               </Tr>
             </Thead>
             <Tbody>
-              {entries.map(entry => <Tr key={entry.id}>
+              {emailingTraces.map(entry => <Tr key={entry.id}>
                 <Td>
                   <BaseCheckbox aria-label={`Select ${entry.id}`} />
                 </Td>
                 <Td>
                   <Typography textColor="neutral800">{entry.id}</Typography>
                 </Td>
                 <Td>
-                  <Typography textColor="neutral800">{entry.email}</Typography>
+                  <Typography textColor="neutral800">{entry.attributes.email}</Typography>
                 </Td>
                 <Td>
-                  <Badge size="S" variant="success">{entry.statue}</Badge>
+                  <Box borderColor="red">
+                    <Badge size="S" variant="success">{entry.attributes.sent ? "Envoyé" : "Erreur"}</Badge>
+                  </Box>
                 </Td>
                 <Td>
-                  <Typography textColor="neutral800">{entry.date}</Typography>
+                  <Typography textColor="neutral800">{entry.attributes.createdAt}</Typography>
                 </Td>
               </Tr>)}
             </Tbody>
@@ -224,10 +250,10 @@ const Homepage: React.FC = () => {
                 <img src={template.screenshot} style={{ width: 650, height: 450, objectFit: 'cover', borderColor: "black", borderWidth: 3, borderRadius: 10, }} />
               </Box>
               <Box display={currentOptionTemplate == 2 ? '' : 'none'}>
-                <TextInput placeholder="Sujet du courriel" label="Sujet du l'e-mail" name="subject" hint="Composez un sujet pour votre e-mail" onChange={(e:any) => setSubject(e.target.value)} value={subject} size="M" />
+                <TextInput placeholder="Sujet du courriel" label="Sujet du l'e-mail" name="subject" hint="Composez un sujet pour votre e-mail" onChange={(e: any) => setSubject(e.target.value)} value={subject} size="M" />
                 <br />
                 <br />
-                <Textarea placeholder="Composez un contenu personnalisé pour votre email" label="Contenu de l'e-mail" name="email" hint="Vous pouvez mettre des balises html dans votre contenu"  onChange={(e:any) => setContent(e.target.value)} value={content}>
+                <Textarea placeholder="Composez un contenu personnalisé pour votre email" label="Contenu de l'e-mail" name="email" hint="Vous pouvez mettre des balises html dans votre contenu" onChange={(e: any) => setContent(e.target.value)} value={content}>
                 </Textarea>
                 <br />
                 <br />
@@ -239,7 +265,7 @@ const Homepage: React.FC = () => {
         <ModalFooter startActions={<Button onClick={() => setIsVisible(prev => !prev)} variant="tertiary">
           Cancel
         </Button>} endActions={<>
-          <Button disabled={currentStep == 1 ? true : false } variant="secondary" onClick={() => stepHandler(currentStep - 1)}>Étape précédente</Button>
+          <Button disabled={currentStep == 1 ? true : false} variant="secondary" onClick={() => stepHandler(currentStep - 1)}>Étape précédente</Button>
           <Button disabled={!nextStepActive} variant="secondary" onClick={() => stepHandler(currentStep + 1)}>L'étape suivante</Button>
           <Button disabled={!isReady} onClick={() => handleSendEmailCampaign()}>Envoyer maintenant</Button>
         </>} />

diff --git a/controllers/emailing.ts b/controllers/emailing.ts
@@ -10,4 +10,12 @@ export default {
   //     ctx.body = err;
   //   }
   // }
+  exampleAction: async (ctx, next) => {
+    //   try {
+    //     ctx.body = 'ok';
+    //   } catch (err) {
+    //     ctx.body = err;
+    //   }
+    // }
+  }
 };
diff --git a/services/email-sending/index.tsx b/services/email-sending/index.tsx
@@ -0,0 +1,30 @@
+
+
+import axios from 'axios'
+
+export const sendEmail = (email:string, subject:string, html:string) => {
+    return new Promise(function (resolve, reject) {
+        let data:any = JSON.stringify({
+            "email": email,
+            "subject": subject,
+            "html": html,
+          });
+        let config = {
+            method: 'post',
+            maxBodyLength: Infinity,
+            url: 'http://localhost:1337/api/emailing',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            data : data
+        };
+
+        axios.request(config)
+            .then((response:any) => {
+                resolve(response.data);
+            })
+            .catch((error:any) => {
+                reject(error);
+            });
+    })
+}
diff --git a/services/traces/index.ts b/services/traces/index.ts
@@ -0,0 +1,49 @@
+import axios from 'axios'
+
+export const getEmailingTraces = () => {
+    return new Promise(function (resolve, reject) {
+        let config = {
+            method: 'get',
+            maxBodyLength: Infinity,
+            url: 'http://localhost:1337/api/emailing-traces/',
+            headers: {
+                'Authorization': 'Bearer d50629f9fbb6756a2ddb75b667cdfa844125ddc912960b7e235e8163b6a8c5c4aa463faff74336ce715832fe9b05b506500f4d9d56c7564bd6b59c9e5f344a3ca7c0e77e56e452edd514de278d8bb8c38584b9b1738da1a2c3770b03b36a05479183bc9ac2cd140147a6a88c63de32ad6a54d4a1a103910bbbd00c97164b8470'
+            }
+        };
+
+        axios.request(config)
+            .then((response:any) => {
+                resolve(response.data.data);
+            })
+            .catch((error:any) => {
+                reject(error);
+            });
+    })
+}
+
+export const postEmailingTraces = (email:string, statue:any) => {
+    return new Promise(function (resolve, reject) {
+        let data:any = JSON.stringify({
+            "data": {
+              "email": email,
+              "sent": statue
+            }
+          });
+
+        let config = {
+            method: 'post',
+            maxBodyLength: Infinity,
+            url: 'http://localhost:1337/api/emailing-traces/',
+            data : data
+        };
+
+        axios.request(config)
+            .then((response:any) => {
+                resolve(response.data);
+            })
+            .catch((error:any) => {
+                reject(error);
+            });
+    })
+}
+