1 files changed, 57 insertions, 31 deletions

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>
+    </>
+  );
 }