Refactor BabyWeeksCalculator to use useMemo for optimized rendering o…

…f transitions; update validation logging for development environment; add 404.html template
ntemposd · Jan 6, 2025 · cd486b9 · cd486b9
1 parent 3fc06ee
commit cd486b9
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 18 deletions.
diff --git a/public/404.html b/public/404.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="Babyweeks Calculator"
+      content="Explore your baby's development cycle"
+    />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Babyweeks Calculator</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/src/components/BabyWeeksCalculator.js b/src/components/BabyWeeksCalculator.js
@@ -1,5 +1,5 @@
-import React, { useState, useRef } from 'react';
-import { Link } from 'react-router-dom'; // Import the Link component
+import React, { useState, useRef, useMemo } from 'react'; // Added useMemo
+import { Link } from 'react-router-dom';
 import '../App.css';
 import babyImage from '../assets/baby-girl.svg';
 import headerImage from '../assets/baby_texture.png';
@@ -12,7 +12,6 @@ import "slick-carousel/slick/slick-theme.css";
 
 // Import the custom hook
 import { useBabyTransitions } from '../hooks/useBabyTransitions';
-import { formatMessage } from '../utils/utils';
 
 function preloadImage(url) {
   const img = new Image();
@@ -34,6 +33,22 @@ function BabyWeeksCalculator() {
     setCurrentMessageIndex,
   } = useBabyTransitions(startDate, transitionsData);
 
+  // Memoize formatted transitions
+  const memoizedFormattedTransitions = useMemo(() => {
+    return allTransitions.map(transition => ({
+      ...transition,
+      formattedMessage: (
+        <>
+          <h5 className="transition-title">{transition.title}</h5>
+          <p className="transition-weeks text-muted fs-6">
+            Weeks: {transition.minWeeks}-{transition.maxWeeks}
+          </p>
+          <p className="transition-description">{transition.description}</p>
+        </>
+      ),
+    }));
+  }, [allTransitions]);
+
   // Show slider if valid transitions exist
   const showSlider =
     startDate &&
@@ -46,9 +61,10 @@ function BabyWeeksCalculator() {
       <header className="App-header">
         <div className="container pt-4">
           <img src={babyImage} className="App-logo" alt="Baby" />
-          <h1 className="fw-bold">Babyweeks</h1>
-          <p className="lead">Explore Your Infant's Development <Link to="/about"><span className="material-icons">info</span>
-          </Link></p>
+          <h1 className="fw-bold">Babyweeks v1</h1>
+          <p className="lead">
+            Explore Your Infant's Development <Link to="/about"><span className="material-icons">info</span></Link>
+          </p>
         </div>
         <svg height="1" width="100%" className="header-line">
           <line x1="0" y1="0" x2="100%" y2="1" stroke="yellow" strokeWidth="4" />
@@ -86,14 +102,14 @@ function BabyWeeksCalculator() {
                 slidesToShow={1}
                 slidesToScroll={1}
                 initialSlide={currentMessageIndex || 0}
-                afterChange={(index) => {
-                  console.log("Slider Changed to Index:", index);
-                  setCurrentMessageIndex(index); // Update index
-                }}
+                afterChange={(index) => setCurrentMessageIndex(index)}
               >
-                {allTransitions.map((transition, index) => (
+                {memoizedFormattedTransitions.map((transition, index) => (
                   <div key={index} className="message">
-                    {formatMessage(transition)}
+                    {Math.abs(index - currentMessageIndex) <= 1
+                      ? transition.formattedMessage // Render precomputed message
+                      : <p>Loading...</p>
+                    }
                   </div>
                 ))}
               </Slider>
@@ -102,12 +118,10 @@ function BabyWeeksCalculator() {
         </div>
       </main>
 
-      {/* Add a link to the About Page */}
       <footer className="mt-5 py-3">
         <p>© 2025 · Crafted with ❤️ by ntemposd</p>
       </footer>
     </div>
-
   );
 }
 

diff --git a/src/hooks/useBabyTransitions.js b/src/hooks/useBabyTransitions.js
@@ -17,7 +17,7 @@ export function useBabyTransitions(selectedDate, transitionsData) {
     const { isValid, weeks, message } = validateSelectedDate(selectedDate, today);
 
     if (!isValid) {
-      if (weekDifference !== null || displayedMessage !== message) {
+      if (process.env.NODE_ENV === 'development') {
         console.log("Validation failed:", message);
       }
       setWeekDifference(null);
@@ -27,7 +27,9 @@ export function useBabyTransitions(selectedDate, transitionsData) {
       return;
     }
 
-    console.log("Validation succeeded. Weeks:", weeks);
+    if (process.env.NODE_ENV === 'development') {
+      console.log("Validation succeeded. Weeks:", weeks);
+    }
     setWeekDifference(weeks);
 
     const { foundTransition, orderedTransitions, fallbackMessage } = findTransitions(
@@ -41,6 +43,7 @@ export function useBabyTransitions(selectedDate, transitionsData) {
     setDisplayedMessage(foundTransition ? '' : fallbackMessage);
   }, [selectedDate, transitionsData]);
 
+
 
   return {
     weekDifference,

diff --git a/src/utils/utils.js b/src/utils/utils.js
@@ -81,11 +81,12 @@ export function calculateWeeks(selectedDate, today = new Date()) {
   // Function to format transition message
   export function formatMessage(transition) {
     if (!transition) {
-      console.error("Invalid Transition Passed to formatMessage");
+      if (process.env.NODE_ENV === 'development') {
+        console.error("Invalid Transition Passed to formatMessage");
+      }
       return null;
     }
 
-    console.log("Formatting Transition Message:", transition);
     return (
       <>
         <h5 className="transition-title">{transition.title}</h5>