Week 6 : Multi Corpus Search + Contact Page + Navigate by Corpus

.env.example

@@ -0,0 +1 @@
+MAILGUN_API_KEY="your_key"

components/Header.tsx

@@ -72,7 +72,7 @@ function Header(props) {
           <Link href="/faq">
             <a>{t("header.faq")}</a>
           </Link>
-          <Link href="/contact-us">
+          <Link href="/contact">
             <a>{t("header.contact-us")}</a>
           </Link>
 

components/UI/Separator.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import styled from "styled-components";
+
+function Separator() {
+  return <SeparatorDiv></SeparatorDiv>;
+}
+
+export default Separator;
+
+/**
+ * Styling
+ * CSS with Styled Components
+ * https://styled-components.com/docs
+ */
+
+const SeparatorDiv = styled.div`
+  padding-top: 50px;
+`;

config/config.ts

@@ -4,7 +4,7 @@
 // Created:     30/10/2021
 // Refer to Agorae Docs for more information
 //-------------------------------------------------------------------------------
-// Author : Sweave (Badr BENNASRI)
+// Author : Sweave (Badr B.)
 //-------------------------------------------------------------------------------
 
 const configFile = {
@@ -23,7 +23,8 @@ const configFile = {
   },
   argos: {
     url: "http://localhost:5984/argos/_design/argos/_rewrite",
-    corpus: "Vitraux - Bénel",
+    available_corpuses: ["Vitraux - Bénel", "Vitraux - Bénel"],
+    home_corpus: ["Vitraux - Bénel"], // can be * if you want to use all available corpuses
     order: "",
   },
 };

lang/locales/en.json

@@ -11,7 +11,16 @@
     "title": "Welcome to the {{name}} Platform",
     "description": "{{name}} is a common mapping device for a generic co-built knowledge map about transitions. This generic scheme is adaptable to specific requirements of each organisation facing transition goals"
   },
-  "item_element":{
-    "more_details" : "More details"
+  "item_element": {
+    "more_details": "More details"
+  },
+  "contact": {
+    "title": "Contact us",
+    "description": "If you have any questions or comments, please contact us at:",
+    "values": {
+      "name": "Name",
+      "email": "Email",
+      "message": "Message"
+    }
   }
 }

lang/locales/fr.json

@@ -13,5 +13,14 @@
   },
   "item_element":{
     "more_details" : "En savoir plus"
+  },
+  "contact": {
+    "title": "Contactez nous",
+    "description": "Si vous avez des questions ou des commentaires merci de nous contacter ",
+    "values": {
+      "name": "Nom",
+      "email": "Email",
+      "message": "Message"
+    }
   }
 }

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@ltd/j-toml": "^1.23.0",
+    "formik": "^2.2.9",
     "hypertopic": "^3.4.3",
     "i18next": "^21.3.3",
     "i18next-browser-languagedetector": "^6.1.2",

pages/contact.tsx

@@ -0,0 +1,116 @@
+import Header from "@components/Header";
+import Separator from "@components/UI/Separator";
+import React from "react";
+import styled from "styled-components";
+import { Formik } from "formik";
+import { useTranslation } from "react-i18next";
+
+function Contact() {
+    const { t, i18n } = useTranslation();
+  return (
+    <div>
+      <Header title="Contact" desc="Contact page "></Header>
+      <Layout>
+        <Separator></Separator>
+        <h1>{t("contact.title")}</h1>
+        <p>{t("contact.description")}</p>
+        <Separator></Separator>
+        <Formik
+          initialValues={{ name: "", email: "", message: "" }}
+          validate={(values) => {
+            const errors: any = {};
+            if (!values.email) {
+              errors.email = "Required";
+            } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
+              errors.email = "Invalid email address";
+            } else if (!values.message) {
+              errors.email = "Required";
+            } else if (!values.name) {
+              errors.name = "Required";
+            }
+            return errors;
+          }}
+          onSubmit={(values, { setSubmitting }) => {
+            setTimeout(() => {
+              alert(JSON.stringify(values, null, 2));
+              setSubmitting(false);
+            }, 400);
+          }}
+        >
+          {({
+            values,
+            errors,
+            touched,
+            handleChange,
+            handleBlur,
+            handleSubmit,
+            isSubmitting,
+            /* and other goodies */
+          }) => (
+            <form onSubmit={handleSubmit}>
+              <InputLabel>{t("contact.values.name")} </InputLabel>
+              <InputField type="text" name="name" onChange={handleChange} onBlur={handleBlur} value={values.name} />
+              <InputWarning>{errors.name && touched.name && errors.name}</InputWarning>
+              <InputLabel>{t("contact.values.email")}</InputLabel>
+              <InputField type="email" name="email" onChange={handleChange} onBlur={handleBlur} value={values.email} />
+              <InputWarning>{errors.email && touched.email && errors.email}</InputWarning>
+              <InputLabel>{t("contact.values.message")} </InputLabel>
+              <TextField name="message" onChange={handleChange} onBlur={handleBlur} value={values.message} />
+              <InputWarning>{errors.message && touched.message && errors.message}</InputWarning>
+
+              <button type="submit" disabled={isSubmitting}>
+                Submit
+              </button>
+            </form>
+          )}
+        </Formik>
+      </Layout>
+    </div>
+  );
+}
+
+export default Contact;
+
+/**
+ * Styling
+ * CSS with Styled Components
+ * https://styled-components.com/docs
+ */
+
+const Layout = styled.div`
+  padding-left: 40px;
+  padding-right: 40px;
+`;
+
+const InputField = styled.input`
+  padding: 10px;
+  background-color: #e1e9ed;
+  border: none;
+  width: 100%;
+  display: block;
+  border-radius: 3px;
+`;
+
+const TextField = styled.textarea`
+  padding: 10px;
+  background-color: #e1e9ed;
+  border: none;
+  width: 100%;
+  display: block;
+  border-radius: 3px;
+  margin-bottom: 3px;
+`;
+
+const InputLabel = styled.h3`
+  padding-top: 4px;
+  padding-bottom: 2px;
+`;
+
+const InputWarning = styled.p`
+  color: #ff000086 ;
+  border-radius: 3px;
+  padding: 2px;
+  display: block;
+  padding-top: 5px;
+  margin: inherit;
+`;