+
+ Welcome to the Concepts Mastered Manager. Let's get started, below
+ you will find "Import Flashcards", "Save
+ Flashcards", and "Add Flashcards". Add/Import your
+ flashcards and press "Save Flashcards" to get started.
+
+
{
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={() => {
- addTagFlashCard({ key: input, index: undefined });
- setShowModal(false);
+ handleAddTag();
}}
>
Confirm
diff --git a/src/pages/concepts-page/components-manager-page/Dropdown.tsx b/src/pages/concepts-page/manager-tier/Dropdown.tsx
similarity index 87%
rename from src/pages/concepts-page/components-manager-page/Dropdown.tsx
rename to src/pages/concepts-page/manager-tier/Dropdown.tsx
index b3a2ae527..cb95a08c9 100644
--- a/src/pages/concepts-page/components-manager-page/Dropdown.tsx
+++ b/src/pages/concepts-page/manager-tier/Dropdown.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
interface DropdownProps {
options: string[];
@@ -7,12 +7,12 @@ interface DropdownProps {
onSelectedChange: (selected: string) => void;
}
-const Dropdown = ({
+export const Dropdown = ({
options,
name,
selected,
onSelectedChange,
-}: DropdownProps): ReactElement => {
+}: DropdownProps) => {
const optionsList = options.map((option, index) => {
return (
@@ -45,5 +45,3 @@ const Dropdown = ({
);
};
-
-export default Dropdown;
diff --git a/src/pages/concepts-page/components-manager-page/ExportFlashcards.tsx b/src/pages/concepts-page/manager-tier/ExportFlashcards.tsx
similarity index 85%
rename from src/pages/concepts-page/components-manager-page/ExportFlashcards.tsx
rename to src/pages/concepts-page/manager-tier/ExportFlashcards.tsx
index 47d21cd64..4b0f0f3c9 100644
--- a/src/pages/concepts-page/components-manager-page/ExportFlashcards.tsx
+++ b/src/pages/concepts-page/manager-tier/ExportFlashcards.tsx
@@ -1,8 +1,8 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
import { useStoreState } from '../../../store/store';
import downloadCSV from '../util/downloadCSV';
-export function ExportFlashCards(): ReactElement {
+export const ExportFlashCards = () => {
const flashCards = useStoreState((store) => store.flashCards);
return (
@@ -19,4 +19,4 @@ export function ExportFlashCards(): ReactElement {
);
-}
+};
diff --git a/src/pages/concepts-page/components-manager-page/FlashCard.tsx b/src/pages/concepts-page/manager-tier/FlashCard.tsx
similarity index 97%
rename from src/pages/concepts-page/components-manager-page/FlashCard.tsx
rename to src/pages/concepts-page/manager-tier/FlashCard.tsx
index ebb227862..01696b58c 100644
--- a/src/pages/concepts-page/components-manager-page/FlashCard.tsx
+++ b/src/pages/concepts-page/manager-tier/FlashCard.tsx
@@ -1,5 +1,7 @@
import React, { useState, useEffect } from 'react';
+import { useStoreActions } from '../../../store/store';
import type { flashCard } from '../../../models/flashCardsModel';
+import { Dropdown } from './Dropdown';
import {
FlashCardEditButton,
FlashCardSaveButton,
@@ -13,8 +15,6 @@ import {
FlashCardConfirmDeleteButton,
FlashCardCancelDeleteButton,
} from './FlashCardManagerCardColumn.styled';
-import { useStoreActions } from '../../../store/store';
-import Dropdown from './Dropdown';
interface FlashCardProps {
flashCard: flashCard;
@@ -23,7 +23,7 @@ interface FlashCardProps {
setSelected: (index: number) => void;
}
-const FlashCard = ({
+export const FlashCard = ({
flashCard,
index,
selected,
@@ -125,7 +125,7 @@ const FlashCard = ({
setSelected(!selected, index)}
+ onClick={() => setSelected(index)}
/>
);
};
-
-export default FlashCard;
diff --git a/src/pages/concepts-page/manager-tier/FlashCardColumn.tsx b/src/pages/concepts-page/manager-tier/FlashCardColumn.tsx
new file mode 100644
index 000000000..f261b6631
--- /dev/null
+++ b/src/pages/concepts-page/manager-tier/FlashCardColumn.tsx
@@ -0,0 +1,43 @@
+import React, { ReactElement } from 'react';
+import { useStoreState } from '../../../store/store';
+import { FlashCard } from './FlashCard';
+
+interface FlashCardColumnProps {
+ //flashCards: FlashCard[];
+ selected: boolean[];
+ setSelected: (index: number) => void;
+ selectedTag: string;
+}
+
+export function FlashCardColumn({
+ //flashCards,
+ selected,
+ setSelected,
+ selectedTag,
+}: FlashCardColumnProps): ReactElement {
+ const flashCards = useStoreState((state) => state.flashCards);
+ //const selectedTag = useStoreState((state) => state.selectedTags);
+
+ // Filter flashcards based on the selected tag
+ const filteredFlashCards =
+ selectedTag === 'All' || selectedTag === ''
+ ? flashCards
+ : flashCards.filter((flashCard) => flashCard.tags.includes(selectedTag));
+
+ const flashCardMap = filteredFlashCards.map((flashCard, index) => {
+ const originalIndex = flashCards.findIndex(
+ (original) => original === flashCard,
+ );
+ return (
+ {flashCardMap} ;
+}
diff --git a/src/pages/concepts-page/components-manager-page/FlashCardManagerCardColumn.styled.tsx b/src/pages/concepts-page/manager-tier/FlashCardManagerCardColumn.styled.tsx
similarity index 99%
rename from src/pages/concepts-page/components-manager-page/FlashCardManagerCardColumn.styled.tsx
rename to src/pages/concepts-page/manager-tier/FlashCardManagerCardColumn.styled.tsx
index 49b8f1c95..d64d1461f 100644
--- a/src/pages/concepts-page/components-manager-page/FlashCardManagerCardColumn.styled.tsx
+++ b/src/pages/concepts-page/manager-tier/FlashCardManagerCardColumn.styled.tsx
@@ -7,6 +7,7 @@ export const InputIdentifiers = styled.div.attrs({
export const InputIdentifiersForPhrase = styled.div.attrs({
className: `lg:h-auto pl-6 text-white pb-4 lg:w-54 flex-none bg-cover bg-[#3A5A42] rounded-tr rounded-tl overflow-hidden`,
})``;
+
export const CardContainer = styled.div.attrs({
className: `m-1 flex flex-row bg-[#333] rounded-md mb-2 border-2 border-white border-opacity-5 shadow-lg shadow-white'
@@ -20,6 +21,7 @@ export const FlashCardCancelButton = styled.button.attrs(
}`,
}),
)``;
+
export const FlashCardSaveButton = styled.button.attrs(
(props: { cancelled: boolean; shouldDelete: boolean }) => ({
className: `text-xs m-1 h-6 mt-6 float-right font-semibold rounded-full px-4 py-1 shadow-sm shadow-black leading-normal bg-[#22c55e] text-black hover:bg-purple hover:text-white ${
@@ -35,6 +37,7 @@ export const FlashCardEditButton = styled.button.attrs(
}`,
}),
)``;
+
export const FlashCardConfirmDeleteButton = styled.button.attrs(
(props: { shouldDelete: boolean }) => ({
className: `text-xs m-1 h-6 mt-6 float-right font-semibold rounded-full px-4 py-1 shadow-sm shadow-black leading-normal bg-[#22c55e] text-white hover:bg-white hover:text-black ${
@@ -58,6 +61,7 @@ export const FlashCardDeleteButton = styled.button.attrs(
}`,
}),
)``;
+
export const ChordTextBox = styled.input.attrs(
(props: { placeholder: string; disabled: boolean; value: string }) => ({
className: `${
@@ -70,6 +74,7 @@ export const ChordTextBox = styled.input.attrs(
value: `${props.value}`,
}),
)``;
+
export const PhraseTextBox = styled.input.attrs(
(props: { placeholder: string; disabled: boolean }) => ({
className: `${
diff --git a/src/pages/concepts-page/components-manager-page/ImportFlashcards.tsx b/src/pages/concepts-page/manager-tier/ImportFlashcards.tsx
similarity index 89%
rename from src/pages/concepts-page/components-manager-page/ImportFlashcards.tsx
rename to src/pages/concepts-page/manager-tier/ImportFlashcards.tsx
index 2819c2b95..f121b717f 100644
--- a/src/pages/concepts-page/components-manager-page/ImportFlashcards.tsx
+++ b/src/pages/concepts-page/manager-tier/ImportFlashcards.tsx
@@ -1,8 +1,8 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
import { useStoreActions } from '../../../store/store';
import uploadCSV from '../util/uploadCSV';
-export function ImportFlashCards(): ReactElement {
+export const ImportFlashCards = () => {
const addFlashCard = useStoreActions((actions) => actions.addFlashCard);
const addTagFlashCard = useStoreActions((actions) => actions.addTagFlashCard);
const updateLocalStorage = useStoreActions(
@@ -15,9 +15,7 @@ export function ImportFlashCards(): ReactElement {
const uploadedFile = event.target.files[0];
uploadCSV(uploadedFile).then((flashCards) => {
- console.log(flashCards);
flashCards.forEach((flashCard, index) => {
- console.log(index);
addFlashCard(flashCard);
flashCard.tags.forEach((tag: string) => {
addTagFlashCard({ key: tag, index: index });
@@ -47,4 +45,4 @@ export function ImportFlashCards(): ReactElement {
/>
);
-}
+};
diff --git a/src/pages/concepts-page/concepts-manager-page.style.tsx b/src/pages/concepts-page/manager-tier/ManagerTier.styled.tsx
similarity index 100%
rename from src/pages/concepts-page/concepts-manager-page.style.tsx
rename to src/pages/concepts-page/manager-tier/ManagerTier.styled.tsx
diff --git a/src/pages/concepts-page/concepts-manager-page.tsx b/src/pages/concepts-page/manager-tier/ManagerTier.tsx
similarity index 61%
rename from src/pages/concepts-page/concepts-manager-page.tsx
rename to src/pages/concepts-page/manager-tier/ManagerTier.tsx
index 035d812de..07a049dc2 100644
--- a/src/pages/concepts-page/concepts-manager-page.tsx
+++ b/src/pages/concepts-page/manager-tier/ManagerTier.tsx
@@ -1,26 +1,26 @@
import React, { ReactElement, useEffect, useState } from 'react';
+import { useStoreState } from '../../../store/store';
+import { ConceptsMasteredHeader } from './ConceptsMasteredHeader';
+import { ImportFlashCards } from './ImportFlashcards';
+import { ExportFlashCards } from './ExportFlashcards';
+import { AddFlashCard } from './AddFlashcard';
+import { FlashCardColumn } from './FlashCardColumn';
+import { DialogPortal } from './DialogPortal';
+import { TagSetDropdown } from './TagSetDropdown';
+import { useStoreActions } from '../../../store/store';
+import ImageSlider from '../imageSlider';
import {
ConceptsMasteredManagerPageContainer,
Table,
HorizontalRule,
- ChordContainer,
PageContainer,
TopSectionContainer,
Column,
ConceptsRow,
-} from './concepts-manager-page.style';
-import { useStoreState } from '../../store/store';
-import { ConceptsMasteredHeader } from './components-manager-page/ConceptsMasteredHeader';
-import { ImportFlashCards } from './components-manager-page/ImportFlashcards';
-import { ExportFlashCards } from './components-manager-page/ExportFlashcards';
-import { AddFlashCard } from './components-manager-page/AddFlashcard';
-import { FlashCardColumn } from './components-manager-page/FlashCardColumn';
-import { DialogPortal } from './components-manager-page/DialogPortal';
-import { TagSetDropdown } from './components-manager-page/TagSetDropdown';
+} from './ManagerTier.styled';
-const ConceptsManagerPage = (): ReactElement => {
+export const ManagerTier = (): ReactElement => {
const flashCards = useStoreState((state) => state.flashCards);
-
const tags = useStoreState((state) => state.tags);
const [selectedFlashCards, setSelectedFlashCards] = useState(
@@ -28,6 +28,8 @@ const ConceptsManagerPage = (): ReactElement => {
);
const [selectedTag, setSelectedTag] = useState('');
+ const setTag = useStoreActions((actions) => actions.setSelectedTag); // Add this line
+
useEffect(() => {
if (flashCards.length !== selectedFlashCards.length) {
setSelectedFlashCards(new Array(flashCards.length).fill(false));
@@ -42,6 +44,23 @@ const ConceptsManagerPage = (): ReactElement => {
});
};
+ const selectedFlashcardIndices = selectedFlashCards.reduce(
+ (indices, isSelected, index) => {
+ if (isSelected) {
+ indices.push(index);
+ }
+ return indices;
+ },
+ [],
+ );
+
+ //filter tags
+ /*const filteredTags =
+ selectedTag === 'All' || selectedTag === ''
+ ? flashCards
+ : flashCards.filter((flashCard) => flashCard.tags.includes(selectedTag));
+ console.log('filteredTags: ' + filteredTags);*/
+
return (
@@ -59,7 +78,9 @@ const ConceptsManagerPage = (): ReactElement => {
{
@@ -80,5 +102,3 @@ const ConceptsManagerPage = (): ReactElement => {
);
};
-
-export default ConceptsManagerPage;
diff --git a/src/pages/concepts-page/components-manager-page/TagSetDropdown.tsx b/src/pages/concepts-page/manager-tier/TagSetDropdown.tsx
similarity index 66%
rename from src/pages/concepts-page/components-manager-page/TagSetDropdown.tsx
rename to src/pages/concepts-page/manager-tier/TagSetDropdown.tsx
index 7d38a7c90..dd686557a 100644
--- a/src/pages/concepts-page/components-manager-page/TagSetDropdown.tsx
+++ b/src/pages/concepts-page/manager-tier/TagSetDropdown.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { useStoreState } from '../../../store/store';
-import Dropdown from './Dropdown';
+import { Dropdown } from './Dropdown';
interface TagSetDropdownProps {
selectedTag: string;
@@ -13,16 +13,15 @@ export const TagSetDropdown = ({
}: TagSetDropdownProps) => {
const tags = useStoreState((state) => state.tags);
- const setNames = ['All'];
- for (const [key] of Object.entries(tags)) {
- setNames.push(key);
- }
- console.log(setNames);
+ const setNames = ['All', ''].concat(Object.keys(tags));
return (
{
+ //console.log('Selected Tag:', selectedTag);
+ setSelectedTag(selectedTag);
+ }}
options={setNames}
selected={selectedTag}
/>
diff --git a/src/pages/concepts-page/components-training-page/ChordTextInput.tsx b/src/pages/concepts-page/trainingComponent/ChordTextInput.tsx
similarity index 79%
rename from src/pages/concepts-page/components-training-page/ChordTextInput.tsx
rename to src/pages/concepts-page/trainingComponent/ChordTextInput.tsx
index e4a48469e..935a6922d 100644
--- a/src/pages/concepts-page/components-training-page/ChordTextInput.tsx
+++ b/src/pages/concepts-page/trainingComponent/ChordTextInput.tsx
@@ -1,6 +1,5 @@
-import React, { ReactElement, useRef } from 'react';
-
-import ForgotAnswer from './ForgotAnswer';
+import React, { useRef } from 'react';
+import { ForgotAnswer } from './ForgotAnswer';
interface TextInputProps {
onKeyDown: (input: string) => void;
@@ -8,11 +7,11 @@ interface TextInputProps {
value: string;
}
-function ChordTextInput({
+export const ChordTextInput = ({
onKeyDown,
onBlur,
value,
-}: TextInputProps): ReactElement {
+}: TextInputProps) => {
const inputBox = useRef(null);
return (
@@ -31,6 +30,4 @@ function ChordTextInput({
);
-}
-
-export default ChordTextInput;
+};
diff --git a/src/pages/concepts-page/components-training-page/ForgotAnswer.tsx b/src/pages/concepts-page/trainingComponent/ForgotAnswer.tsx
similarity index 89%
rename from src/pages/concepts-page/components-training-page/ForgotAnswer.tsx
rename to src/pages/concepts-page/trainingComponent/ForgotAnswer.tsx
index e9130f903..1c72cb3fa 100644
--- a/src/pages/concepts-page/components-training-page/ForgotAnswer.tsx
+++ b/src/pages/concepts-page/trainingComponent/ForgotAnswer.tsx
@@ -1,7 +1,7 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
import usePopover from '../../../hooks/usePopover';
-function ForgotAnswer(): ReactElement {
+export const ForgotAnswer = () => {
const { parentProps, Popper } = usePopover(
'Forgot the answer, press here to move to next question.',
);
@@ -26,6 +26,6 @@ function ForgotAnswer(): ReactElement {
);
-}
+};
export default ForgotAnswer;
diff --git a/src/pages/concepts-page/components-training-page/GearIcon.tsx b/src/pages/concepts-page/trainingComponent/GearIcon.tsx
similarity index 100%
rename from src/pages/concepts-page/components-training-page/GearIcon.tsx
rename to src/pages/concepts-page/trainingComponent/GearIcon.tsx
diff --git a/src/pages/concepts-page/components-training-page/RenderQuestion.tsx b/src/pages/concepts-page/trainingComponent/RenderQuestion.tsx
similarity index 85%
rename from src/pages/concepts-page/components-training-page/RenderQuestion.tsx
rename to src/pages/concepts-page/trainingComponent/RenderQuestion.tsx
index adcf6b641..6b67224a8 100644
--- a/src/pages/concepts-page/components-training-page/RenderQuestion.tsx
+++ b/src/pages/concepts-page/trainingComponent/RenderQuestion.tsx
@@ -5,7 +5,7 @@ interface RenderQuestionProps {
flashCard: flashCard;
}
-const RenderQuestion = ({ flashCard }: RenderQuestionProps) => {
+export const RenderQuestion = ({ flashCard }: RenderQuestionProps) => {
let ResultElement: ReactElement;
if (flashCard.question === '') {
@@ -27,5 +27,3 @@ const RenderQuestion = ({ flashCard }: RenderQuestionProps) => {
return <>{ResultElement};
};
-
-export default RenderQuestion;
diff --git a/src/pages/concepts-page/components-training-page/StatisticsColumn.tsx b/src/pages/concepts-page/trainingComponent/StatisticsColumn.tsx
similarity index 71%
rename from src/pages/concepts-page/components-training-page/StatisticsColumn.tsx
rename to src/pages/concepts-page/trainingComponent/StatisticsColumn.tsx
index a6fcef78f..416af4776 100644
--- a/src/pages/concepts-page/components-training-page/StatisticsColumn.tsx
+++ b/src/pages/concepts-page/trainingComponent/StatisticsColumn.tsx
@@ -2,15 +2,9 @@ import React, { ReactElement } from 'react';
import useScreenSizeBoundary from '../../../hooks/useScreenSizeBoundary';
import useWindowSize from '../../../hooks/useWindowSize';
import { useStoreActions, useStoreState } from '../../../store/store';
-import { StatisticsColumnContainer } from './StatisticsColumnContainer';
import { StatisticsTableContainer } from './StatisticsTableContainer';
import StatisticsTable from './StatisticsTable';
-import { useCurrentTrainingScenario } from '../../../hooks/useCurrentTrainingScenario';
import styled from 'styled-components';
-import {
- FlashcardStatistics,
- flashcardStats,
-} from '../../../models/flashCardStatistics';
const HIDDEN_BREAKPOINT = 1024;
@@ -20,7 +14,6 @@ export function StatisticsColumn(): ReactElement {
(store) => store.setIsDisplayingStatisticsModal,
);
const flashCards = useStoreState((store) => store.flashCards);
- console.log(flashCards);
// If the screen size changes from a small size to a large size, show this column
// If the screen size changes from a large size to a small size, make sure this column is hidden (until the user presses the button to open it again)
@@ -41,18 +34,26 @@ export function StatisticsColumn(): ReactElement {
};
return (
-