Merge pull request #221 from hampster2018/mackenziesalinas-week-3-and-4

Mackenziesalinas week 3 and 4

package.json

@@ -12,7 +12,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.0",
+    "@popperjs/core": "2.11.8",
     "@snowpack/plugin-typescript": "^1.2.1",
     "@types/node": "^20.4.8",
     "@uiw/react-heat-map": "^2.2.0",
@@ -29,16 +29,13 @@
     "midi-note": "^1.0.0",
     "multi-range-slider-react": "^2.0.3",
     "react": "^18.2.0",
-    "react-accordion-with-header": "^0.1.3",
     "react-apexcharts": "^1.3.9",
     "react-bootstrap": "^2.1.0",
     "react-chartjs-2": "^4.3.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.0.2",
     "react-dropdown": "^1.11.0",
-    "react-fade-in": "^2.0.1",
     "react-icons": "^4.7.1",
-    "react-native-dropdown-picker": "^5.4.6",
-    "react-native-element-dropdown": "^2.10.0",
+    "react-is": "^16.13.1",
     "react-piano": "^3.1.3",
     "react-popper": "^2.2.5",
     "react-portal": "^4.2.1",
@@ -71,7 +68,7 @@
     "@snowpack/plugin-postcss": "^1.4.3",
     "@snowpack/plugin-react-refresh": "^2.5.0",
     "@snowpack/web-test-runner-plugin": "^0.2.2",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^14.1.0",
     "@types/chai": "^4.3.0",
     "@types/lodash": "^4.14.178",
     "@types/mocha": "^9.0.0",

src/components/navbar.tsx

@@ -96,17 +96,10 @@ const Navbar = (): ReactElement => {
           history.push(ROUTER_PATHS.home);
         }
       } else if (level == 'CM') {
-        setModuleNumber(1);
-        const payload: any[] = [];
-        payload.push('CONCEPTSMASTERED');
-        sessionStorage.removeItem('tempTestDeIncrement');
         setTrainingLevel('CM');
-        beginTraining(payload);
-        if (!history.location.pathname.endsWith(ROUTER_PATHS.home)) {
-          history.push(ROUTER_PATHS.home);
-        }
+        console.log('training level: ', trainingLevel);
       }
