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

Mackenziesalinas week 3 and 4

src/components/navbar.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 import DumbellImage from '../assets/Dumbell.png';
 import BooksImage from '../assets/Books.png';
@@ -19,9 +19,10 @@ import { ScoresComponent } from './scoresComponent';
 import InfoIcon from '../../src/pages/test/components/InfoIcon';
 import type { TrainingLevels } from '../../src/models/trainingLevels';
 import Circle from './CircleHighlight';
-import AnalyticalDashboardButton from '../../src/pages/test/components/AnalyticalDashboardButton';
 import HamburgerMenu from './hamburgerMenu';
-//import ConceptsPage from 'src/pages/concepts-page/concepts-page';
+import { useEffect } from 'react';
+import ImageSlider from '../pages/test/components/imageSlider';
+import { useState } from 'react';
 
 const Navbar = (): ReactElement => {
   const history = useHistory();
@@ -32,6 +33,7 @@ const Navbar = (): ReactElement => {
   const setIsDisplayingIntroductionModal = useStoreActions(
     (store: any) => store.setIsDisplayingIntroductionModal,
   );
+
   const setTrainingLevel = useStoreActions(
     (store: any) => store.setTrainingLevel,
   );
@@ -48,6 +50,29 @@ const Navbar = (): ReactElement => {
   const chmTierPasswordBypass = useStoreState(
     (store: any) => store.chmTierPasswordBypass,
   );
+  const isDisplayingIntroductionModal = useStoreState(
+    (store: any) => store.isDisplayingIntroductionModal,
+  );
+  const [toggleValue, setToggleValue] = useState(false);
+
+  const location = useLocation();
+
+  const handleClick = () => {
+    if (trainingLevel === 'CM') {
+      console.log('ENTERED');
+      setIsDisplayingIntroductionModal(true);
+      if (location.pathname === '/concepts-page') {
+        console.log('already set to concepts page');
+      }
+    }
+  };
+
+  useEffect(() => {
+    console.log(
+      'isDisplayingIntroductionModal after click:',
+      isDisplayingIntroductionModal,
+    );
+  }, [isDisplayingIntroductionModal]);
 
   /* eslint-disable */
   const maxWPM = useStoreState(
@@ -177,21 +202,36 @@ const Navbar = (): ReactElement => {
             <NavLinksImage open={false} src={tWPM_Icon} alt="" />
           </NavMenuLink>
           <NavMenuLink aria-current="page">
-            {trainingLevel == 'CM' ? <Circle /> : ''}
+            {trainingLevel === 'CM' ? <Circle /> : ''}
             <div className="text-white font-mono">CM</div>
             <NavLinksImage
               open={true}
               src={CM_Icon}
               alt=""
-              onClick={() =>
-                (window.location.href = '#/concepts-page') &&
-                TrainingPageFunction('CM', true)
-              }
+              onClick={() => {
+                history.push('/concepts-page');
+                TrainingPageFunction('CM', true);
+              }}
             />
           </NavMenuLink>
         </NavMenu>
         <ScoresComponent />
-
+        {trainingLevel === 'CM' && isDisplayingIntroductionModal && (
+          <div style={modal}>
+            <div style={modal_content}>
+              <button
+                className="close absolute ml-96 text-5xl text-white"
+                onClick={() => {
+                  setToggleValue(!toggleValue);
+                  setIsDisplayingIntroductionModal(false);
+                }}
+              >
+                &times;
+              </button>
+              <ImageSlider />
+            </div>
+          </div>
+        )}
         <div className="flex-row">
           <NavMenuLink style={{ paddingTop: '100px' }}>
             <NavLinksBtnImage
@@ -215,7 +255,12 @@ const Navbar = (): ReactElement => {
           </NavBtnLink>
           <button
             className="hover:bg-[#333] rounded"
-            onClick={() => setIsDisplayingIntroductionModal(true)}
+            onClick={() => {
+              setIsDisplayingIntroductionModal(true);
+              if (trainingLevel === 'CM') {
+                handleClick();
+              }
+            }}
           >
             <InfoIcon />
           </button>
@@ -404,3 +449,20 @@ const ConBtnLink = styled.a`
     transition: 0.3s ease out;
   }
 `;
+const modal = {
+  position: 'absolute' as const,
+  zIndex: '1' as const,
+  left: '5%' as const,
+  width: '75%' as const,
+  textAlign: 'center' as const,
+  backgroundColor: 'rgba(0, 0, 0, 0.25)' as const,
+};
+
+const modal_content = {
+  backgroundColor: '#222424' as const,
+  position: 'absolute' as const,
+  top: '20%' as const,
+  left: '20%' as const,
+  borderRadius: '5px' as const,
+  border: '2px solid black' as const,
+};

src/components/router.tsx

@@ -76,7 +76,6 @@ const Router = (): ReactElement => {
         <Route path={ROUTER_PATHS.concepts_page}>
           <Navbar />
           <ConceptsPage />
-          <Footer />
         </Route>
 
         {/* This is the route to the Chara Piano page. */}

src/models/flashCardsModel.ts

@@ -1,7 +1,7 @@
 import type { Action, Computed, Thunk } from 'easy-peasy';
 
 export interface flashCard {
-  type: 'text' | 'image' | 'translation';
+  //type: 'text' | 'image' | 'translation';
   question: string;
   answer: string;
   imageSrc: string;
@@ -57,11 +57,7 @@ export interface flashCardActionModel {
   // 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>;
-  loadNextDailyTraining: Action<flashCardStoreStateModel, Date>;
-
-  setSessionTrainingData: Action<flashCardStoreStateModel>;
+  setSessionTrainingData: Action<flashCardStoreStateModel, number>;
   setInfiniteSessionTrainingData: Action<
     flashCardStoreStateModel,
     activeFlashCard[]
@@ -81,9 +77,6 @@ export interface flashCardStoreStateModel {
   selectedTags: string;
   sessionTrainingData: sessionTrainingData[];
 
-  nextTrainingDate: Date;
-
-  // Number of flash cards to practice daily
   numberOfDailyFlashCards: number;
 
   activeFlashCards: Computed<flashCardStoreStateModel, activeFlashCard[]>;

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

@@ -13,11 +13,16 @@ export const ItemsContainer = styled.div`
   background-color: #222424;
 `;
 
-const height = 'height: calc(100vh - 64px);';
+const height = 'calc(100vh - 80px);';
 
 export const PageContainer = styled.div.attrs({
-  className: 'text-gray-600 body-font flex flex-row',
+  className: 'text-gray-600 body-font flex',
 })`
+  flex-direction: column;
   background-color: #222424;
+  height: calc(100% - 111px);
+`;
+
+export const ConceptsContainer = styled.div`
   min-height: ${height};
 `;

src/pages/concepts-page/ConceptsPage.tsx

@@ -2,8 +2,13 @@ import React, { useEffect, useState } from 'react';
 import { useStoreState, useStoreActions } from '../../store/store.js';
 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';
+import Footer from '../../components/footer.jsx';
+import {
+  ItemsContainer,
+  PageContainer,
+  ConceptsContainer,
+} from './ConceptsPage.styled';
 
 const ConceptsPage = () => {
   const loadedFromStorage = useStoreState((state) => state.loadedFromStorage);
@@ -29,7 +34,7 @@ const ConceptsPage = () => {
   };
 
   return (
-    <>
+    <ConceptsContainer>
       <ItemsContainer>
         <button
           {...(currentTier == 0
@@ -61,9 +66,10 @@ const ConceptsPage = () => {
       {loadedFromStorage ? (
         <PageContainer>{viewCurrentTier()}</PageContainer>
       ) : (
-        <PageContainer>Loading...</PageContainer>
+        <PageContainer />
       )}
-    </>
+      <Footer />
+    </ConceptsContainer>
   );
 };
 

src/pages/concepts-page/custom-training-tier/CustomTrainingTier.styled.tsx

@@ -1,8 +1,10 @@
 import styled from 'styled-components';
 
 export const FullWidthFullHeightContainer = styled.div.attrs({
-  className: 'relative h-full w-full',
-})``;
+  className: 'relative w-full',
+})`
+  height: calc(100vh - 191px);
+`;
 
 export const SmallScreenButtons = styled.div.attrs({
   className: 'flex flex-row justify-between w-full mb-4',

src/pages/concepts-page/daily-training-tier/DailyTrainingTier.styled.tsx

@@ -6,7 +6,9 @@ export const FullWidthFullHeightContainer = styled.div.attrs({
 
 export const DailyTrainingContainer = styled.div.attrs({
   className: 'flex flex-col align-center w-full',
-})``;
+})`
+  height: calc(100vh - 191px);
+`;
 
 export const SmallScreenButtons = styled.div.attrs({
   className: 'flex flex-row justify-between w-full mb-4',
@@ -17,7 +19,7 @@ export const HelperContainer = styled.div.attrs({
 })``;
 
 export const ConceptsMasteredManagerPageContainer = styled.section.attrs({
-  className: `text-white body-font min-h-screen bg-[#222424]`,
+  className: `text-white body-font bg-[#222424]`,
 })``;
 
 export const PageContainer = styled.section.attrs({

src/pages/concepts-page/daily-training-tier/DailyTrainingTier.tsx

@@ -22,36 +22,31 @@ interface DailyTrainingPageProps {
 export const DailyTrainingTier = ({
   setCurrentTier,
 }: DailyTrainingPageProps) => {
-  const nextTrainingDate = useStoreState((state) => state.nextTrainingDate);
   const setSessionTrainingData = useStoreActions(
     (actions) => actions.setSessionTrainingData,
   );
-  const setNextDailyTraining = useStoreActions(
-    (actions) => actions.setNextDailyTraining,
-  );
   const updateLocalStorage = useStoreActions(
     (actions) => actions.updateLocalStorage,
   );
+  const activeFlashCards = useStoreState((state) => state.activeFlashCards);
+  console.log('Active Flashcards: ', activeFlashCards);
 
-  const [activeTraining, setActiveTraining] = useState(
-    new Date() < nextTrainingDate,
-  );
+  const [activeTraining, setActiveTraining] = useState(false);
 
-  const startTraining = () => {
-    setSessionTrainingData();
+  const startTraining = (numberSelected: number) => {
+    setSessionTrainingData(numberSelected);
     setActiveTraining(true);
   };
 
   const endTraining = () => {
-    setNextDailyTraining();
     updateLocalStorage();
     setActiveTraining(false);
   };
 
   return (
     <DailyTrainingContainer>
       {activeTraining ? (
-        <>
+        <ConceptsMasteredManagerPageContainer>
           <FullWidthFullHeightContainer>
             <HelperContainer>
               <ProgressBar />
@@ -62,7 +57,7 @@ export const DailyTrainingTier = ({
             </SmallScreenButtons>
             <TrainingComponent setActiveTraining={endTraining} />
           </FullWidthFullHeightContainer>
-        </>
+        </ConceptsMasteredManagerPageContainer>
       ) : (
         <ConceptsMasteredManagerPageContainer
           style={{ maxWidth: '1300px', alignSelf: 'center' }}

src/pages/concepts-page/daily-training-tier/DailyTrainingWelcome.styled.tsx

@@ -20,10 +20,17 @@ export const TrisplitScreen = styled.div`
 export const LabeledAction = styled.div`
   display: flex;
   flex-direction: row;
+  justify-content: center;
   gap: 30px;
 `;
 
 export const ActionButton = styled.button.attrs({
   className:
     'import sc-bYwzuL text-white rounded p-2 mb-4 inline-block ml-2 bg-[#333] hover:bg-[#3b3b3b] active:bg-[#222] position-relative',
 })``;
+
+export const ExplanationHeader = styled.h2`
+  font-size: 1rem;
+  padding: 10px;
+  margin: 10px;
+`;