Skip to content
This repository has been archived by the owner on Oct 15, 2024. It is now read-only.

Commit

Permalink
feat: improve user feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
@Thechi2000
Thechi2000 committed Nov 7, 2023
1 parent ce3f8c7 commit ac10466
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 18 deletions.
3 changes: 2 additions & 1 deletion backend/src/routes/participants.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@ use rocket::{delete, get, post, put, serde::json::Json};
use serde::{Deserialize, Serialize};
use uuid::Uuid;

use crate::{models::Participant, DB, error::Error};
use crate::{error::Error, models::Participant, DB};

use super::login::RequireLogin;

#[derive(Serialize, Deserialize)]
#[serde(rename_all = "camelCase")]
pub struct ParticipantForm {
pub sciper: String,
pub email: String,
Expand Down
68 changes: 51 additions & 17 deletions frontend/src/pages/events/[eventId]/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
import { Event, EventForm } from "@/models";
import Link from "next/link";
import { useRouter } from "next/router";
import { ChangeEvent, InputHTMLAttributes, useState } from "react";
import { ChangeEvent, InputHTMLAttributes, useEffect, useState } from "react";
import * as yup from "yup";
import Editor from "@monaco-editor/react";

Expand Down Expand Up @@ -37,18 +37,30 @@ export default function Event({
date: event?.date,
mailTemplate: event?.mailTemplate,
} as Partial<EventForm>);
const [eventState, setEventState] = useState(event as Event | undefined);
const [hasChanged, setHasChanged] = useState(false);

useEffect(() => {
setHasChanged(
eventForm.date !== eventState?.date ||
eventForm.name !== eventState?.name ||
eventForm.mailTemplate !== eventState?.mailTemplate
);
}, [eventForm, eventState]);

async function saveEvent() {
setError(null);

try {
let form = await validationSchema.validate(eventForm);

if (event) {
const res = await updateEvent(event?.uid, form, session);
if (eventState) {
const res = await updateEvent(eventState?.uid, form, session);

if (!("uid" in res)) {
setError(res.description || "An unknown error occurred");
} else {
setEventState(res);
}
} else {
const res = await createEvent(form, session);
Expand Down Expand Up @@ -95,7 +107,7 @@ export default function Event({
<input
className="border-[3px] border-clic-blue rounded-lg px-2 focus:border-clic-red origin-right outline outline-0 grow"
type="date"
defaultValue={event?.date}
defaultValue={eventState?.date}
onChange={updateField("date")}
/>
</div>
Expand All @@ -105,22 +117,26 @@ export default function Event({
height="70vh"
loading="Loading Mail Template..."
defaultLanguage="html"
defaultValue={event?.mailTemplate}
defaultValue={eventState?.mailTemplate}
onChange={updateField("mailTemplate")}
/>
<p className="text-sm text-center">
The mail should be in HTML. To display the ticket, add an img tag
with the &rdquo;qrcode&rdquo; class.
</p>
{event ? (
{eventState ? (
<div className="flex justify-center items-center gap-8">
<input
className="border-[3px] border-clic-blue rounded-lg px-2 focus:border-clic-red origin-right outline outline-0"
onChange={(e) => setPreviewMailRecipient(e.target.value)}
placeholder="Preview email recipient"
/>
<button
className="text-white text-center font-semibold hover:underline underline-offset-5 self-end px-2 py-1 rounded-lg bg-sky-800 hover:scale-105 ease-in duration-300 origin-right"
className={`text-white text-center font-semibold underline-offset-5 self-end px-2 py-1 rounded-lg ease-in duration-300 origin-right ${
hasChanged
? "bg-gray-400 cursor-default"
: "bg-sky-800 hover:underline hover:scale-105"
}`}
onClick={() =>
(async () => {
setError(null);
Expand All @@ -138,7 +154,11 @@ export default function Event({
return;
}

let res = await sendPreviewEmail(session, event.uid, email);
let res = await sendPreviewEmail(
session,
eventState.uid,
email
);
if (typeof res === "object") {
setError(res.description || "An unknown error occured");
}
Expand All @@ -152,22 +172,31 @@ export default function Event({
<></>
)}
<div className=" mr-10 flex justify-center w-full gap-6">
{event ? (
{eventState ? (
<>
<Link
className="text-white text-2xl text-center font-semibold hover:underline underline-offset-5 self-end px-4 py-2 rounded-lg bg-pink-800 hover:scale-105 ease-in duration-300"
href={`/events/${event.uid}/checkin`}
href={`/events/${eventState.uid}/checkin`}
>
Check-in page
</Link>
<button
className="text-white text-2xl text-center font-semibold hover:underline underline-offset-5 self-end px-4 py-2 rounded-lg bg-sky-800 hover:scale-105 ease-in duration-300"
disabled={event.mailSent}
className={`text-white text-2xl text-center font-semibold underline-offset-5 self-end px-4 py-2 rounded-lg ease-in duration-300 ${
eventState.mailSent || hasChanged
? "bg-gray-400 cursor-default"
: "bg-sky-800 hover:underline hover:scale-105"
}`}
disabled={eventState.mailSent || hasChanged}
onClick={() => {
if (confirm("Are you sure you want to send the mails ?")) {
sendEmails(session, event.uid).then(() =>
router.reload()
);
sendEmails(session, eventState.uid)
.then(() => getEvents(session))
.then((event) => {
setEventState(
event.find((e) => e.uid === eventState.uid)
);
alert("Mails sent");
});
}
}}
>
Expand All @@ -178,12 +207,17 @@ export default function Event({
<></>
)}
<button
className="text-white text-center text-2xl font-semibold hover:underline underline-offset-5 self-end mr-5 px-4 py-2 rounded-lg bg-green-600 hover:scale-110 ease-in duration-300"
className={`text-white text-center text-2xl font-semibold underline-offset-5 self-end mr-5 px-4 py-2 rounded-lg ease-in duration-300 ${
!hasChanged
? "bg-gray-400 cursor-default"
: "bg-green-600 hover:underline hover:scale-110"
}`}
onClick={(e) => {
saveEvent();
}}
disabled={!hasChanged}
>
{event ? "Save" : "Create"}
{eventState ? "Save" : "Create"}
</button>
</div>
</div>
Expand Down

0 comments on commit ac10466

Please sign in to comment.