-      console.log('training level: ', trainingLevel);
+      //console.log('training level: ', trainingLevel);
     }
   }
   function triggerPasswordModal() {
@@ -190,7 +183,10 @@ const Navbar = (): ReactElement => {
               open={true}
               src={CM_Icon}
               alt=""
-              onClick={() => (window.location.href = '#/concepts-page')}
+              onClick={() =>
+                (window.location.href = '#/concepts-page') &&
+                TrainingPageFunction('CM', true)
+              }
             />
           </NavMenuLink>
         </NavMenu>

src/components/router.tsx

@@ -10,7 +10,7 @@ import { ClosingPrompt } from './closingPrompt';
 import Piano from '../pages/piano/piano';
 import Footer from './footer';
 import TestCompletePage from '../../src/pages/test-complete/testComplete';
-import ConceptsPage from '../pages/concepts-page/concepts-page';
+import ConceptsPage from '../pages/concepts-page/ConceptsPage';
 
 export const ROUTER_PATHS = {
   home: '/',

src/components/scoresComponent.tsx

@@ -28,7 +28,9 @@ export function ScoresComponent(): ReactElement {
   `;
 
   const CPMTSpeed = parseInt(
+    /*eslint-disable*/
     Math.max.apply(Math, Object.values(maxWPM))?.toFixed(),
+    /*eslint-enable*/
   );
   console.log('CPM Top Speed: ' + CPMTSpeed);
   store.getActions().addCPMTopSpeed(CPMTSpeed);

src/index.tsx

@@ -7,6 +7,7 @@ import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 // This is the entry point to the React application
 // All pages, components, and functionality lives under this umbrella
 // Start by entering the <App /> component
+/* eslint-disable */
 ReactDOM.render(
   <React.StrictMode>
     <App />
@@ -16,6 +17,7 @@ ReactDOM.render(
   // sessionStorage.clear();
   //}
 );
+/* eslint-enable */
 
 // Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
 // Learn more: https://snowpack.dev/concepts/hot-module-replacement

src/models/flashCardsModel.ts

@@ -6,8 +6,6 @@ export interface flashCard {
   answer: string;
   imageSrc: string;
   tags: string[];
-  url: string;
-  image: string;
   ebbinghausValue: number;
   nextReinforcement: number;
   timesTyped: number;
@@ -16,10 +14,12 @@ export interface flashCard {
 
 export interface sessionTrainingData {
   flashCard: flashCard;
+  flashCardIndex: number;
   numberOfTimesWritten: number;
   numberOfTimesWrittenFast: number;
   numberOfTimesWrittenWrong: number;
   lastTenTimesSpeed: number[];
+  completed: boolean;
 }
 
 export interface generatedData {
@@ -29,7 +29,12 @@ export interface generatedData {
 
 export interface tag {
   key: string;
-  index: number | undefined;
+  index: number;
+}
+
+export interface activeFlashCard {
+  flashCard: flashCard;
+  flashCardIndex: number;
 }
 
 export interface flashCardActionModel {
@@ -49,8 +54,12 @@ export interface flashCardActionModel {
   addTagFlashCard: Action<flashCardStoreStateModel, tag>;
   removeTagFlashCard: Action<flashCardStoreStateModel, tag>;
 
+  // Actions to set and remove the selected tag
+  setSelectedTag: Action<flashCardStoreStateModel, string>;
+
   // Actions to get and set the last daily training date of a set
-  setNextDailyTraining: Action<flashCardStoreStateModel, Date>;
+  setNextDailyTraining: Action<flashCardStoreStateModel>;
+  loadNextDailyTraining: Action<flashCardStoreStateModel, Date>;
 
   setSessionTrainingData: Action<flashCardStoreStateModel>;
   addTimeSessionTrainingData: Action<flashCardStoreStateModel, number[]>;
@@ -64,17 +73,20 @@ export interface flashCardStoreStateModel {
   // All current flash card sets
   flashCards: flashCard[];
   tags: { [key: string]: number[] };
-
+  selectedTags: string;
   sessionTrainingData: sessionTrainingData[];
 
   nextTrainingDate: Date;
 
   // Number of flash cards to practice daily
   numberOfDailyFlashCards: number;
 
-  activeFlashCards: Computed<flashCardStoreStateModel, flashCard[]>;
+  activeFlashCards: Computed<flashCardStoreStateModel, activeFlashCard[]>;
 
-  percentageCompleted: Computed<flashCardStoreStateModel, number>;
+  percentageCompleted: Computed<
+    flashCardStoreStateModel,
+    (tag: string | null) => void
+  >;
 }
 
 export type FlashCardStoreModel = flashCardStoreStateModel &

src/pages/analyticalDashboard/components/FadeIn.tsx

@@ -0,0 +1,77 @@
+import React, {
+  JSXElementConstructor,
+  PropsWithChildren,
+  useEffect,
+  useState,
+} from 'react';
+
+interface Props {
+  delay?: number;
+  transitionDuration?: number;
+  wrapperTag?: JSXElementConstructor<any>;
+  childTag?: JSXElementConstructor<any>;
+  className?: string;
+  childClassName?: string;
+  visible?: boolean;
+  onComplete?: () => any;
+}
+
+export default function FadeIn(props: PropsWithChildren<Props>) {
+  const [maxIsVisible, setMaxIsVisible] = useState(0);
+  const transitionDuration =
+    typeof props.transitionDuration === 'number'
+      ? props.transitionDuration
+      : 400;
+  const delay = typeof props.delay === 'number' ? props.delay : 50;
+  const WrapperTag = props.wrapperTag || 'div';
+  const ChildTag = props.childTag || 'div';
+  const visible = typeof props.visible === 'undefined' ? true : props.visible;
+
+  useEffect(() => {
+    let count = React.Children.count(props.children);
+    if (!visible) {
+      // Animate all children out
+      count = 0;
+    }
+
+    if (count == maxIsVisible) {
+      // We're done updating maxVisible, notify when animation is done
+      const timeout = setTimeout(() => {
+        if (props.onComplete) props.onComplete();
+      }, transitionDuration);
+      return () => clearTimeout(timeout);
+    }
+
+    // Move maxIsVisible toward count
+    const increment = count > maxIsVisible ? 1 : -1;
+    const timeout = setTimeout(() => {
+      setMaxIsVisible(maxIsVisible + increment);
+    }, delay);
+    return () => clearTimeout(timeout);
+  }, [
+    React.Children.count(props.children),
+    delay,
+    maxIsVisible,
+    visible,
+    transitionDuration,
+  ]);
+
+  return (
+    <WrapperTag className={props.className}>
+      {React.Children.map(props.children, (child, i) => {
+        return (
+          <ChildTag
+            className={props.childClassName}
+            style={{
+              transition: `opacity ${transitionDuration}ms, transform ${transitionDuration}ms`,
+              transform: maxIsVisible > i ? 'none' : 'translateY(20px)',
+              opacity: maxIsVisible > i ? 1 : 0,
+            }}
+          >
+            {child}
+          </ChildTag>
+        );
+      })}
+    </WrapperTag>
+  );
+}

src/pages/analyticalDashboard/components/Hexbin.tsx

@@ -16,7 +16,7 @@ import { ChMdashboardAnalytics } from './ChMdashboardAnalytics';
 import { AWPMdashboardAnalytics } from './AWPMdashboardAnalytics';
 import { TWPMdashboardAnalytics } from './TWPMdashboardAnalytics';
 import { StMdashboardAnalytics } from './StMdashboardAnalytics';
-import FadeIn from 'react-fade-in';
+import FadeIn from './FadeIn';
 import { useRef } from 'react';
 import {
   Chart as ChartJS,
@@ -54,7 +54,9 @@ export function Hexbin(): ReactElement {
   const tWPM = 275;
   const CM = 325;
   const StM = 75;
-  let CPM = parseInt(Math.max.apply(Math, Object.values(maxWPM))?.toFixed());
+  /* eslint-disable */
+  const CPM = parseInt(Math.max.apply(Math, Object.values(maxWPM))?.toFixed());
+  /* eslint-enable */
 
   // const storedChordsFromDevice = useStoreState(
   //   (store) => store.storedChordsFromDevice,

src/pages/concepts-page/ConceptsPage.styled.tsx

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+export const ItemsContainer = styled.div`
+  height: 50px;
+  display: flex;
+  color: white;
+  position: relative;
+  flex-direction: row;
+  padding: '1rem';
+  justify-content: center;
+  align-items: center;
+  color: white;
+  background-color: #222424;
+`;
+
+const height = 'height: calc(100vh - 64px);';
+
+export const PageContainer = styled.div.attrs({
+  className: 'text-gray-600 body-font flex flex-row',
+})`
+  background-color: #222424;
+  ${height}
+`;

src/pages/concepts-page/concepts-page.tsx → src/pages/concepts-page/ConceptsPage.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import ConceptsTrainingPage from './concepts-training-page';
-import ConceptsManagerPage from './concepts-manager-page';
 import { useStoreState, useStoreActions } from '../../store/store.js';
-import { PageContainer } from './concepts-training-page.styled';
+import { ManagerTier } from './manager-tier/ManagerTier.jsx';
+import { DailyTrainingTier } from './daily-training-tier/DailyTrainingTier.jsx';
+import { ItemsContainer, PageContainer } from './ConceptsPage.styled';
+import { CustomTrainingTier } from './custom-training-tier/CustomTrainingTier.jsx';
 
 const ConceptsPage = () => {
   const loadedFromStorage = useStoreState((state) => state.loadedFromStorage);
@@ -20,11 +20,11 @@ const ConceptsPage = () => {
 
   const viewCurrentTier = () => {
     if (currentTier == 0) {
-      return <ConceptsTrainingPage />;
+      return <DailyTrainingTier setCurrentTier={setCurrentTier} />;
     } else if (currentTier == 1) {
-      return <ConceptsTrainingPage />;
+      return <CustomTrainingTier setCurrentTier={setCurrentTier} />;
     } else {
-      return <ConceptsManagerPage />;
+      return <ManagerTier />;
     }
   };
 
@@ -59,7 +59,7 @@ const ConceptsPage = () => {
         </button>
       </ItemsContainer>
       {loadedFromStorage ? (
-        <>{viewCurrentTier()}</>
+        <PageContainer>{viewCurrentTier()}</PageContainer>
       ) : (
         <PageContainer>Loading...</PageContainer>
       )}
@@ -68,16 +68,3 @@ const ConceptsPage = () => {
 };
 
 export default ConceptsPage;
-
-const ItemsContainer = styled.div`
-  height: 50px;
-  display: flex;
-  color: white;
-  position: relative;
-  flex-direction: row;
-  padding: '1rem';
-  justify-content: center;
-  align-items: center;
-  color: white;
-  background-color: #222424;
-`;