fix: ui glitches

- fix re-render of date picker on month change - add translations - add missing `<Typography>` tags
fhswf · Sep 29, 2024 · 281c2a4 · 281c2a4
1 parent ecf8498
commit 281c2a4
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 52 deletions.
diff --git a/client/public/locales/de/translation.json b/client/public/locales/de/translation.json
@@ -33,6 +33,11 @@
   "deft_suave_bear_pause": "Termine werden geladen ...",
   "equal_jolly_thrush_empower": " Minuten",
   "Schedule an appointment": "Termin vereinbaren",
+  "heroic_kind_llama_zip": "Zurück",
+  "awake_jolly_gazelle_lock": "Überspringen",
+  "whole_acidic_parrot_promise": "Termin buchen",
+  "clear_close_racoon_pat": "{{value, dateTime}}",
+  "cuddly_spare_felix_stir": "Schritt {{val}}",
   "Name": "Name",
   "Please provide your name": "Bitte geben Sie Ihren Namen an",
   "Email": "E-Mail-Adresse",
@@ -51,9 +56,14 @@
   "Choose date": "Datum wählen",
   "Choose time": "Uhrzeit wählen",
   "Provide details": "Details angeben",
-  "heroic_kind_llama_zip": "Zurück",
-  "awake_jolly_gazelle_lock": "Überspringen",
-  "whole_acidic_parrot_promise": "Termin buchen",
-  "clear_close_racoon_pat": "{{value, dateTime}}",
-  "cuddly_spare_felix_stir": "Schritt {{val}}"
+  "sunny_great_halibut_empower": "Noch keine Events, erstelle eines",
+  "orange_grand_racoon_fall": "So funktioniert Bookme",
+  "male_patient_hedgehog_ask": "Bookme ist ein einfaches, benutzerfreundliches Terminbuchungssystem. Es\nermöglicht Ihnen das Erstellen von Veranstaltungen, das Teilen Ihres Links und die Buchung durch Benutzer\nTermine mit Ihnen.",
+  "factual_moving_hawk_belong": "Geben Sie an, wo BookMe Ihre Termine hinzufügt und wo es prüft, ob Sie beschäftigt sind.",
+  "pink_polite_racoon_earn": "Schritt 2: Ereignisse erstellen",
+  "happy_wise_mantis_laugh": "\"Fügen Sie Ihre verfügbaren Zeiten hinzu und Sie sind\ngut zu gehen!\"",
+  "careful_misty_bullock_splash": "Schritt 3: Teilen Sie Ihren Link",
+  "extra_misty_panda_grip": "Über diesen Link können Nutzer Termine buchen.",
+  "game_frail_vole_treasure": "Erledigt! Glückwunsch!",
+  "still_helpful_koala_trust": "Sobald ein Benutzer einen Termin bucht, wird das Ereignis Ihrem Kalender hinzugefügt."
 }
diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
@@ -42,5 +42,15 @@
   "awake_jolly_gazelle_lock": "Skip",
   "whole_acidic_parrot_promise": "Book appointment",
   "clear_close_racoon_pat": "{{value, dateTime}}",
-  "cuddly_spare_felix_stir": "Step {{val}}"
+  "cuddly_spare_felix_stir": "Step {{val}}",
+  "sunny_great_halibut_empower": "No events yet, create one",
+  "orange_grand_racoon_fall": "How Bookme works",
+  "male_patient_hedgehog_ask": "Bookme is a simple, easy to use, appointment booking system. It\n            allows you to create events, share your link and let users book\n            appointments with you.",
+  "factual_moving_hawk_belong": "Specify where BookMe adds your appointments and where it checks whether you are busy.",
+  "pink_polite_racoon_earn": "Step 2: Create events",
+  "happy_wise_mantis_laugh": "\"Add your available times and you're\n                good to go!\"",
+  "careful_misty_bullock_splash": "Step 3: Share your link",
+  "extra_misty_panda_grip": "Users can use this link to book appointments.",
+  "game_frail_vole_treasure": "Done! Congrats!",
+  "still_helpful_koala_trust": "Once a user books an appointment, the event is added to your calendar."
 }
