From 16b155c2232531eae66491d09ddfe3553c4ed2f9 Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Mon, 16 Nov 2020 16:23:15 -0500
Subject: [PATCH 1/3] style: run prettier

---
 src/pages/learn/[mission]/[stage].js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/learn/[mission]/[stage].js b/src/pages/learn/[mission]/[stage].js
index c4e290ce..263b1e27 100644
--- a/src/pages/learn/[mission]/[stage].js
+++ b/src/pages/learn/[mission]/[stage].js
@@ -23,7 +23,9 @@ export default function Stage({ mission, stage }) {
   const poster = stage.content?.[0].coverImage?.asset.url;
   const description = hydrate(stage.renderedStageDescription);
   const descriptionMarkdown = stage.content?.[0].body;
-  const descriptionMeta = removeMarkdown(descriptionMarkdown?.split('\n')?.[0] ?? '');
+  const descriptionMeta = removeMarkdown(
+    descriptionMarkdown?.split('\n')?.[0] ?? ''
+  );
   const [missionComplete, setMissionComplete] = useState(false);
   const { user, getUser } = useUserState();
   const [moveToNextVideo, setMoveToNextVideo] = useState(null);

From 87e7de794dd4d27ba79dffb1a2b2cdbba41152bc Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Mon, 16 Nov 2020 16:23:21 -0500
Subject: [PATCH 2/3] feat (#319): add progress percentage

---
 src/components/ChonkyFooter.js | 30 +++++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/ChonkyFooter.js b/src/components/ChonkyFooter.js
index 49cc7590..3af86603 100644
--- a/src/components/ChonkyFooter.js
+++ b/src/components/ChonkyFooter.js
@@ -1,7 +1,9 @@
 import styles from './ChonkyFooter.module.css';
+import { useUserState } from '@context/user';
 import FloatingAstronaut from '@components/FloatingAstronaut';
 
 export default function Layout({ mission, currentStage }) {
+  const { user } = useUserState();
   const missionTotal =
     mission.stages && mission.stages.length ? mission.stages.length : 1;
 
@@ -12,17 +14,25 @@ export default function Layout({ mission, currentStage }) {
     });
   };
 
+  const missionProgress = () => {
+    const progressDecimal = user.activity.userMissions?.find(
+      (userMission) => userMission.title === mission.title
+    ).progress;
+
+    return `${Math.ceil(progressDecimal * 100)}%`;
+  };
+
   const progressIndicator = () => {
     if (currentStage) {
       return (
         <div className={styles.progress}>
-          <h3>your progress</h3>
+          <h3>Current Stage</h3>
 
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            width="130"
+            width="300"
             height="100"
-            viewBox="0 0 130 100"
+            viewBox="0 0 300 100"
           >
             <g fill="white">
               <line
@@ -47,6 +57,20 @@ export default function Layout({ mission, currentStage }) {
               <text x="90" y="70" fontSize="30px">
                 {missionTotal}
               </text>
+              <line
+                x1="140"
+                x2="140"
+                y1="3"
+                y2="80"
+                stroke="currentColor"
+                strokeWidth="2"
+              />
+              <text x="150" y="40" fontSize="50px">
+                {missionProgress()}
+              </text>
+              <text x="150" y="70" fontSize="25px">
+                Complete
+              </text>
             </g>
           </svg>
         </div>

From ee22eacf28516280fd7dd2272a92b0c4e2d91c0a Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Mon, 16 Nov 2020 16:23:45 -0500
Subject: [PATCH 3/3] refactor (#319): improve var naming intent

---
 src/components/ChonkyFooter.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ChonkyFooter.js b/src/components/ChonkyFooter.js
index 3af86603..cb8ef4c0 100644
--- a/src/components/ChonkyFooter.js
+++ b/src/components/ChonkyFooter.js
@@ -7,7 +7,7 @@ export default function Layout({ mission, currentStage }) {
   const missionTotal =
     mission.stages && mission.stages.length ? mission.stages.length : 1;
 
-  const currentMission = () => {
+  const currentStageIndex = () => {
     if (!mission.stages) return 0;
     return mission.stages.findIndex((el) => {
       return el.slug.current === currentStage;
@@ -44,7 +44,7 @@ export default function Layout({ mission, currentStage }) {
                 strokeWidth="2"
               />
               <text x="50" y="40" fontSize="50px">
-                {currentMission() + 1}
+                {currentStageIndex() + 1}
               </text>
               <line
                 x1="110"