From ca9d5174759fb63e18f5247e426b84cd4951427e Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Tue, 30 Mar 2021 21:55:16 +0300 Subject: [PATCH] =?UTF-8?q?fix=20react-toastify=20=F0=9F=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/_app.tsx | 3 +++ src/pages/admin/events/[id].tsx | 8 ++++---- src/pages/admin/feed/[id].tsx | 6 +++--- src/pages/admin/jobads/[id].tsx | 6 +++--- src/pages/admin/signups/[id].tsx | 6 +++--- src/pages/admin/signups/[id]/email.tsx | 12 +++--------- src/pages/signup/[id].tsx | 11 +++++------ src/pages/signup/edit/[id]/[uuid].tsx | 7 +++---- src/views/SignUpPage/SignUpPageView.tsx | 5 ----- src/views/admin/AdminCreateCommon.tsx | 15 +-------------- tests/testcafe/admin/create-event.test.ts | 4 ++-- tests/testcafe/admin/create-signup.test.ts | 4 ++-- tests/testcafe/signupToEvent.test.ts | 4 ++-- 13 files changed, 34 insertions(+), 57 deletions(-) diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index d5905a0..f182d7a 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -3,9 +3,11 @@ import React from "react"; import type { AppProps /* , AppContext' */ } from "next/app"; import Head from "next/head"; import styled, { createGlobalStyle } from "styled-components"; +import { ToastContainer } from "react-toastify"; import { colors } from "@theme/colors"; import "react-mde/lib/styles/css/react-mde-all.css"; +import "react-toastify/dist/ReactToastify.css"; const fontFamily = "'Montserrat', sans-serif"; const fontSize = 12; // 16px @@ -141,6 +143,7 @@ const Web20App = ({ Component, pageProps }: AppProps) => ( + ); diff --git a/src/pages/admin/events/[id].tsx b/src/pages/admin/events/[id].tsx index e3a59e6..86ed479 100644 --- a/src/pages/admin/events/[id].tsx +++ b/src/pages/admin/events/[id].tsx @@ -1,6 +1,7 @@ import React, { useEffect, useState } from "react"; import { NextPage } from "next"; import { useRouter } from "next/router"; +import { toast } from "react-toastify"; import AdminCreateCommon from "@views/admin/AdminCreateCommon"; import Tag from "@models/Tag"; import TagApi from "@api/tagApi"; @@ -11,7 +12,6 @@ import EventApi from "@api/eventApi"; import DatetimeWidget from "@components/Widgets/DatetimeWidget"; import SectionDividerWidget from "@components/Widgets/SectionDividerWidget"; import MarkdownEditorWidget from "@components/Widgets/MarkdownEditorWidget"; -import { toast } from "react-toastify"; const widgets = { datetime: DatetimeWidget, @@ -213,7 +213,7 @@ const EventCreatePage: NextPage = () => { // resp.signupForm = (resp.signupForm as any).map(inst => inst.id); resp.tags = data.formData.tags; resp.signupForm = data.formData.signupForm; - toast("Event created successfully 😎"); + toast.success("Event created successfully 😎"); router.push("/admin/events"); setFormData(resp); } else { @@ -224,12 +224,12 @@ const EventCreatePage: NextPage = () => { // resp.signupForm = (resp.signupForm as any).map(inst => inst.id); resp.tags = data.formData.tags; resp.signupForm = data.formData.signupForm; - toast("Event updated successfully 😎"); + toast.success("Event updated successfully 😎"); router.push("/admin/events"); setFormData(resp); } } catch (err) { - toast("Uh oh! Something went wrong! Try again later. 😟"); + toast.error("Uh oh! Something went wrong! Try again later. 😟"); setError(err); } }; diff --git a/src/pages/admin/feed/[id].tsx b/src/pages/admin/feed/[id].tsx index 3a660b9..43c4707 100644 --- a/src/pages/admin/feed/[id].tsx +++ b/src/pages/admin/feed/[id].tsx @@ -167,18 +167,18 @@ const FeedCreatePage: NextPage = () => { if (payload.id === undefined) { const resp = await FeedApi.createPost(payload); // resp.tags = resp.tags; - toast("Post created successfully 😎"); + toast.success("Post created successfully 😎"); router.push("/admin/feed"); setFormData(resp); } else { const resp = await FeedApi.updatePost(payload); // resp.tags = resp.tag_id; - toast("Post updated successfully 😎"); + toast.success("Post updated successfully 😎"); router.push("/admin/feed"); setFormData(resp); } } catch (err) { - toast("Uh oh! Something went wrong! Try again later. 😟"); + toast.error("Uh oh! Something went wrong! Try again later. 😟"); setError(err); } }; diff --git a/src/pages/admin/jobads/[id].tsx b/src/pages/admin/jobads/[id].tsx index 30f4d55..4d456fa 100644 --- a/src/pages/admin/jobads/[id].tsx +++ b/src/pages/admin/jobads/[id].tsx @@ -132,17 +132,17 @@ const JobAdCreatePage: NextPage = () => { const payload = data.formData; if (payload.id === undefined) { const resp = await JobAdApi.createJobAd(payload); - toast("Job ad created successfully 😎"); + toast.success("Job ad created successfully 😎"); router.push("/admin/jobads"); setFormData(resp); } else { const resp = await JobAdApi.updateJobAd(payload); - toast("Job ad updated successfully 😎"); + toast.success("Job ad updated successfully 😎"); router.push("/admin/jobads"); setFormData(resp); } } catch (err) { - toast("Uh oh! Something went wrong! Try again later. 😟"); + toast.error("Uh oh! Something went wrong! Try again later. 😟"); setError(err); } }; diff --git a/src/pages/admin/signups/[id].tsx b/src/pages/admin/signups/[id].tsx index 7b226ac..c47f982 100644 --- a/src/pages/admin/signups/[id].tsx +++ b/src/pages/admin/signups/[id].tsx @@ -133,7 +133,7 @@ const SignupCreatePage: NextPage = () => { if (payload.id === undefined) { const resp = await SignupApi.createForm(payload); - toast("Sign-up created successfully 😎"); + toast.success("Sign-up created successfully 😎"); router.push("/admin/signups"); setFormData({ ...resp, @@ -141,7 +141,7 @@ const SignupCreatePage: NextPage = () => { }); } else { const resp = await SignupApi.updateForm(payload); - toast("Sign-up updated successfully 😎"); + toast.success("Sign-up updated successfully 😎"); router.push("/admin/signups"); setFormData({ ...resp, @@ -149,7 +149,7 @@ const SignupCreatePage: NextPage = () => { }); } } catch (err) { - toast("Uh oh! Something went wrong! Try again later. 😟"); + toast.error("Uh oh! Something went wrong! Try again later. 😟"); setError(err); } }; diff --git a/src/pages/admin/signups/[id]/email.tsx b/src/pages/admin/signups/[id]/email.tsx index 13e56d5..4bdd856 100644 --- a/src/pages/admin/signups/[id]/email.tsx +++ b/src/pages/admin/signups/[id]/email.tsx @@ -1,6 +1,7 @@ import React, { useEffect, useState } from "react"; import { NextPage } from "next"; import { useRouter } from "next/router"; +import { toast } from "react-toastify"; import AdminCreateCommon from "@views/admin/AdminCreateCommon"; import MarkdownEditorWidget from "@components/Widgets/MarkdownEditorWidget"; import { SignupForm } from "@models/Signup"; @@ -63,33 +64,26 @@ const SignupEmailPage: NextPage = () => { const signupForm = useInitializeData(id as string); const [error, setError] = useState(null); - const [statusMessage, setStatusMessage] = useState(null); const onSubmit = async (data) => { try { const payload = data.formData; await SignupApi.signupFormSendEmail(payload, Number(id)); - setStatusMessage("Email sent successfully"); + toast.success("Email sent successfully 😎"); } catch (err) { setError(err); + toast.error("Uh oh! Something went wrong! Try again later. 😟"); } }; - // const onChange = (data) => setFormData(data.formData); - const onFocus = () => setStatusMessage(null); - const title = signupForm ? signupForm.title_fi : "Loading..."; return ( diff --git a/src/pages/signup/[id].tsx b/src/pages/signup/[id].tsx index fc379d1..6286957 100644 --- a/src/pages/signup/[id].tsx +++ b/src/pages/signup/[id].tsx @@ -1,7 +1,8 @@ -import React, { useState } from "react"; +import React from "react"; import { NextPage, GetStaticProps, GetStaticPaths } from "next"; import Head from "next/head"; import { useRouter } from "next/router"; +import { toast } from "react-toastify"; import { Signup, SignupForm } from "@models/Signup"; import SignupApi from "@api/signupApi"; import SignUpPageView from "@views/SignUpPage/SignUpPageView"; @@ -15,7 +16,6 @@ type InitialProps = { const SignUpPage: NextPage = ({ form }) => { const router = useRouter(); - const [statusMessage, setStatus] = useState(null); if (router.isFallback) { return ; @@ -29,11 +29,11 @@ const SignUpPage: NextPage = ({ form }) => { try { await SignupApi.createSignup(payload); - // TODO: Fetch/update signup list, so user sees the signup in the list - setStatus("Sign-up submitted successfully"); + toast.success("Sign-up submitted successfully 😎"); + router.push(window.location.href); // TODO: Fetch/update signup list, so user sees the signup in the list } catch (error) { console.error(error); - setStatus("Bad request"); + toast.error("Uh oh! Sign-up failed! 😟"); } }; @@ -46,7 +46,6 @@ const SignUpPage: NextPage = ({ form }) => { diff --git a/src/pages/signup/edit/[id]/[uuid].tsx b/src/pages/signup/edit/[id]/[uuid].tsx index 6413d78..3b150a0 100644 --- a/src/pages/signup/edit/[id]/[uuid].tsx +++ b/src/pages/signup/edit/[id]/[uuid].tsx @@ -1,6 +1,7 @@ import React, { useEffect, useState } from "react"; import { NextPage } from "next"; import { useRouter } from "next/router"; +import { toast } from "react-toastify"; import { Signup, SignupForm } from "@models/Signup"; import SignupApi from "@api/signupApi"; import SignUpPageView from "@views/SignUpPage/SignUpPageView"; @@ -48,7 +49,6 @@ const useFetchSignup = (signupId: number, uuid: string) => { const EditSignUpPage: NextPage = () => { const router = useRouter(); const { signupId, uuid } = parseQueryParams(router.query); - const [statusMessage, setStatus] = useState(null); const [form, formData] = useFetchSignup(signupId, uuid); const onSubmit = async (data) => { @@ -61,10 +61,10 @@ const EditSignUpPage: NextPage = () => { try { await SignupApi.updateSignup(payload, uuid); // TODO: Update signup list, so user sees possible changes in the list - setStatus("Sign-up submission updated successfully"); + toast.success("Sign-up updated successfully 😎"); } catch (error) { console.error(error); - setStatus("Bad request"); + toast.error("Uh oh! Updating sign-up failed! 😟"); } }; @@ -73,7 +73,6 @@ const EditSignUpPage: NextPage = () => { diff --git a/src/views/SignUpPage/SignUpPageView.tsx b/src/views/SignUpPage/SignUpPageView.tsx index 51f6165..4ca3ca7 100644 --- a/src/views/SignUpPage/SignUpPageView.tsx +++ b/src/views/SignUpPage/SignUpPageView.tsx @@ -18,7 +18,6 @@ const customWidgets = { interface SignUpPageViewProps { signUpForm: SignupForm; formData: any; - statusMessage: string; onChange: (e: IChangeEvent, es?: ErrorSchema) => unknown; onSubmit: (e: ISubmitEvent) => unknown; } @@ -62,7 +61,6 @@ const StyledSection = styled(TextSection)` const SignUpPageView: React.FC = ({ signUpForm, formData, - statusMessage, onChange, onSubmit, }) => { @@ -97,9 +95,6 @@ const SignUpPageView: React.FC = ({
- - {statusMessage} - {form}