move startDate to backend

8 files changed, 81 insertions, 37 deletions

diff --git a/src/constants/startDate.ts b/server/data/startDate.ts
index bb49bfe..bb49bfe 100644
--- a/src/constants/startDate.ts
+++ b/server/data/startDate.ts
diff --git a/server/index.ts b/server/index.ts
index 4e9d1b5..d347e8f 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -2,7 +2,7 @@ import express from 'express';
 import path from 'path';
 import crypto from 'crypto';
 import { songs } from './data/songs';
-import { startDate } from '../src/constants/startDate';
+import { startDate } from './data/startDate';
 import cors from 'cors';
 
 
@@ -41,6 +41,10 @@ app.get('/songs', (_req, res) => {
   res.json(songs.map(({ artist, name }) => ({ artist, name })));
 });
 
+app.get('/info', (_req, res) => {
+  res.json({ startDate: startDate.toISOString() });
+});
+
 if (process.env.NODE_ENV === 'production') {
   app.use(express.static(path.join(__dirname, '../build')));
   app.get('*', (_req, res) => {
diff --git a/src/components/Result/index.tsx b/src/components/Result/index.tsx
index 259525b..706ddca 100644
--- a/src/components/Result/index.tsx
+++ b/src/components/Result/index.tsx
@@ -26,11 +26,13 @@ function Solution({
       <Styled.SongTitle>
         Today&apos;s song is {todaysSolution.artist} - {todaysSolution.name}
       </Styled.SongTitle>
-      {didGuess &&
+
+      {didGuess && (
         <Styled.Tries>
           You guessed it in {currentTry} {currentTry === 1 ? 'try' : 'tries'}.
         </Styled.Tries>
-      }
+      )}
+
       <MiniYouTubePlayer id={todaysSolution.youtubeId} />
     </>
   );
@@ -41,33 +43,42 @@ interface ShareButtonProps {
   variant?: keyof typeof theme;
 }
 
-function ShareButton({
-  guesses,
-  variant
-}:ShareButtonProps) {
-  const result = scoreToEmoji(guesses);
+function ShareButton({ guesses, variant }: ShareButtonProps) {
   const [buttonText, setButtonText] = useState('Share Results');
-  const handleClick = React.useCallback(() => {
-    // The Windows share sheet is dumb and doesn't have a copy function.
+  const [result, setResult] = useState<string>('');
+
+  React.useEffect(() => {
+    let cancelled = false;
+
+    scoreToEmoji(guesses).then((text) => {
+      if (!cancelled) setResult(text);
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [guesses]);
+
+  const handleClick = React.useCallback(async () => {
     const windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'];
-    const onWindows = windowsPlatforms.indexOf(window.navigator.platform) !== -1;
+    const onWindows =
+      windowsPlatforms.indexOf(window.navigator.platform) !== -1;
+
     if (navigator.share !== undefined && !onWindows) {
-      navigator.share({text: result})
+      await navigator.share({ text: result });
     } else if (navigator.clipboard !== undefined) {
-      navigator.clipboard.writeText(result)
+      await navigator.clipboard.writeText(result);
       setButtonText('Copied!');
     } else {
       setButtonText('Failed to open share menu or copy');
     }
-  }, [guesses]);
+  }, [result]);
 
   return (
-    <>
-      <Button onClick={handleClick} variant={variant}>
-        {buttonText}
-      </Button>
-    </>
-  )
+    <Button onClick={handleClick} variant={variant}>
+      {buttonText}
+    </Button>
+  );
 }
 
 interface Props {
@@ -93,26 +104,41 @@ export function Result({
 
   if (didGuess) {
     const textForTry = ["Perfect!", "Wow!", "Super!", "Congrats!", "Nice!"];
+
     return (
       <>
         <Styled.ResultTitle>{textForTry[currentTry - 1]}</Styled.ResultTitle>
-        <Solution todaysSolution={todaysSolution} didGuess={didGuess} currentTry={currentTry} />
+
+        <Solution
+          todaysSolution={todaysSolution}
+          didGuess={didGuess}
+          currentTry={currentTry}
+        />
+
         <ShareButton guesses={guesses} variant="green" />
+
         <Styled.TimeToNext>
           Remember to come back in {hoursToNextDay} hours!
         </Styled.TimeToNext>
       </>
     );
-  } else {
-    return (
-      <>
-        <Styled.ResultTitle>Unfortunately, thats wrong.</Styled.ResultTitle>
-        <Solution todaysSolution={todaysSolution} didGuess={didGuess} currentTry={currentTry} />
-        <ShareButton guesses={guesses} variant="red" />
-        <Styled.TimeToNext>
-          Try again in {hoursToNextDay} hours.
-        </Styled.TimeToNext>
-      </>
-    );
   }
+
+  return (
+    <>
+      <Styled.ResultTitle>Unfortunately, thats wrong.</Styled.ResultTitle>
+
+      <Solution
+        todaysSolution={todaysSolution}
+        didGuess={didGuess}
+        currentTry={currentTry}
+      />
+
+      <ShareButton guesses={guesses} variant="red" />
+
+      <Styled.TimeToNext>
+        Try again in {hoursToNextDay} hours.
+      </Styled.TimeToNext>
+    </>
+  );
 }
diff --git a/src/constants/index.ts b/src/constants/index.ts
index fb5d7aa..75c49ec 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -1,4 +1,3 @@
 export { appName } from "./appName";
 export { playTimes } from "./playTimes";
-export { startDate } from "./startDate";
 export { theme } from "./theme";
diff --git a/src/helpers/fetchInfo.ts b/src/helpers/fetchInfo.ts
new file mode 100644
index 0000000..248cd98
--- /dev/null
+++ b/src/helpers/fetchInfo.ts
@@ -0,0 +1,9 @@
+
+import { Info } from "../types/info";
+
+export const fetchInfo = async (): Promise<Info> => {
+  const API_URL = process.env.REACT_APP_API_URL || "https://localhost:3000";
+  const response = await fetch(`${API_URL}/info`);
+  const data = await response.json();
+  return data as Info;
+};
diff --git a/src/helpers/scoreToEmoji.ts b/src/helpers/scoreToEmoji.ts
index cb525a8..5af1026 100644
--- a/src/helpers/scoreToEmoji.ts
+++ b/src/helpers/scoreToEmoji.ts
@@ -1,9 +1,12 @@
 import { GuessType, GuessState } from "../types/guess";
-import { appName, startDate } from "../constants";
+import { appName } from "../constants";
+import { fetchInfo } from "./fetchInfo";
 
-export function scoreToEmoji(guesses: GuessType[]): string {
+export async function scoreToEmoji(guesses: GuessType[]): Promise<string> {
   const msInDay = 86400000;
   const todaysDate = new Date();
+  const info = await fetchInfo();
+  const startDate = new Date(info.startDate);
   const index = Math.floor((todaysDate.getTime() - startDate.getTime() )/msInDay) + 1
   const emojis = {
     incorrect: "🟥",
diff --git a/src/types/info.ts b/src/types/info.ts
new file mode 100644
index 0000000..e570325
--- /dev/null
+++ b/src/types/info.ts
@@ -0,0 +1,3 @@
+export interface Info {
+  startDate: string;
+}
diff --git a/tsconfig.server.json b/tsconfig.server.json
index bc2f225..5d8c93b 100644
--- a/tsconfig.server.json
+++ b/tsconfig.server.json
@@ -5,7 +5,7 @@
     "outDir": "dist/server",
     "rootDir": "server",
     "esModuleInterop": true,
-    "strict": true
+    "strict": true,
   },
-  "include": ["server", "src/constants"]
+  "include": ["server"]
 }