CherokeeLanguage · CalebLItalien · Jan 23, 2023 · Jan 23, 2023 · Jan 23, 2023 · Feb 6, 2023
diff --git a/public/index.html b/public/index.html
@@ -30,18 +30,30 @@
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Cherokee&family=Noto+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> 
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <!-- <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <div id="modal-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`.
-    -->
+      To create a production bundle, use `npm run build` or `yarn build`. -->
+      <div id="root"></div>
+      <div id="modal-root"></div>
+      <script>
+        if ('serviceWorker' in navigator) {
+          window.addEventListener('load', function() {
+            navigator.serviceWorker.register('%PUBLIC_URL%/serviceWorker.js').then(function(registration){
+              console.log('ServiceWorker registered: ', registration.scope);
+            }, function(err) {
+              console.log('ServiceWorker unable to be registered: ', err);
+            });
+          });
+        }
+      </script>
   </body>
 </html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -18,7 +18,7 @@
       "sizes": "512x512"
     }
   ],
-  "start_url": ".",
+  "start_url": "index.html",
   "display": "standalone",
   "theme_color": "#000000",
   "background_color": "#ffffff"

diff --git a/public/serviceWorker.js b/public/serviceWorker.js
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -35,6 +35,13 @@ export const Button = styledWithDefault(
         &:hover {
           border: 1px solid ${theme.colors.TEXT_GRAY};
         }
+        &:disabled{
+          background: ${theme.colors.MED_GRAY};
+
+          &:hover {
+            border: 1px solid ${theme.colors.MED_GRAY};
+          }
+        }
       `}
 
     ${({ variant }) =>

diff --git a/src/components/GettingStartedModal/ChooseSetStep.tsx b/src/components/GettingStartedModal/ChooseSetStep.tsx
@@ -0,0 +1,111 @@
+import { ChangeEvent, FormEvent, ReactElement, useEffect , useState} from "react";
+import { NavigationButtons, Step, StepProps } from ".";
+import { Button } from "../Button";
+import {
+  isPhoneticsPreference,
+  PhoneticsPreference,
+  PREFERENCE_LITERATES,
+} from "../../state/reducers/phoneticsPreference";
+import { GROUPS, isGroupId } from "../../state/reducers/groupId";
+import { SectionHeading } from "../SectionHeading";
+import { CollectionDetails } from "../CollectionDetails";
+
+import { collections, VocabSet } from "../../data/vocabSets"; 
+import { useUserStateContext } from "../../providers/UserStateProvider";
+import { TermsByProficiencyLevelChart } from "../TermsByProficiencyLevelChart";
+
+export const ChooseSetStep: Step = {  
+  title: "Choose your first set",
+  commitState: ({ collectionId }, {setUpstreamCollection}) => {
+    if (collectionId !== undefined){
+      setUpstreamCollection(collectionId);
+    }
+  },
+  Component: ChooseStepComponent,
+};
+
+function ChooseStepComponent({
+  wizardState: { collectionId, groupId },
+  setWizardState,
+  goToNextStep,
+  goToPreviousStep,
+}: StepProps): ReactElement {
+  let canGoToNextStep = collectionId !== undefined; 
+  function setWizardStateCollectionId(
+    newCollectionId: string
+  ) {
+    setWizardState((s) => ({
+      ...s,
+      collectionId: newCollectionId,
+    }));
+  }
+  function onRadioChanged(e: ChangeEvent<HTMLInputElement>) {
+    const collectionId  = e.target.value;
+      setWizardStateCollectionId(collectionId);
+      canGoToNextStep = true; 
+  }
+  function onSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    if (collectionId && goToNextStep) goToNextStep();
+  }
+
+
+  function totalTerms(vocab: VocabSet[]){
+    var t = 0; 
+
+    vocab.map((vocabSet) => (
+      t += vocabSet.terms.length
+    ))
+
+    return t; 
+  } 
+
+  useEffect(() => {
+    if (!collectionId) {
+      const defaultCollectionId =
+        groupId && isGroupId(groupId)
+          ? GROUPS[groupId].defaultCollectionId
+          : undefined;
+      if (defaultCollectionId) {
+        setWizardStateCollectionId(defaultCollectionId)
+        canGoToNextStep = true;
+      }
+    }
+  }, [collectionId]);
+
+  return (
+    <div>
+
+      <p></p>
+
+      <form onSubmit={onSubmit}>
+        <fieldset>
+          <legend>Select a collection</legend>
+
+          {Object.values(collections).map((collection, idx) => (
+            <div key={idx}>
+
+            <input 
+              name = {collection.title}
+              type = "radio"
+              value = {collection.id} 
+              id = {collection.id} 
+              onChange = {onRadioChanged}
+              checked = {collectionId == collection.id}
+            />
+            <label htmlFor={collection.id}>{collection.title} ({totalTerms(collection.sets)} terms) </label>
+
+            </div>
+
+      ))}
+
+        </fieldset>
+        <NavigationButtons
+          goToPreviousStep={goToPreviousStep}
+          goToNextStep={goToNextStep}
+          disabled = {!canGoToNextStep}
+        />
+      </form>
+    </div>
+  );
+}
diff --git a/src/components/GettingStartedModal/GroupRegistrationStep.tsx b/src/components/GettingStartedModal/GroupRegistrationStep.tsx
@@ -0,0 +1,100 @@
+import { ChangeEvent, FormEvent, useState } from "react";
+import { NavigationButtons, Step, StepProps } from ".";
+import { GROUPS } from "../../state/reducers/groupId";
+import { Button } from "../Button";
+
+export const GroupRegistrationStep: Step = {
+  title: "Personal Information",
+  Component: GroupRegistrationForm,
+  commitState: ({ groupId, email, whereFound }, { registerGroup, setUserEmail, setWhereFound }) => {
+    registerGroup(groupId);
+    setWhereFound(whereFound);
+    setUserEmail(email);
+  },
+};
+
+export function GroupRegistrationForm({
+  wizardState: { groupId , email, whereFound},
+  setWizardState,
+  goToNextStep,
+  goToPreviousStep,
+  exitWizard
+}: StepProps) {
+  const [enabled, setEnabled] = useState(groupId!=undefined && email !== ''); 
+
+  function onGroupIdChanged(e: ChangeEvent<HTMLInputElement>) {
+    const groupId = e.target.value;
+    setWizardState((s) => ({ ...s, groupId }));
+    setEnabled(email !== ''); 
+  }
+
+  function onEmailChanged(e: ChangeEvent<HTMLInputElement>) {
+    const email = e.target.value;
+    setWizardState((s) => ({ ...s, email }));
+    setEnabled(groupId !== undefined && email !== ''); 
+  }
+
+  function onWhereFoundChanged(e: ChangeEvent<HTMLInputElement>){
+    const whereFound = e.target.value;
+    setWizardState((s) => ({ ...s, whereFound }));
+    setEnabled(whereFound !== undefined);
+  }
+
+  function onSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    if (groupId && email && goToNextStep) goToNextStep();
+  }
+  return (
+    <>
+      <p> 
+        We're happy to have you here! Who are you, and how did you hear about us?
+        <br></br>
+        <br></br>
+        After you've completed this, you're all set! Continue for advanced settings.
+      </p>
+      <form onSubmit={onSubmit}>
+        <fieldset>
+          <label>Email Address</label>
+          <input
+            type = "email"
+            name = "email"
+            value = {email}
+            onChange = {onEmailChanged}
+          />
+        </fieldset>
+        <fieldset>
+          <label>Where did you find us?</label>
+          <input
+            type = "whereFound"
+            name = "whereFound"
+            value = {whereFound}
+            onChange = {onWhereFoundChanged}
+          />
+        </fieldset>
+        <fieldset>
+          Group
+          {Object.entries(GROUPS).map(([id, group]) => (
+            <div key={id}>
+              <input
+                type="radio"
+                name="groupId"
+                value={id}
+                id={id}
+                checked={groupId === id}
+                onChange={onGroupIdChanged}
+              />
+              <label htmlFor={id}>{group.name}</label>
+            </div>
+          ))}
+        </fieldset>
+        <NavigationButtons
+          goToPreviousStep={goToPreviousStep}
+          goToNextStep={goToNextStep}
+          exitWizard={exitWizard}
+          disabled = {!enabled} 
+        >
+        </NavigationButtons>
+      </form>
+    </>
+  );
+}
diff --git a/src/components/GettingStartedModal/PhoneticsStep.tsx b/src/components/GettingStartedModal/PhoneticsStep.tsx
@@ -0,0 +1,94 @@
+import { ChangeEvent, FormEvent, ReactElement, useEffect, useState } from "react";
+import { NavigationButtons, Step, StepProps } from ".";
+import { Button } from "../Button";
+import {
+  isPhoneticsPreference,
+  PhoneticsPreference,
+  PREFERENCE_LITERATES,
+} from "../../state/reducers/phoneticsPreference";
+
+import { GROUPS, isGroupId } from "../../state/reducers/groupId";
+
+export const PhoneticsStep: Step = {
+  /*
+   * Sets the phonetic preference to the wizard state.
+   */
+  title: "Phonetics",
+  commitState: ({ phoneticsPreference }, { setPhoneticsPreference }) => {
+    if (phoneticsPreference) { setPhoneticsPreference(phoneticsPreference); }
+  },
+  Component: PhoneticsStepComponent,
+};
+
+function PhoneticsStepComponent({
+  /*
+   * Defines the phonetics step. Allows user to set phonetics preference, advance to the next step, or go to the previous step. Offers a default preference.
+   */
+  wizardState: { phoneticsPreference, groupId },
+  setWizardState,
+  goToNextStep,
+  goToPreviousStep,
+}: StepProps): ReactElement {
+  const [enabled, setEnbabled] = useState(phoneticsPreference != undefined); 
+  function setWizardStatePhoneticsPreference(
+    newPhoneticsPreference: PhoneticsPreference
+  ) {
+    setWizardState((s) => ({
+      ...s,
+      phoneticsPreference: newPhoneticsPreference,
+    }));
+  }
+  function onPreferenceChanged(e: ChangeEvent<HTMLInputElement>) {
+    const phoneticsPreference = e.target.value;
+    if (isPhoneticsPreference(phoneticsPreference))
+      setWizardStatePhoneticsPreference(phoneticsPreference);
+      setEnbabled(true); 
+  }
+  function onSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    if (phoneticsPreference && goToNextStep) goToNextStep();
+  }
+
+  useEffect(() => {
+    if (!phoneticsPreference) {
+      const defaultPhoneticsPreference =
+        groupId && isGroupId(groupId)
+          ? GROUPS[groupId].phoneticsPreference
+          : undefined;
+      if (defaultPhoneticsPreference) {
+        setWizardStatePhoneticsPreference(defaultPhoneticsPreference);
+        setEnbabled(true); 
+      }
+    }
+  }, [phoneticsPreference]);
+
+  return (
+    <div>
+      <p>Select your phonetics preference!</p>
+
+      <form onSubmit={onSubmit}>
+        <fieldset>
+          <legend>Phonetics preference</legend>
+          {Object.entries(PREFERENCE_LITERATES).map(([value, literate], i) => (
+            <div key={i}>
+              <input
+                type="radio"
+                name="phoneticsPreference"
+                value={value}
+                id={value}
+                checked={phoneticsPreference === value}
+                onChange={onPreferenceChanged}
+              />
+              <label htmlFor={value}>{literate}</label>
+            </div>
+          ))}
+        </fieldset>
+        <NavigationButtons
+          goToPreviousStep={goToPreviousStep}
+          goToNextStep={goToNextStep}
+          disabled ={!enabled}
+        />
+      </form>
+    </div>
+  );
+}