From 67dcd4840718d37da9062ac2eaac2ffbf2c6ad40 Mon Sep 17 00:00:00 2001 From: Trisha Sahu <55338588+Trisha-tech@users.noreply.github.com> Date: Thu, 23 Feb 2023 09:10:10 +0530 Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=BC=20Integrate=20POST=20resource=20fo?= =?UTF-8?q?rm=20with=20backend=20(#812)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Integrate POST Resource with the form * Success card added --- .../ResourceSharingForm.jsx | 697 ++++++++++-------- .../resource-sharing-form.module.scss | 31 + 2 files changed, 426 insertions(+), 302 deletions(-) diff --git a/frontend/src/pages/Resources/components/ResourceSharingForm/ResourceSharingForm.jsx b/frontend/src/pages/Resources/components/ResourceSharingForm/ResourceSharingForm.jsx index b9f6aa33..909a9a9d 100644 --- a/frontend/src/pages/Resources/components/ResourceSharingForm/ResourceSharingForm.jsx +++ b/frontend/src/pages/Resources/components/ResourceSharingForm/ResourceSharingForm.jsx @@ -1,31 +1,43 @@ import React, { useState } from "react"; +import { NavLink, useHistory } from "react-router-dom"; import Joi from "joi-browser"; import { Button2 } from "../../../../components/util/Button/index"; import style from "./resource-sharing-form.module.scss"; +import { END_POINT } from "../../../../config/api"; +import Loader from "../../../../components/util/Loader"; +import { SimpleToast } from "../../../../components/util/Toast"; export function ResourceSharingForm(props) { + const [resourceToast, setResourceToast] = useState(""); + const [openSubmitResourceSuccess, setOpenSubmitResourceSuccess] = useState( + false + ); + const [isLoading, setIsLoading] = useState(false); + const [resourceToastStatus, setResourceToastStatus] = useState(""); + let dark = props.theme; const [formdata, setFormData] = useState({ name: "", email: "", - link: "", + url: "", description: "", - trust: null, - dov: "", - info: "", + trustLevel: null, + expiryDate: "", + additionalInfo: "", }); const [formerrors, setFormErrors] = useState({}); + const [submitted, setSubmitted] = useState(false); const schema = { - name: Joi.string().required(), - email: Joi.string().email().required(), - dov: Joi.date().required(), - link: Joi.string().uri().required(), - description: Joi.string(), - trust: Joi.required(), - info: Joi.string(), + name: Joi.string().trim().required().min(3).label("Name"), + email: Joi.string().trim().email().required().label("Email"), + url: Joi.string().uri().required().label("Url"), + description: Joi.string().trim().required().min(8).label("Description"), + trustLevel: Joi.required().label("TrustLevel"), + expiryDate: Joi.date().required().label("ExpiryDate"), + additionalInfo: Joi.string().trim().label("AdditionalInfo"), }; const validate = () => { @@ -55,16 +67,15 @@ export function ResourceSharingForm(props) { } return 0; }); - if (errors["info"]) { - delete errors["info"]; - } - if (Object.keys(errors).length !== 0) { + if (errors !== 0) { setFormErrors(errors); } - if (Object.keys(errors).length !== 0) { - console.log(errors); + if (errors) { + setSubmitted(false); } else { - //Call the Server + setSubmitted(true); + submitResourceFormData(formdata); + setFormData(""); console.log("Submitted"); } }; @@ -82,6 +93,44 @@ export function ResourceSharingForm(props) { setFormErrors(errors); }; + const submitResourceFormData = async (formdata) => { + var api = `${END_POINT}/resources/`; + setIsLoading(true); + return await fetch(api, { + method: "POST", + body: JSON.stringify(formdata), + headers: { + "Content-type": "application/json", + }, + }) + .then((res) => res.json()) + .then((data) => { + if ( + data.message === "Database Error" || + data.message === "Sendgrid Error" + ) { + setIsLoading(false); + setResourceToast(data.message); + setResourceToastStatus("error"); + } else { + setIsLoading(false); + setResourceToastStatus("success"); + setResourceToast(data.message); + setOpenSubmitResourceSuccess(true); + } + }) + .catch((err) => { + console.info(err); + }); + }; + + console.log(resourceToast); + + const handleCloseResourceToast = () => { + setOpenSubmitResourceSuccess(false); + setResourceToast(""); + }; + return (
-
-

+
+ +
+ + ) : resourceToastStatus === "error" ? ( + +
+

OOPS !

+
+

+ Sorry for the inconvenience caused, our servers are currently + facing some issues. 🔧
+ Please try again later! +

+
+
+ + ) : ( + +
+

Hello There !

+
+

+ Congratulations !!! ✨
+ Your Resource has been successfully added. 😄 +

+
+
+ + ) + ) : ( +
- Resource Sharing Form -

-
-
-
-
- - +

+ Resource Sharing Form +

+ +
+
- {formerrors["name"] ? ( -
* {formerrors["name"]}
- ) : ( -
   
- )} + + +
+ {formerrors["name"] ? ( +
* {formerrors["name"]}
+ ) : ( +
   
+ )} +
-
-
-
- - +
- {formerrors["email"] ? ( -
* {formerrors["email"]}
- ) : ( -
   
- )} + + +
+ {formerrors["email"] ? ( +
* {formerrors["email"]}
+ ) : ( +
   
+ )} +
+
+
+ +
+
+ + +
+ {formerrors["url"] ? ( +
* {formerrors["url"]}
+ ) : ( +
   
+ )} +
-
-
- - + > +
- {formerrors["link"] ? ( -
* {formerrors["link"]}
+ {formerrors["description"] ? ( +
* {formerrors["description"]}
) : (
   
)}
-
- -
- -
- {formerrors["description"] ? ( -
* {formerrors["description"]}
- ) : ( -
   
- )} -
-
-
-
- -
-
-
- +
-
- -
-
- +
+
+
-
- {formerrors["trust"] ? ( -
* {formerrors["trust"]}
- ) : ( -
   
- )} +
+ +
+ {formerrors["expiryDate"] ? ( +
* {formerrors["expiryDate"]}
+ ) : ( +
   
+ )} +
-
-
-
- -
-
- + + +
+
+ -
- {formerrors["dov"] ? ( -
* {formerrors["dov"]}
- ) : ( -
   
- )} -
-
- - -
-
- -
-
- -
+ +
+ )} + + {openSubmitResourceSuccess && ( + + )}
); } diff --git a/frontend/src/pages/Resources/components/ResourceSharingForm/resource-sharing-form.module.scss b/frontend/src/pages/Resources/components/ResourceSharingForm/resource-sharing-form.module.scss index 8c831fef..b51b5a27 100644 --- a/frontend/src/pages/Resources/components/ResourceSharingForm/resource-sharing-form.module.scss +++ b/frontend/src/pages/Resources/components/ResourceSharingForm/resource-sharing-form.module.scss @@ -471,3 +471,34 @@ input[type="date"]:not(:valid):before { width: 100%; } } + +//Card Styles +.card-heading { + padding-top: 12px; + margin-bottom: 8px; + text-align: center; + color: var(--secondary-color); + text-transform: capitalize; + font-size: 1.6rem !important; +} + +.inside-card { + width: 75%; + margin: 0 auto; + padding-bottom: 10px; +} + +.goodbye-card { + width: 60%; + height: auto; + background-color: #e7e7e7; + margin: 20% auto; + border-radius: 10px; + box-shadow: 5px 5px 15px #888888, -5px -5px 15px #ffffff; +} + +.inside-card p { + padding: 10px 5px; + font-size: 1.5rem !important; + font-weight: 580; +}