Merge pull request #826 from fturmel/PR/stabilize-build-outputs

Stabilize HTML build outputs
CodingTrain · Dec 16, 2022 · 8966474 · 8966474
2 parents f5c0b4b + 15267aa
commit 8966474
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/src/components/ItemsPage.js b/src/components/ItemsPage.js
@@ -129,6 +129,7 @@ const ItemsPage = ({
           selected={selectedLanguage}
           onChange={setSelectedLanguage}
           variant={variant}
+          instanceId="languages-filter"
         />
 
         <Select
@@ -140,6 +141,7 @@ const ItemsPage = ({
           selected={selectedTopic}
           onChange={setSelectedTopic}
           variant={variant}
+          instanceId="topics-filter"
         />
       </div>
 

diff --git a/src/components/Select.js b/src/components/Select.js
@@ -14,7 +14,8 @@ export const Select = ({
   onChange,
   icon,
   className,
-  variant
+  variant,
+  instanceId
 }) => {
   const opts = useMemo(() => options.map(toOption), [options]);
   const handleOnChange = (o, action) => onChange(o ? o.value : o);
@@ -38,6 +39,7 @@ export const Select = ({
             options={opts}
             defaultValue={selected ? toOption(selected) : selected}
             onChange={handleOnChange}
+            instanceId={instanceId}
           />
 
           <div className={css.itemSpacer}></div>

diff --git a/src/components/TopBar.js b/src/components/TopBar.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'gatsby';
 
 import Menu from './Menu';
@@ -39,7 +39,18 @@ const longDate = (date) => {
 };
 
 const TopBar = () => {
-  const today = new Date();
+  const [date, setDate] = useState({ long: '', short: '' });
+
+  useEffect(() => {
+    // Runs client-side only, the date should not be captured at build time during SSG
+
+    const today = new Date();
+    setDate({
+      long: longDate(today),
+      short: shortDate(today)
+    });
+  }, []);
+
   return (
     <div className={css.outer}>
       <header className={css.root}>
@@ -50,8 +61,8 @@ const TopBar = () => {
         </div>
         <div className={css.clock}>🕛</div>
         <div className={css.date}>
-          <span className={css.longDate}>{longDate(today)}</span>
-          <span className={css.shortDate}>{shortDate(today)}</span>
+          <span className={css.longDate}>{date.long}</span>
+          <span className={css.shortDate}>{date.short}</span>
         </div>
         <Menu />
       </header>