chore: add a Contact page

3 files changed, 72 insertions, 5 deletions

diff --git a/src/services/graphql/api.ts b/src/services/graphql/api.ts
index b0e8d3a..9811d86 100644
--- a/src/services/graphql/api.ts
+++ b/src/services/graphql/api.ts
@@ -7,6 +7,7 @@ import {
   totalArticlesQuery,
 } from './articles.query';
 import { commentsQuery } from './comments.query';
+import { sendMailMutation } from './contact.mutation';
 import {
   thematicBySlugQuery,
   thematicsListQuery,
@@ -18,6 +19,8 @@ import {
   topicsSlugQuery,
 } from './topics.query';
 
+export type Mutations = typeof sendMailMutation;
+
 export type Queries =
   | typeof articlesQuery
   | typeof articleBySlugQuery
@@ -44,6 +47,10 @@ export type CommentsResponse<T> = {
   comments: T[];
 };
 
+export type SendMailResponse<T> = {
+  sendEmail: T;
+};
+
 export type ThematicResponse<T> = {
   thematic: T;
 };
@@ -85,15 +92,16 @@ export type NodesResponse<T> = {
 };
 
 export type ResponseMap<T> = {
-  [articleBySlugQuery]: ArticleResponse<NodesResponse<T>>;
+  [articleBySlugQuery]: ArticleResponse<T>;
   [articlesCardQuery]: ArticlesResponse<NodesResponse<T>>;
   [articlesQuery]: ArticlesResponse<EdgesResponse<T>>;
   [articlesSlugQuery]: ArticlesResponse<EdgesResponse<T>>;
   [commentsQuery]: CommentsResponse<NodesResponse<T>>;
-  [thematicBySlugQuery]: ThematicResponse<NodesResponse<T>>;
+  [sendMailMutation]: SendMailResponse<T>;
+  [thematicBySlugQuery]: ThematicResponse<T>;
   [thematicsListQuery]: ThematicsResponse<EdgesResponse<T>>;
   [thematicsSlugQuery]: ThematicsResponse<EdgesResponse<T>>;
-  [topicBySlugQuery]: TopicResponse<NodesResponse<T>>;
+  [topicBySlugQuery]: TopicResponse<T>;
   [topicsListQuery]: TopicsResponse<EdgesResponse<T>>;
   [topicsSlugQuery]: TopicsResponse<EdgesResponse<T>>;
   [totalArticlesQuery]: ArticlesResponse<T>;
@@ -133,12 +141,20 @@ export type ByContentIdVar = {
   contentId: number;
 };
 
+export type sendMailVars = {
+  body: string;
+  clientMutationId: string;
+  replyTo: string;
+  subject: string;
+};
+
 export type VariablesMap = {
   [articleBySlugQuery]: BySlugVar;
   [articlesCardQuery]: EdgesVars;
   [articlesQuery]: EdgesVars;
   [articlesSlugQuery]: EdgesVars;
   [commentsQuery]: ByContentIdVar;
+  [sendMailMutation]: sendMailVars;
   [thematicBySlugQuery]: BySlugVar;
   [thematicsListQuery]: EdgesVars;
   [thematicsSlugQuery]: EdgesVars;
@@ -148,7 +164,7 @@ export type VariablesMap = {
   [totalArticlesQuery]: null;
 };
 
-export type FetchAPIProps<T extends Queries> = {
+export type FetchAPIProps<T extends Queries | Mutations> = {
   /**
    * A GraphQL API URL.
    */
@@ -170,7 +186,7 @@ export type FetchAPIProps<T extends Queries> = {
  * @param {Queries} obj.query - A GraphQL query.
  * @param {object} [obj.variables] - The query variables.
  */
-export async function fetchAPI<T, U extends Queries>({
+export async function fetchAPI<T, U extends Queries | Mutations>({
   api,
   query,
   variables,
diff --git a/src/services/graphql/contact.mutation.ts b/src/services/graphql/contact.mutation.ts
new file mode 100644
index 0000000..b82fc07
--- /dev/null
+++ b/src/services/graphql/contact.mutation.ts
@@ -0,0 +1,25 @@
+/**
+ * Send mail mutation.
+ */
+export const sendMailMutation = `mutation SendEmail(
+  $subject: String!
+  $body: String!
+  $replyTo: String!
+  $clientMutationId: String!
+) {
+  sendEmail(
+    input: {
+      clientMutationId: $clientMutationId
+      body: $body
+      replyTo: $replyTo
+      subject: $subject
+    }
+  ) {
+    clientMutationId
+    message
+    sent
+    origin
+    replyTo
+    to
+  }
+}`;
diff --git a/src/services/graphql/contact.ts b/src/services/graphql/contact.ts
new file mode 100644
index 0000000..fca718f
--- /dev/null
+++ b/src/services/graphql/contact.ts
@@ -0,0 +1,26 @@
+import { fetchAPI, getAPIUrl, sendMailVars } from './api';
+import { sendMailMutation } from './contact.mutation';
+
+export type SentEmail = {
+  clientMutationId: string;
+  message: string;
+  origin: string;
+  replyTo: string;
+  sent: boolean;
+};
+
+/**
+ * Send an email using GraphQL API.
+ *
+ * @param {sendMailVars} data - The mail data.
+ * @returns {Promise<SentEmail>} The mutation response.
+ */
+export const sendMail = async (data: sendMailVars): Promise<SentEmail> => {
+  const response = await fetchAPI<SentEmail, typeof sendMailMutation>({
+    api: getAPIUrl(),
+    query: sendMailMutation,
+    variables: { ...data },
+  });
+
+  return response.sendEmail;
+};