diff --git a/client/src/components/EventCard.tsx b/client/src/components/EventCard.tsx
@@ -8,11 +8,11 @@ import {
   CardActions,
   CardContent,
   CardHeader,
-  Grid,
   IconButton,
   Snackbar,
   Switch,
 } from "@mui/material";
+import Grid from "@mui/material/Grid2";
 
 import { Alert } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
@@ -29,7 +29,7 @@ const useStyles = makeStyles({
 */
 
 type EventCardProps = {
-  event: EventDocument | Event;
+  event: EventDocument;
   token: string;
   url: string;
   setActive: (active: boolean) => void;
@@ -77,7 +77,8 @@ export const EventCard = (props: EventCardProps) => {
 
   return (
     <>
-      <Grid item xs={12} sm={6}>
+      <Grid size={4}>
+
         <Card>
           <CardHeader
             action={

diff --git a/client/src/components/EventList.tsx b/client/src/components/EventList.tsx
@@ -3,12 +3,12 @@ import { useNavigate } from "react-router-dom";
 import { signout } from "../helpers/helpers";
 import { updateEvent } from "../helpers/services/event_services";
 
-import { Grid } from "@mui/material";
-
+import Grid from "@mui/material/Grid2";
 
 import { getUsersEvents } from "../helpers/services/event_services";
 import { EventCard } from "./EventCard";
 import { EventDocument } from "../helpers/EventDocument";
+import { useTranslation } from "react-i18next";
 
 
 type EventListProps = {
@@ -19,6 +19,7 @@ type EventListProps = {
 const EventList = (props: EventListProps) => {
   const token = JSON.parse(localStorage.getItem("access_token") as string);
   const navigate = useNavigate();
+  const { t, i18n } = useTranslation();
 
   const [events, setEvents] = useState<EventDocument[]>([]);
 
@@ -40,7 +41,7 @@ const EventList = (props: EventListProps) => {
 
   const list =
     events.length === 0 ? (
-      <div>No events yet, create one</div>
+      <div>{t("sunny_great_halibut_empower")}</div>
     ) : (
       events.map((event, index) => (
         <EventCard
@@ -62,7 +63,7 @@ const EventList = (props: EventListProps) => {
   return (
     <>
       <Grid
-        container
+        size={12}
         spacing={3}
         justifyItems="space-around"
         alignItems="stretch"

diff --git a/client/src/i18n.ts b/client/src/i18n.ts
@@ -22,10 +22,7 @@ i18n
     // init i18next
     // for all options read: https://www.i18next.com/overview/configuration-options
     .init({
-        fallbackLng: {
-            'de-DE': ['de'],
-            default: 'en'
-        },
+        fallbackLng: 'en',
         debug: true,
 
         backend: {

diff --git a/client/src/pages/App.tsx b/client/src/pages/App.tsx
@@ -68,7 +68,9 @@ const App = () => {
             {user ? (
               <>
                 <Grid>
-                  {user.name}
+                  <Typography variant="h5">
+                    {user.name}
+                  </Typography>
                   <br />
                   <Link component={RouterLink} to={"/users/" + user.user_url}>
                     {user.user_url}
@@ -82,7 +84,7 @@ const App = () => {
           </Grid>
         </Box>
 
-        <Box p="1em">{renderList()}</Box>
+        {renderList()}
       </Container>
     </>
   );

diff --git a/client/src/pages/Booking.tsx b/client/src/pages/Booking.tsx
@@ -152,7 +152,24 @@ const Booking = (props: any) => {
   const [error, setError] = useState<Error | null>(null);
   const [isPending, startTransition] = useTransition()
 
-
+  const updateSlots = (startDate: Date) => {
+    getAvailableTimes(
+      startDate,
+      addDays(addMonths(startDate, 6), 1),
+      event.url,
+      user._id
+    )
+      .then((slots) => {
+        console.log("slots %o", slots);
+        setSlots(slots);
+      })
+      .catch((err) => {
+        setError({
+          message: "could not get available time slots",
+          details: err,
+        });
+      });
+  }
 
   useEffect(() => {
 
@@ -184,27 +201,9 @@ const Booking = (props: any) => {
   }, [data.url, data.user_url, navigate, selectedDate]);
 
   useEffect(() => {
-    const updateSlots = () => {
-      getAvailableTimes(
-        beginDate,
-        addDays(addMonths(beginDate, 1), 1),
-        event.url,
-        user._id
-      )
-        .then((slots) => {
-          console.log("slots %o", slots);
-          setSlots(slots);
-        })
-        .catch((err) => {
-          setError({
-            message: "could not get available time slots",
-            details: err,
-          });
-        });
-    }
 
     if (user && event && event.url) {
-      startTransition(() => updateSlots());
+      startTransition(() => updateSlots(beginDate));
     }
 
   }, [beginDate, user, event]);
@@ -254,7 +253,9 @@ const Booking = (props: any) => {
   };
 
   const handleMonthChange = (date: Date) => {
-    setBeginDate(date);
+    //setBeginDate(date);
+    console.log("handleMonthChange: %o", date);
+    //updateSlots(date);
   };
 
   const handleDateChange = (newValue: Date) => {
@@ -455,6 +456,7 @@ const Booking = (props: any) => {
             <Grid container spacing={2}>
               <Grid size={8} hidden={activeStep > 1}>
                 <StaticDatePicker
+                  minDate={beginDate}
                   displayStaticWrapperAs="desktop"
                   value={selectedDate || new Date()}
                   onChange={handleDateChange}

diff --git a/client/src/pages/Landing.tsx b/client/src/pages/Landing.tsx
@@ -5,37 +5,37 @@ import { Navigate } from "react-router-dom";
 
 import AppNavbar from "../components/AppNavbar";
 import { Paper, Container, Typography, List, ListItem, ListItemText } from "@mui/material";
+import { useTranslation } from "react-i18next";
 
 const Landing = (props: any) => {
+  const { t, i18n } = useTranslation();
   return (
     <div className="landing">
       {isAuthenticated() ? <Navigate to="/app" /> : null}
       <AppNavbar />
       <Paper>
         <Container>
-          <h2>How Bookme works</h2>
+
+          <Typography variant="h3">{t("orange_grand_racoon_fall")}</Typography>
           <Typography variant="body1">
-            Bookme is a simple, easy to use, appointment booking system. It
-            allows you to create events, share your link and let users book
-            appointments with you.
+            {t("male_patient_hedgehog_ask")}
           </Typography>
           <List>
             <ListItem>
               <ListItemText primary="Step 1: Configure your calendars"
-                secondary="Specify where BookMe adds your appointments and where it checks whether you are busy." />
+                secondary={t("factual_moving_hawk_belong")} />
             </ListItem>
             <ListItem>
-              <ListItemText primary="Step 2: Create events"
-                secondary="Add your available times and you're
-                good to go!"/>
+              <ListItemText primary={t("pink_polite_racoon_earn")}
+                secondary={t("happy_wise_mantis_laugh")} />
             </ListItem>
             <ListItem>
-              <ListItemText primary="Step 3: Share your link"
-                secondary="Users can use this link to book appointments." />
+              <ListItemText primary={t("careful_misty_bullock_splash")}
+                secondary={t("extra_misty_panda_grip")} />
             </ListItem>
             <ListItem>
-              <ListItemText primary="Done! Congrats!"
-                secondary="Once a user books an appointment, the event is added to your calendar." />
+              <ListItemText primary={t("game_frail_vole_treasure")}
+                secondary={t("still_helpful_koala_trust")} />
             </ListItem>
           </List>
         </Container>