Merge pull request #14 from hampster2018/week-7

Week 7

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/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;

src/pages/concepts-page/manager-tier/CustomDropDown.tsx

@@ -0,0 +1,55 @@
+import React, { useState, Dispatch, SetStateAction } from 'react';
+import { useStoreState } from '../../../store/store';
+
+interface CustomDropDownProps {
+  setCustomTag: Dispatch<SetStateAction<string>>;
+}
+
+const CustomDropDown: React.FC<CustomDropDownProps> = ({ setCustomTag }) => {
+  const tags = useStoreState((state) => state.tags) || {};
+  const tagNames = Object.keys(tags);
+
+  const [activeElementType, setActiveElementType] = useState('dropdown');
+  const [customTag, setCustomTagLocal] = useState('');
+
+  const dropDownChanged = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedValue = e.target.value;
+
+    if (selectedValue === 'custom') {
+      setActiveElementType('input');
+    } else {
+      setActiveElementType('dropdown');
+      setCustomTagLocal(''); // Reset custom tag when selecting a predefined tag
+    }
+  };
+
+  const dropDownComp = () => (
+    <select onChange={dropDownChanged}>
+      {tagNames.map((tagName) => (
+        <option key={tagName} value={tagName}>
+          {tagName}
+        </option>
+      ))}
+      <option value="custom">New Tag?</option>
+    </select>
+  );
+
+  const inputFieldComp = () => (
+    <input
+      type="text"
+      value={customTag}
+      onChange={(e) => {
+        setCustomTagLocal(e.target.value);
+        setCustomTag(e.target.value);
+      }}
+    />
+  );
+
+  return (
+    <div>
+      {activeElementType === 'dropdown' ? dropDownComp() : inputFieldComp()}
+    </div>
+  );
+};
+
+export default CustomDropDown;

src/pages/concepts-page/manager-tier/DialogPortal.tsx

@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom';
 import { useStoreActions, useStoreState } from '../../../store/store';
 import type { flashCard } from '../../../models/flashCardsModel';
 import { FlashCard } from './FlashCard';
+import CustomDropDown from './CustomDropDown';
 
 interface DialogPortalProps {
   selectedFlashcardIndices: number[];
@@ -15,21 +16,21 @@ export const DialogPortal = ({
   const updatedFlashCards = useStoreState((state) => state.flashCards);
 
   const [showModal, setShowModal] = useState(false);
-  const [input, setInput] = useState('');
+
+  const [customTag, setCustomTag] = useState('');
 
   const windowHeight = window.innerHeight;
   const windowWidth = window.innerWidth;
   const modalHeight = 150;
   const modalWidth = 300;
-  const modalTop = windowHeight / 2 - modalHeight / 2;
+  const modalTop = windowHeight / 1.5 + modalHeight / 1.5;
   const modalLeft = windowWidth / 2 - modalWidth / 2;
 
   const handleAddTag = () => {
-    console.log('Adding tag:', input);
-    console.log('happening');
+    console.log('Adding tag:', customTag);
 
     selectedFlashcardIndices.forEach((index) => {
-      addTagFlashCard({ key: input, index });
+      addTagFlashCard({ key: customTag, index });
     });
 
     // Log flashcards and their tags
@@ -38,7 +39,7 @@ export const DialogPortal = ({
       console.log('Tags:', flashCard.tags);
     });
 
-    setInput('');
+    setCustomTag('');
     setShowModal(false);
   };
 
@@ -49,7 +50,7 @@ export const DialogPortal = ({
         color="pink"
         onClick={() => setShowModal(true)}
       >
-        Add New Tag
+        Add Tag
       </button>
       {showModal &&
         createPortal(
@@ -69,19 +70,14 @@ export const DialogPortal = ({
             }}
           >
             <h1>New Tag: </h1>
-            <input
-              style={{ padding: '5px' }}
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              placeholder="New Tag"
-            />
+            <CustomDropDown setCustomTag={setCustomTag} />
             <div>
               <button
                 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"
                 color="pink"
                 onClick={() => {
                   setShowModal(false);
-                  setInput('');
+                  setCustomTag('');
                 }}
               >
                 Cancel