├── vocabularybuilder
    ├── public
    │   ├── _redirects
    │   ├── robots.txt
    │   ├── manifest.json
    │   └── index.html
    ├── src
    │   ├── index.css
    │   ├── setupTests.js
    │   ├── services
    │   │   ├── pexelAPI.js
    │   │   └── wordAPI.js
    │   ├── reportWebVitals.js
    │   ├── pages
    │   │   ├── NotFound.js
    │   │   ├── Review
    │   │   │   ├── QuizResult.js
    │   │   │   ├── FlashcardsResult.js
    │   │   │   ├── Quiz.js
    │   │   │   ├── Flashcards.js
    │   │   │   ├── Review.js
    │   │   │   ├── FlashcardsMode.js
    │   │   │   ├── QuizMode.jsx
    │   │   │   ├── QuizQuestion.js
    │   │   │   └── Card.js
    │   │   ├── Search
    │   │   │   ├── Search.js
    │   │   │   ├── PossibleWords.js
    │   │   │   └── WordMeanings.js
    │   │   ├── Home.js
    │   │   └── Journal.js
    │   ├── components
    │   │   ├── Common
    │   │   │   ├── Overlay.js
    │   │   │   ├── TextArea.js
    │   │   │   ├── SearchField.js
    │   │   │   ├── Popup.js
    │   │   │   ├── Button.js
    │   │   │   └── Filter.js
    │   │   ├── UI
    │   │   │   ├── Layout.js
    │   │   │   ├── Footer.js
    │   │   │   └── Header.js
    │   │   └── Features
    │   │   │   ├── Review
    │   │   │       ├── BackPopup.js
    │   │   │       ├── NumberChoice.jsx
    │   │   │       ├── EndSessionPopup.js
    │   │   │       ├── ModeChoice.js
    │   │   │       ├── ResultTable.js
    │   │   │       ├── MCQuestion.js
    │   │   │       └── BlanksQuestion.jsx
    │   │   │   ├── WordForm
    │   │   │       ├── WordFormHeader.js
    │   │   │       ├── WordFormField.js
    │   │   │       ├── ImageDropZone.js
    │   │   │       ├── WordFormImages.js
    │   │   │       └── WordForm.js
    │   │   │   └── Word
    │   │   │       ├── WordDetails.js
    │   │   │       ├── Word.js
    │   │   │       └── WordHeader.js
    │   ├── hooks
    │   │   ├── useIsMobile.js
    │   │   └── useReviewResult.js
    │   ├── index.js
    │   ├── store.js
    │   ├── reducers
    │   │   ├── possibleWordsReducer.js
    │   │   ├── searchReducer.js
    │   │   ├── possibleWordsReducer.test.js
    │   │   ├── searchReducer.test.js
    │   │   ├── flashcardsReducer.js
    │   │   ├── flashcardsReducer.test.js
    │   │   ├── quizReducer.js
    │   │   ├── journalReducer.test.js
    │   │   ├── wordMeaningsReducer.test.js
    │   │   ├── journalReducer.js
    │   │   ├── quizReducer.test.js
    │   │   └── wordMeaningsReducer.js
    │   ├── App.js
    │   └── utils
    │   │   └── reviewHelper.js
    ├── example.env
    ├── tailwind.config.js
    ├── .eslintrc.json
    ├── .gitignore
    └── package.json
└── README.md


/vocabularybuilder/public/_redirects:
--------------------------------------------------------------------------------
1 | /* /index.html 200
2 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/vocabularybuilder/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/vocabularybuilder/example.env:
--------------------------------------------------------------------------------
1 | REACT_APP_WORD_API_KEY=<YOUR_API_KEY>
2 | REACT_APP_WORD_API_HOST="wordsapiv1.p.rapidapi.com"
3 | REACT_APP_PEXELS_API_KEY=<YOUR_API_KEY>
4 | 


--------------------------------------------------------------------------------
/vocabularybuilder/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 |   content: ['./src/**/*.{html,js,jsx}'],
4 |   theme: {
5 |     extend: {}
6 |   },
7 |   plugins: []
8 | }
9 | 


--------------------------------------------------------------------------------
/vocabularybuilder/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |   "short_name": "React App",
3 |   "name": "Create React App Sample",
4 |   "start_url": ".",
5 |   "display": "standalone",
6 |   "theme_color": "#000000",
7 |   "background_color": "#ffffff"
8 | }
9 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/vocabularybuilder/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "env": {
 3 |         "browser": true,
 4 |         "es2021": true
 5 |     },
 6 |     "extends": [
 7 |         "standard",
 8 |         "plugin:react/recommended"
 9 |     ],
10 |     "parserOptions": {
11 |         "ecmaVersion": "latest",
12 |         "sourceType": "module"
13 |     },
14 |     "plugins": [
15 |         "react"
16 |     ],
17 |     "rules": {
18 |     }
19 | }
20 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/services/pexelAPI.js:
--------------------------------------------------------------------------------
 1 | import { createClient } from 'pexels'
 2 | 
 3 | const getImage = async (query, num = 1) => {
 4 |   const client = createClient(process.env.REACT_APP_PEXELS_API_KEY)
 5 |   try {
 6 |     const result = await client.photos.search({ query, per_page: num })
 7 |     return result.photos
 8 |   } catch (error) {
 9 |     console.error(error)
10 |     throw error
11 |   }
12 | }
13 | 
14 | export { getImage }
15 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry)
 5 |       getFID(onPerfEntry)
 6 |       getFCP(onPerfEntry)
 7 |       getLCP(onPerfEntry)
 8 |       getTTFB(onPerfEntry)
 9 |     })
10 |   }
11 | }
12 | 
13 | export default reportWebVitals
14 | 


--------------------------------------------------------------------------------
/vocabularybuilder/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | .env
21 | 
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | netlify.toml
26 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/pages/NotFound.js:
--------------------------------------------------------------------------------
 1 | import { Link } from 'react-router-dom'
 2 | import React from 'react'
 3 | 
 4 | const NotFound = () => {
 5 |   return (
 6 |     <div className='justify-center p-5'>
 7 |       <h1 className='text-2xl font-bold'>Vocabulary Builder: Page Not Found</h1>
 8 |       Click{' '}
 9 |       <Link
10 |         to='/'
11 |         className='underline hover:text-indigo-800 inline'>
12 |         here
13 |       </Link>{' '}
14 |       to go back to the home page.
15 |     </div>
16 |   )
17 | }
18 | 
19 | export default NotFound
20 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/components/Common/Overlay.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | 
 4 | const Overlay = ({ children }) => {
 5 |   return (
 6 |     <>
 7 |       <div className='overlay fixed inset-0 bg-black opacity-50 z-50'></div>
 8 |       <div className='wrapper fixed inset-0 w-screen h-screen flex justify-center items-center z-50'>
 9 |         {children}
10 |       </div>
11 |     </>
12 |   )
13 | }
14 | 
15 | export default Overlay
16 | 
17 | Overlay.propTypes = {
18 |   children: PropTypes.node.isRequired
19 | }
20 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/hooks/useIsMobile.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react'
 2 | 
 3 | const useIsMobile = (screenSize) => {
 4 |   const [isMobile, setIsMobile] = useState(false)
 5 | 
 6 |   useEffect(() => {
 7 |     const handleResize = () => {
 8 |       setIsMobile(window.innerWidth <= screenSize)
 9 |     }
10 | 
11 |     handleResize()
12 |     window.addEventListener('resize', handleResize)
13 |     return () => window.removeEventListener('resize', handleResize)
14 |   }, [screenSize])
15 |   return { isMobile }
16 | }
17 | 
18 | export default useIsMobile
19 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/components/UI/Layout.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Outlet } from 'react-router-dom'
 3 | import Header from './Header'
 4 | import Footer from './Footer'
 5 | 
 6 | const Layout = () => {
 7 |   return (
 8 |     <div className='site-wrapper flex flex-col w-screen h-screen'>
 9 |       <Header />
10 |       <main className='flex flex-column text-gray-700 text-left px-6 md:px-20 pt-2 pb-5 sm:py-5 self-center w-full justify-center grow'>
11 |         <Outlet />
12 |       </main>
13 |       <Footer />
14 |     </div>
15 |   )
16 | }
17 | 
18 | export default Layout
19 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import './index.css'
 4 | import reportWebVitals from './reportWebVitals'
 5 | import { Provider } from 'react-redux'
 6 | import store from './store'
 7 | import App from './App'
 8 | 
 9 | const root = ReactDOM.createRoot(document.getElementById('root'))
10 | root.render(
11 |   <Provider store={store}>
12 |     <React.StrictMode>
13 |       <App />
14 |     </React.StrictMode>
15 |   </Provider>
16 | )
17 | 
18 | // If you want to start measuring performance in your app, pass a function
19 | // to log results (for example: reportWebVitals(console.log))
20 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
21 | reportWebVitals()
22 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/store.js:
--------------------------------------------------------------------------------
 1 | import { configureStore } from '@reduxjs/toolkit'
 2 | import journalReducer from './reducers/journalReducer'
 3 | import searchReducer from './reducers/searchReducer'
 4 | import possibleWordsReducer from './reducers/possibleWordsReducer'
 5 | import wordMeaningsReducer from './reducers/wordMeaningsReducer'
 6 | import flashcardsReducer from './reducers/flashcardsReducer'
 7 | import quizReducer from './reducers/quizReducer'
 8 | 
 9 | const store = configureStore({
10 |   reducer: {
11 |     journal: journalReducer,
12 |     search: searchReducer,
13 |     possibleWords: possibleWordsReducer,
14 |     wordMeanings: wordMeaningsReducer,
15 |     flashcards: flashcardsReducer,
16 |     quiz: quizReducer
17 |   }
18 | })
19 | 
20 | export default store
21 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/reducers/possibleWordsReducer.js:
--------------------------------------------------------------------------------
 1 | import { createSlice } from '@reduxjs/toolkit'
 2 | 
 3 | const initialState = {
 4 |   matchedWords: [],
 5 |   isLoading: false,
 6 |   error: null
 7 | }
 8 | 
 9 | const possibleWordsSlice = createSlice({
10 |   name: 'possibleWords',
11 |   initialState,
12 |   reducers: {
13 |     setMatchedWords: (state, action) => {
14 |       state.matchedWords = action.payload
15 |     },
16 |     setIsLoading: (state, action) => {
17 |       state.isLoading = action.payload
18 |     },
19 |     setError: (state, action) => {
20 |       state.error = action.payload
21 |     }
22 |   }
23 | })
24 | 
25 | export const { setMatchedWords, setIsLoading, setError } =
26 |   possibleWordsSlice.actions
27 | export default possibleWordsSlice.reducer
28 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/reducers/searchReducer.js:
--------------------------------------------------------------------------------
 1 | import { createSlice } from '@reduxjs/toolkit'
 2 | 
 3 | const initialState = {
 4 |   searchValue: '',
 5 |   showForm: false,
 6 |   formWord: '',
 7 |   currentPage: 'search'
 8 | }
 9 | 
10 | const searchSlice = createSlice({
11 |   name: 'search',
12 |   initialState,
13 |   reducers: {
14 |     setSearchValue: (state, action) => {
15 |       state.searchValue = action.payload
16 |     },
17 |     setShowForm: (state, action) => {
18 |       state.showForm = action.payload
19 |     },
20 |     setFormWord: (state, action) => {
21 |       state.formWord = action.payload
22 |     },
23 |     setCurrentPage: (state, action) => {
24 |       state.currentPage = action.payload
25 |     }
26 |   }
27 | })
28 | 
29 | export const { setSearchValue, setShowForm, setFormWord, setCurrentPage } =
30 |   searchSlice.actions
31 | export default searchSlice.reducer
32 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/pages/Review/QuizResult.js:
--------------------------------------------------------------------------------
 1 | import { useSelector } from 'react-redux'
 2 | import { useNavigate } from 'react-router-dom'
 3 | import ResultTable from '../../components/Features/Review/ResultTable'
 4 | import useReviewResult from '../../hooks/useReviewResult'
 5 | import React from 'react'
 6 | 
 7 | const QuizResult = () => {
 8 |   const { wordArray } = useSelector((state) => state.quiz)
 9 |   const navigate = useNavigate()
10 |   useReviewResult('quiz', wordArray)
11 | 
12 |   return (
13 |     <div className='flex flex-col gap-3 items-center w-full'>
14 |       <h2 className='font-bold text-xl text-center text-indigo-800'>Result</h2>
15 |       <ResultTable wordArray={wordArray} />
16 |       <button
17 |         onClick={() => navigate('../../../journal')}
18 |         className='mt-4 bg-indigo-500 hover:bg-indigo-600 text-lg font-semibold text-white rounded-lg px-5 py-2'>
19 |         Return to Journal
20 |       </button>
21 |     </div>
22 |   )
23 | }
24 | 
25 | export default QuizResult
26 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/components/Common/TextArea.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | import PropType from 'prop-types'
 3 | 
 4 | const TextArea = ({ id, name, index, value, onBlur, height }) => {
 5 |   const [text, setText] = useState(value)
 6 | 
 7 |   const handleChange = (e) => {
 8 |     setText(e.target.value)
 9 |   }
10 | 
11 |   return (
12 |     <>
13 |       <textarea
14 |         className={`rounded-lg border-2 border-indigo-100 py-1 px-2 w-full ${height}`}
15 |         id={id}
16 |         key={name + index}
17 |         name={name}
18 |         value={text}
19 |         onChange={handleChange}
20 |         onBlur={(e) => onBlur(e, index)}
21 |       />
22 |     </>
23 |   )
24 | }
25 | 
26 | export default TextArea
27 | 
28 | TextArea.propTypes = {
29 |   id: PropType.string.isRequired,
30 |   name: PropType.string.isRequired,
31 |   index: PropType.number.isRequired,
32 |   value: PropType.string.isRequired,
33 |   onBlur: PropType.func.isRequired,
34 |   height: PropType.string.isRequired
35 | }
36 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/pages/Review/FlashcardsResult.js:
--------------------------------------------------------------------------------
 1 | import { useSelector } from 'react-redux'
 2 | import { useNavigate } from 'react-router-dom'
 3 | import ResultTable from '../../components/Features/Review/ResultTable'
 4 | import useReviewResult from '../../hooks/useReviewResult'
 5 | import React from 'react'
 6 | 
 7 | const FlashcardsResult = () => {
 8 |   const { wordArray } = useSelector((state) => state.flashcards)
 9 |   const navigate = useNavigate()
10 |   useReviewResult('flashcards', wordArray)
11 | 
12 |   return (
13 |     <div className='flex flex-col gap-3 items-center w-full'>
14 |       <h2 className='font-bold text-xl text-center text-indigo-800'>Result</h2>
15 |       <ResultTable wordArray={wordArray} />
16 |       <button
17 |         onClick={() => navigate('../../../journal')}
18 |         className='mt-4 bg-indigo-500 hover:bg-indigo-600 text-lg font-semibold text-white rounded-lg px-5 py-2'>
19 |         Return to Journal
20 |       </button>
21 |     </div>
22 |   )
23 | }
24 | 
25 | export default FlashcardsResult
26 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/reducers/possibleWordsReducer.test.js:
--------------------------------------------------------------------------------
 1 | import possibleWordsReducer, {
 2 |   setMatchedWords,
 3 |   setIsLoading,
 4 |   setError
 5 | } from './possibleWordsReducer'
 6 | 
 7 | import { describe, it, expect } from 'vitest'
 8 | 
 9 | describe('possibleWords reducer', () => {
10 |   const initialState = {
11 |     matchedWords: [],
12 |     isLoading: false,
13 |     error: null
14 |   }
15 | 
16 |   it('should handle setMatchedWords', () => {
17 |     const testMatchedWords = ['word1', 'word2']
18 |     const nextState = possibleWordsReducer(
19 |       initialState,
20 |       setMatchedWords(testMatchedWords)
21 |     )
22 |     expect(nextState.matchedWords).toEqual(testMatchedWords)
23 |   })
24 | 
25 |   it('should handle setIsLoading', () => {
26 |     const nextState = possibleWordsReducer(initialState, setIsLoading(true))
27 |     expect(nextState.isLoading).toBe(true)
28 |   })
29 | 
30 |   it('should handle setError', () => {
31 |     const testError = 'An error occurred.'
32 |     const nextState = possibleWordsReducer(initialState, setError(testError))
33 |     expect(nextState.error).toBe(testError)
34 |   })
35 | })
36 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/components/Common/SearchField.js:
--------------------------------------------------------------------------------
 1 | import { MdClear } from 'react-icons/md'
 2 | import React from 'react'
 3 | import PropTypes from 'prop-types'
 4 | 
 5 | const SearchField = ({
 6 |   searchValue,
 7 |   clearSearchValue,
 8 |   placeholder,
 9 |   handleInputChange
10 | }) => {
11 |   return (
12 |     <div className='search--search-field border-2 rounded-full py-1 pr-2 pl-3 flex justify-between'>
13 |       <input
14 |         type='text'
15 |         className='search outline-none w-full'
16 |         value={searchValue}
17 |         placeholder={placeholder || ''}
18 |         onChange={handleInputChange}
19 |         autoFocus
20 |       />
21 |       <button
22 |         type='button'
23 |         onClick={clearSearchValue}>
24 |         <MdClear
25 |           size={18}
26 |           color='gray'
27 |         />
28 |       </button>
29 |     </div>
30 |   )
31 | }
32 | 
33 | export default SearchField
34 | 
35 | SearchField.propTypes = {
36 |   searchValue: PropTypes.string.isRequired,
37 |   clearSearchValue: PropTypes.func.isRequired,
38 |   placeholder: PropTypes.string,
39 |   handleInputChange: PropTypes.func.isRequired
40 | }
41 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/reducers/searchReducer.test.js:
--------------------------------------------------------------------------------
 1 | import searchReducer, {
 2 |   setSearchValue,
 3 |   setShowForm,
 4 |   setFormWord,
 5 |   setCurrentPage
 6 | } from './searchReducer'
 7 | 
 8 | import { describe, it, expect } from 'vitest'
 9 | 
10 | describe('search reducer', () => {
11 |   const initialState = {
12 |     searchValue: '',
13 |     showForm: false,
14 |     formWord: '',
15 |     currentPage: 'search'
16 |   }
17 | 
18 |   it('should handle setSearchValue', () => {
19 |     const nextState = searchReducer(initialState, setSearchValue('searchText'))
20 |     expect(nextState.searchValue).toBe('searchText')
21 |   })
22 | 
23 |   it('should handle setShowForm', () => {
24 |     const nextState = searchReducer(initialState, setShowForm(true))
25 |     expect(nextState.showForm).toBe(true)
26 |   })
27 | 
28 |   it('should handle setFormWord', () => {
29 |     const nextState = searchReducer(initialState, setFormWord('newFormWord'))
30 |     expect(nextState.formWord).toBe('newFormWord')
31 |   })
32 | 
33 |   it('should handle setCurentPage', () => {
34 |     const nextState = searchReducer(
35 |       initialState,
36 |       setCurrentPage('possibleWords')
37 |     )
38 |     expect(nextState.currentPage).toBe('possibleWords')
39 |   })
40 | })
41 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/components/Features/Review/BackPopup.js:
--------------------------------------------------------------------------------
 1 | import Popup from '../../Common/Popup'
 2 | import { useNavigate } from 'react-router-dom'
 3 | import { useDispatch } from 'react-redux'
 4 | import { setShowQuit as setFlashcardsShowQuit } from '../../../reducers/flashcardsReducer'
 5 | import { setShowQuit as setQuizShowQuit } from '../../../reducers/quizReducer'
 6 | import React from 'react'
 7 | import PropType from 'prop-types'
 8 | 
 9 | const BackPopup = ({ page }) => {
10 |   const dispatch = useDispatch()
11 |   const navigate = useNavigate()
12 | 
13 |   const handleYes = () => {
14 |     navigate('..')
15 |   }
16 | 
17 |   const handleNo = () => {
18 |     if (page === 'quiz') {
19 |       dispatch(setQuizShowQuit(false))
20 |     } else {
21 |       dispatch(setFlashcardsShowQuit(false))
22 |     }
23 |   }
24 | 
25 |   return (
26 |     <Popup
27 |       title='Quit session'
28 |       handleYes={handleYes}
29 |       handleNo={handleNo}>
30 |       <p>If you return to Review, your current review progress will be lost.</p>
31 |       <p className='font-semibold'>Are you sure to quit the session?</p>
32 |     </Popup>
33 |   )
34 | }
35 | 
36 | export default BackPopup
37 | 
38 | BackPopup.propTypes = {
39 |   page: PropType.string.isRequired
40 | }
41 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/components/Common/Popup.js:
--------------------------------------------------------------------------------
 1 | import Overlay from './Overlay'
 2 | import Button from './Button'
 3 | import React from 'react'
 4 | import PropType from 'prop-types'
 5 | 
 6 | const Popup = ({ title, handleYes, handleNo, children }) => {
 7 |   return (
 8 |     <Overlay>
 9 |       <div className='review-not-finished-popup text-center w-3/4 sm:w-2/3 bg-white rounded-xl px-5 py-5 flex flex-col items-center gap-3'>
10 |         <h1 className='text-indigo-800 font-bold text-2xl'>{title}</h1>
11 |         {children}
12 |         <div className='flex justify-around items-center gap-3'>
13 |           <Button
14 |             bgColor='gray'
15 |             size='md'
16 |             onClick={handleYes}>
17 |             Yes
18 |           </Button>
19 |           <Button
20 |             bgColor='indigo'
21 |             size='md'
22 |             className='font-semibold'
23 |             onClick={handleNo}>
24 |             No
25 |           </Button>
26 |         </div>
27 |       </div>
28 |     </Overlay>
29 |   )
30 | }
31 | 
32 | export default Popup
33 | 
34 | Popup.propTypes = {
35 |   title: PropType.string.isRequired,
36 |   handleYes: PropType.func.isRequired,
37 |   handleNo: PropType.func.isRequired,
38 |   children: PropType.node.isRequired
39 | }
40 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/components/Features/WordForm/WordFormHeader.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | 
 4 | const WordFormHeader = ({ word, pronunciation, partOfSpeech, message }) => {
 5 |   return (
 6 |     <header className='word-form--header pt-5 pb-2 md:pt-6 md:pb-4 px-6 border-b-2 flex flex-col sm:flex-row items-center sm:justify-between gap-2'>
 7 |       <div className='flex items-center gap-'>
 8 |         <h2 className='text-xl font-bold text-indigo-800'>{word}</h2>
 9 |         {pronunciation && <h3 className='text-lg'>{`[${pronunciation}]`}</h3>}
10 |         {partOfSpeech && (
11 |           <h4 className='text-md font-semibold ml-6'>
12 |             {partOfSpeech[0].toUpperCase() + partOfSpeech.slice(1)}
13 |           </h4>
14 |         )}
15 |       </div>
16 |       <div>
17 |         {message.text && (
18 |           <p className={`text-md font-semibold ${message.type === 'success' ? 'text-emerald-700' : 'text-rose-700'}`}>{message.text}</p>
19 |         )}
20 |       </div>
21 |     </header>
22 |   )
23 | }
24 | 
25 | export default WordFormHeader
26 | 
27 | WordFormHeader.propTypes = {
28 |   word: PropTypes.string.isRequired,
29 |   pronunciation: PropTypes.string,
30 |   partOfSpeech: PropTypes.string,
31 |   message: PropTypes.object.isRequired
32 | }
33 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/components/Common/Button.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | 
 4 | const Button = ({ bgColor, size, children, onClick, className = '' }) => {
 5 |   const bgColorClassName =
 6 |     bgColor === 'indigo' ? 'bg-indigo-500' : 'bg-gray-200'
 7 |   const textColorClassName =
 8 |     bgColor === 'indigo' ? 'text-white' : 'text-gray-800'
 9 |   const hoverColorClassName =
10 |     bgColor === 'indigo' ? 'hover:bg-indigo-600' : 'hover:bg-gray-300'
11 | 
12 |   let fontSizeClassName = ''
13 |   let paddingClassName = ''
14 | 
15 |   switch (size) {
16 |     case 'sm':
17 |       fontSizeClassName = 'text-sm'
18 |       paddingClassName = 'px-2 py-1'
19 |       break
20 |     case 'lg':
21 |       fontSizeClassName = 'text-lg'
22 |       paddingClassName = 'px-6 py-2'
23 |       break
24 |     default:
25 |       fontSizeClassName = 'text-base'
26 |       paddingClassName = 'px-4 py-2'
27 |   }
28 | 
29 |   return (
30 |     <button
31 |       onClick={onClick}
32 |       className={`${className} ${bgColorClassName} ${textColorClassName} ${fontSizeClassName} ${paddingClassName} rounded-lg ${hoverColorClassName}`}>
33 |       {children}
34 |     </button>
35 |   )
36 | }
37 | 
38 | export default Button
39 | 
40 | Button.propTypes = {
41 |   bgColor: PropTypes.string,
42 |   size: PropTypes.string,
43 |   children: PropTypes.node.isRequired,
44 |   onClick: PropTypes.func,
45 |   className: PropTypes.string
46 | }
47 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/pages/Review/Quiz.js:
--------------------------------------------------------------------------------
 1 | import { Outlet, useNavigate } from 'react-router-dom'
 2 | import { useSelector, useDispatch } from 'react-redux'
 3 | import EndSessionPopup from '../../components/Features/Review/EndSessionPopup'
 4 | import BackPopup from '../../components/Features/Review/BackPopup'
 5 | import {
 6 |   setShowQuit as setQuizShowQuit,
 7 |   resetQuiz
 8 | } from '../../reducers/quizReducer'
 9 | import React, { useEffect } from 'react'
10 | 
11 | const Quiz = () => {
12 |   const { showNotFinished, inSession, showQuit } = useSelector(
13 |     (state) => state.quiz
14 |   )
15 |   const dispatch = useDispatch()
16 |   const navigate = useNavigate()
17 | 
18 |   useEffect(() => {
19 |     dispatch(resetQuiz())
20 |   }, [dispatch])
21 | 
22 |   const handleBack = () => {
23 |     if (inSession) {
24 |       dispatch(setQuizShowQuit(true))
25 |     } else {
26 |       navigate('..')
27 |     }
28 |   }
29 | 
30 |   return (
31 |     <div className='flex flex-col gap-3 w-full items-center'>
32 |       <div
33 |         className='text-sm underline hover:font-semibold cursor-pointer self-start'
34 |         onClick={handleBack}>
35 |         Back to Review
36 |       </div>
37 |       <h1 className='text-xl sm:text-2xl font-bold text-center'>Quiz</h1>
38 |       <Outlet />
39 |       {showNotFinished && <EndSessionPopup page='quiz' />}
40 |       {showQuit && <BackPopup page='quiz' />}
41 |     </div>
42 |   )
43 | }
44 | export default Quiz
45 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/pages/Review/Flashcards.js:
--------------------------------------------------------------------------------
 1 | import { Outlet, useNavigate } from 'react-router-dom'
 2 | import { useSelector, useDispatch } from 'react-redux'
 3 | import EndSessionPopup from '../../components/Features/Review/EndSessionPopup'
 4 | import BackPopup from '../../components/Features/Review/BackPopup'
 5 | import {
 6 |   setShowQuit as setFlashcardsShowQuit,
 7 |   resetFlashcards
 8 | } from '../../reducers/flashcardsReducer'
 9 | import React, { useEffect } from 'react'
10 | 
11 | const Flashcards = () => {
12 |   const { showNotFinished, inSession, showQuit } = useSelector(
13 |     (state) => state.flashcards
14 |   )
15 | 
16 |   const dispatch = useDispatch()
17 |   const navigate = useNavigate()
18 | 
19 |   useEffect(() => {
20 |     dispatch(resetFlashcards())
21 |   }, [dispatch])
22 | 
23 |   const handleBack = () => {
24 |     if (inSession) {
25 |       dispatch(setFlashcardsShowQuit(true))
26 |     } else {
27 |       navigate('..')
28 |     }
29 |   }
30 | 
31 |   return (
32 |     <div className='flex flex-col gap-3 w-full'>
33 |       <div
34 |         className='text-sm underline hover:font-semibold cursor-pointer'
35 |         onClick={handleBack}>
36 |         Back to Review
37 |       </div>
38 |       <h1 className='text-xl sm:text-2xl font-bold text-center'>Flashcards</h1>
39 |       <Outlet />
40 |       {showNotFinished && <EndSessionPopup page='flashcards' />}
41 |       {showQuit && <BackPopup page='flashcards' />}
42 |     </div>
43 |   )
44 | }
45 | 
46 | export default Flashcards
47 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/components/UI/Footer.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   AiOutlineLinkedin,
 3 |   AiOutlineGithub,
 4 |   AiOutlineMail,
 5 |   AiOutlineTwitter
 6 | } from 'react-icons/ai'
 7 | import React from 'react'
 8 | import PropType from 'prop-types'
 9 | 
10 | const Footer = () => {
11 |   return (
12 |       <footer className='mt-7 w-full text-center flex items-center justify-center py-4 bg-indigo-50 text-gray-700'>
13 |         <div className='px-2 border-r-2 border-gray-600 text-sm'>Developed by Tiffany Chan</div>
14 |         <div className='flex px-2 gap-1'>
15 |           <a
16 |             href='https://www.linkedin.com/in/pui-yi-tiffany-chan-2a35271a5/'
17 |             target='_blank'
18 |             rel='noopener noreferrer'>
19 |             <AiOutlineLinkedin size={25}/>
20 |           </a>
21 |           <a
22 |             href='https://github.com/TiffanyChan614'
23 |             target='_blank'
24 |             rel='noopener noreferrer'>
25 |             <AiOutlineGithub size={25}/>
26 |           </a>
27 |           <a
28 |             href='mailto:tiffanychan1999614@gmail.com'
29 |             target='_blank'
30 |             rel='noopener noreferrer'>
31 |             <AiOutlineMail size={25}/>
32 |           </a>
33 |           <a
34 |             href='https://twitter.com/TiffanyChan614'
35 |             target='_blank'
36 |             rel='noopener noreferrer'>
37 |             <AiOutlineTwitter size={25}/>
38 |           </a>
39 |         </div>
40 |       </footer>
41 |   )
42 | }
43 | 
44 | export default Footer
45 | 
46 | Footer.propTypes = {
47 |   children: PropType.node
48 | }
49 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/components/Features/Review/NumberChoice.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropType from 'prop-types'
 3 | 
 4 | const NumberChoice = ({
 5 |   choiceArray,
 6 |   wordsLength,
 7 |   number,
 8 |   prompt,
 9 |   handleNumberClick
10 | }) => {
11 |   const numberButtonStyleClassName = (buttonName) => {
12 |     const baseStyle =
13 |       'border-2 text-gray-600 rounded-xl py-2 px-4 w-full flex justify-center items-center hover: border-indigo-100 hover:font-semibold hover:bg-indigo-100'
14 |     const activeStyle = 'bg-indigo-100 font-semibold border-indigo-100'
15 |     return baseStyle + (number === buttonName ? ' ' + activeStyle : '')
16 |   }
17 | 
18 |   const numberButtons = choiceArray.filter((num) => num <= wordsLength)
19 | 
20 |   return (
21 |     <div className='card--number flex flex-col gap-3 w-full sm:w-3/4 max-w-[400px]'>
22 |       <h2 className='text-lg font-bold'>{prompt}</h2>
23 |       <div className='flex flex-col gap-4 w-full'>
24 |         {numberButtons.map((button) => (
25 |           <button
26 |             type='button'
27 |             key={button}
28 |             name={button}
29 |             onClick={handleNumberClick}
30 |             className={numberButtonStyleClassName(button)}>
31 |             {button}
32 |           </button>
33 |         ))}
34 |       </div>
35 |     </div>
36 |   )
37 | }
38 | 
39 | export default NumberChoice
40 | 
41 | NumberChoice.propTypes = {
42 |   choiceArray: PropType.array.isRequired,
43 |   wordsLength: PropType.number.isRequired,
44 |   number: PropType.number.isRequired,
45 |   prompt: PropType.string.isRequired,
46 |   handleNumberClick: PropType.func.isRequired
47 | }
48 | 


--------------------------------------------------------------------------------
/vocabularybuilder/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vocabularybuilder",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
 7 |     "@reduxjs/toolkit": "^1.9.5",
 8 |     "@testing-library/jest-dom": "^5.17.0",
 9 |     "@testing-library/react": "^13.4.0",
10 |     "@testing-library/user-event": "^13.5.0",
11 |     "axios": "^1.4.0",
12 |     "js-cookie": "^3.0.5",
13 |     "pexels": "^1.4.0",
14 |     "prop-types": "^15.8.1",
15 |     "react": "^18.2.0",
16 |     "react-dom": "^18.2.0",
17 |     "react-icons": "^4.10.1",
18 |     "react-redux": "^8.1.2",
19 |     "react-router-dom": "^6.14.2",
20 |     "react-scripts": "5.0.1",
21 |     "uuid": "^9.0.0",
22 |     "web-vitals": "^2.1.4"
23 |   },
24 |   "scripts": {
25 |     "start": "react-scripts start",
26 |     "build": "react-scripts build",
27 |     "test": "react-scripts test",
28 |     "eject": "react-scripts eject"
29 |   },
30 |   "eslintConfig": {
31 |     "extends": [
32 |       "react-app",
33 |       "react-app/jest"
34 |     ]
35 |   },
36 |   "browserslist": {
37 |     "production": [
38 |       ">0.2%",
39 |       "not dead",
40 |       "not op_mini all"
41 |     ],
42 |     "development": [
43 |       "last 1 chrome version",
44 |       "last 1 firefox version",
45 |       "last 1 safari version"
46 |     ]
47 |   },
48 |   "devDependencies": {
49 |     "eslint": "^8.50.0",
50 |     "eslint-config-standard": "^17.1.0",
51 |     "eslint-plugin-import": "^2.28.1",
52 |     "eslint-plugin-n": "^16.1.0",
53 |     "eslint-plugin-promise": "^6.1.1",
54 |     "eslint-plugin-react": "^7.33.2",
55 |     "jest": "^27.5.1",
56 |     "tailwindcss": "^3.3.3"
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/components/Features/Review/EndSessionPopup.js:
--------------------------------------------------------------------------------
 1 | import Popup from '../../Common/Popup'
 2 | import { setShowNotFinished as setFlashcardsShowNotFinished } from '../../../reducers/flashcardsReducer'
 3 | import { setShowNotFinished as setQuizShowNotFinished } from '../../../reducers/quizReducer'
 4 | import { useDispatch } from 'react-redux'
 5 | import { useNavigate } from 'react-router-dom'
 6 | import React from 'react'
 7 | import PropType from 'prop-types'
 8 | 
 9 | const EndSessionPopup = ({ page }) => {
10 |   const dispatch = useDispatch()
11 |   const navigate = useNavigate()
12 | 
13 |   const handleNo = () => {
14 |     if (page === 'quiz') {
15 |       dispatch(setQuizShowNotFinished(false))
16 |     } else {
17 |       dispatch(setFlashcardsShowNotFinished(false))
18 |     }
19 |   }
20 | 
21 |   const handleYes = () => {
22 |     navigate('result')
23 |     if (page === 'quiz') {
24 |       dispatch(setQuizShowNotFinished(false))
25 |     } else {
26 |       dispatch(setFlashcardsShowNotFinished(false))
27 |     }
28 |   }
29 | 
30 |   const message =
31 |     page === 'quiz'
32 |       ? "You haven't answered all the questions."
33 |       : "You haven't rated all the flashcards."
34 | 
35 |   return (
36 |     <Popup
37 |       title='End Review'
38 |       handleYes={handleYes}
39 |       handleNo={handleNo}>
40 |       <p>
41 |         {message} If you end now, points will only be counted towards the cards
42 |         that you have reviewed.
43 |       </p>
44 |       <p className='font-semibold'>Are you sure to end the review?</p>
45 |     </Popup>
46 |   )
47 | }
48 | 
49 | export default EndSessionPopup
50 | 
51 | EndSessionPopup.propTypes = {
52 |   page: PropType.string.isRequired
53 | }
54 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/reducers/flashcardsReducer.js:
--------------------------------------------------------------------------------
 1 | import { createSlice } from '@reduxjs/toolkit'
 2 | 
 3 | const initialState = {
 4 |   mode: '',
 5 |   wordArray: [],
 6 |   number: 0,
 7 |   showNotFinished: false,
 8 |   showQuit: false,
 9 |   inSession: false
10 | }
11 | 
12 | const flashcardsSlice = createSlice({
13 |   name: 'flashcards',
14 |   initialState,
15 |   reducers: {
16 |     setMode: (state, action) => {
17 |       return {
18 |         ...state,
19 |         mode: action.payload
20 |       }
21 |     },
22 |     setWordArray: (state, action) => {
23 |       return {
24 |         ...state,
25 |         wordArray: action.payload
26 |       }
27 |     },
28 |     setNumber: (state, action) => {
29 |       return {
30 |         ...state,
31 |         number: action.payload
32 |       }
33 |     },
34 |     setWordArrayByIndex: (state, action) => {
35 |       const { index, word } = action.payload
36 |       const newWordArray = [...state.wordArray]
37 |       newWordArray[index] = word
38 |       return {
39 |         ...state,
40 |         wordArray: newWordArray
41 |       }
42 |     },
43 |     setShowNotFinished: (state, action) => {
44 |       return {
45 |         ...state,
46 |         showNotFinished: action.payload
47 |       }
48 |     },
49 |     setShowQuit: (state, action) => {
50 |       return {
51 |         ...state,
52 |         showQuit: action.payload
53 |       }
54 |     },
55 |     setInSession: (state, action) => {
56 |       return {
57 |         ...state,
58 |         inSession: action.payload
59 |       }
60 |     },
61 |     resetFlashcards: () => {
62 |       return {
63 |         ...initialState
64 |       }
65 |     }
66 |   }
67 | })
68 | 
69 | export const {
70 |   setMode,
71 |   setWordArray,
72 |   setNumber,
73 |   setWordArrayByIndex,
74 |   setShowNotFinished,
75 |   setShowQuit,
76 |   setInSession,
77 |   resetFlashcards
78 | } = flashcardsSlice.actions
79 | export default flashcardsSlice.reducer
80 | 


--------------------------------------------------------------------------------
/vocabularybuilder/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link
 6 |       rel="icon"
 7 |       href="%PUBLIC_URL%/favicon.ico" />
 8 |     <meta
 9 |       name="viewport"
10 |       content="width=device-width, initial-scale=1" />
11 |     <meta
12 |       name="theme-color"
13 |       content="#000000" />
14 |     <meta
15 |       name="description"
16 |       content="Web site created using create-react-app" />
17 |     <link
18 |       rel="apple-touch-icon"
19 |       href="%PUBLIC_URL%/logo192.png" />
20 |     <!--
21 |       manifest.json provides metadata used when your web app is installed on a
22 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
23 |     -->
24 |     <link
25 |       rel="manifest"
26 |       href="%PUBLIC_URL%/manifest.json" />
27 |     <!--
28 |       Notice the use of %PUBLIC_URL% in the tags above.
29 |       It will be replaced with the URL of the `public` folder during the build.
30 |       Only files inside the `public` folder can be referenced from the HTML.
31 | 
32 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
33 |       work correctly both with client-side routing and a non-root public URL.
34 |       Learn how to configure a non-root public URL by running `npm run build`.
35 |     -->
36 |     <title>Vocabulary Builder</title>
37 |   </head>
38 |   <body>
39 |     <noscript>You need to enable JavaScript to run this app.</noscript>
40 |     <div id="root"></div>
41 |     <!--
42 |       This HTML file is a template.
43 |       If you open it directly in the browser, you will see an empty page.
44 | 
45 |       You can add webfonts, meta tags, or analytics to this file.
46 |       The build step will place the bundled scripts into the <body> tag.
47 | 
48 |       To begin the development, run `npm start` or `yarn start`.
49 |       To create a production bundle, use `npm run build` or `yarn build`.
50 |     -->
51 |   </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/pages/Search/Search.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from 'react'
 2 | import { useNavigate, Outlet } from 'react-router-dom'
 3 | import SearchField from '../../components/Common/SearchField'
 4 | import WordForm from '../../components/Features/WordForm/WordForm'
 5 | import { useDispatch, useSelector } from 'react-redux'
 6 | import {
 7 |   setSearchValue as setSearchSearchValue,
 8 |   setCurrentPage as setSearchCurrentPage
 9 | } from '../../reducers/searchReducer'
10 | import {
11 |   setShowAllDetails as setMeaningsShowDetails,
12 |   setPartOfSpeechFilter as setMeaningsPartOfSpeechFilter
13 | } from '../../reducers/wordMeaningsReducer'
14 | 
15 | const Search = () => {
16 |   const dispatch = useDispatch()
17 |   const navigate = useNavigate()
18 | 
19 |   const { searchValue, showForm, formWord, currentPage } = useSelector(
20 |     (state) => state.search
21 |   )
22 | 
23 |   console.log('formWord', formWord)
24 |   console.log('searchValue in Search', searchValue)
25 | 
26 |   const handleInputChange = (e) => {
27 |     dispatch(setMeaningsShowDetails({}))
28 |     dispatch(setMeaningsPartOfSpeechFilter(''))
29 |     dispatch(setSearchSearchValue(e.target.value))
30 |     dispatch(setSearchCurrentPage('search'))
31 |   }
32 | 
33 |   const clearSearchValue = () => {
34 |     dispatch(setMeaningsShowDetails({}))
35 |     dispatch(setMeaningsPartOfSpeechFilter(''))
36 |     dispatch(setSearchSearchValue(''))
37 |     dispatch(setSearchCurrentPage('search'))
38 |   }
39 | 
40 |   useEffect(() => {
41 |     navigate(`/${currentPage}`)
42 |   }, [currentPage, navigate])
43 | 
44 |   return (
45 |     <>
46 |       <div className='flex flex-col gap-5 w-full'>
47 |         <SearchField
48 |           searchValue={searchValue}
49 |           clearSearchValue={clearSearchValue}
50 |           placeholder='Search for a word'
51 |           handleInputChange={handleInputChange}
52 |         />
53 |         <Outlet />
54 |       </div>
55 |       {showForm && <WordForm page='search' />}
56 |     </>
57 |   )
58 | }
59 | 
60 | export default Search
61 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/hooks/useReviewResult.js:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react'
 2 | import { useDispatch, useSelector } from 'react-redux'
 3 | import {
 4 |   setWordArray as setQuizWordArray,
 5 |   setInSession as setQuizInSession
 6 | } from '../reducers/quizReducer'
 7 | import {
 8 |   setWordArray as setFlashcardsWordArray,
 9 |   setInSession as setFlashcardsInSession
10 | } from '../reducers/flashcardsReducer'
11 | import { setWords as setJournalWords } from '../reducers/journalReducer'
12 | 
13 | const useReviewResult = (page, wordArray) => {
14 |   const dispatch = useDispatch()
15 |   const { words } = useSelector((state) => state.journal)
16 |   console.log('wordArray', wordArray)
17 | 
18 |   useEffect(() => {
19 |     const newWordArray = wordArray?.map((word) => {
20 |       const { originalPoints, pointsEarned } = word
21 |       const newPointsEarned = pointsEarned || 0
22 |       const newPoints = originalPoints + newPointsEarned
23 |       return {
24 |         ...word,
25 |         newPoints: newPoints < 0 ? 0 : newPoints,
26 |         pointsEarned: newPointsEarned || 0
27 |       }
28 |     })
29 | 
30 |     console.log('newWordArray', newWordArray)
31 |     const newJournalWords = words.map((word) => ({
32 |       ...word,
33 |       points:
34 |         newWordArray.find((w) => w.id === word.id)?.newPoints || word.points,
35 |       lastReviewed:
36 |         newWordArray.find((w) => w.id === word.id)?.pointsEarned === 0
37 |           ? word.lastReviewed
38 |           : new Date().toISOString()
39 |     }))
40 | 
41 |     console.log('newJournalWords', newJournalWords)
42 |     const updateWordArray =
43 |       page === 'quiz' ? setQuizWordArray : setFlashcardsWordArray
44 |     const updateInSession =
45 |       page === 'quiz' ? setQuizInSession : setFlashcardsInSession
46 |     dispatch(updateWordArray(newWordArray))
47 |     dispatch(updateInSession(false))
48 |     localStorage.setItem('journal', JSON.stringify(newJournalWords))
49 |     dispatch(setJournalWords(newJournalWords))
50 |   }, [])
51 | }
52 | 
53 | export default useReviewResult
54 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/components/Features/Review/ModeChoice.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropType from 'prop-types'
 3 | 
 4 | const ModeChoice = ({ mode, modesArray, handleModeClick }) => {
 5 |   const modeButtonStyleClassName = (buttonName) => {
 6 |     const baseStyle =
 7 |       'border-2 text-gray-600 rounded-xl py-2 px-4 w-full flex justify-center items-center hover:font-semibold'
 8 |     const isActive = mode.name === buttonName
 9 |     console.log(buttonName, isActive)
10 |     const colorStyle = () => {
11 |       switch (modesArray.findIndex((b) => b.name === buttonName)) {
12 |         case 0:
13 |           return (
14 |             'border-amber-100 hover:bg-amber-100' +
15 |             (isActive ? ' bg-amber-100 font-semibold' : '')
16 |           )
17 |         case 1:
18 |           return (
19 |             'border-sky-100 hover:bg-sky-100' +
20 |             (isActive ? ' bg-sky-100 font-semibold' : '')
21 |           )
22 |         case 2:
23 |           return (
24 |             'border-rose-100 hover:bg-rose-100' +
25 |             (isActive ? ' bg-rose-100 font-semibold' : '')
26 |           )
27 |         default:
28 |           return ''
29 |       }
30 |     }
31 |     return `${baseStyle} ${colorStyle()}`
32 |   }
33 | 
34 |   return (
35 |     <div className='flashcards--mode flex flex-col gap-3 w-full sm:w-3/4 max-w-[400px]'>
36 |       <h2 className='text-lg font-bold'>Please select a mode:</h2>
37 | 
38 |       <div className='flex flex-col gap-4 w-full'>
39 |         {modesArray.map((button) => (
40 |           <button
41 |             key={button.name}
42 |             name={button.name}
43 |             className={modeButtonStyleClassName(button.name)}
44 |             onClick={handleModeClick}>
45 |             {button.text}
46 |           </button>
47 |         ))}
48 |       </div>
49 |     </div>
50 |   )
51 | }
52 | 
53 | export default ModeChoice
54 | 
55 | ModeChoice.propTypes = {
56 |   mode: PropType.object.isRequired,
57 |   modesArray: PropType.array.isRequired,
58 |   handleModeClick: PropType.func.isRequired
59 | }
60 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/services/wordAPI.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | 
 3 | const getWordData = async (word) => {
 4 |   const options = {
 5 |     method: 'GET',
 6 |     url: `https://wordsapiv1.p.rapidapi.com/words/${word}`,
 7 |     headers: {
 8 |       'X-RapidAPI-Key': process.env.REACT_APP_WORD_API_KEY,
 9 |       'X-RapidAPI-Host': process.env.REACT_APP_WORD_API_HOST
10 |     }
11 |   }
12 | 
13 |   try {
14 |     const response = await axios.request(options)
15 |     return response.data
16 |   } catch (error) {
17 |     if (error.response && error.response.status === 404) {
18 |       console.error('word not found')
19 |       return null
20 |     } else {
21 |       console.error(error)
22 |       throw error
23 |     }
24 |   }
25 | }
26 | 
27 | const getMatchedWords = async (word) => {
28 |   const options = {
29 |     method: 'GET',
30 |     url: 'https://wordsapiv1.p.rapidapi.com/words/',
31 |     params: {
32 |       letterPattern: `^${word}\\w*$`,
33 |       limit: 10
34 |     },
35 |     headers: {
36 |       'X-RapidAPI-Key': process.env.REACT_APP_WORD_API_KEY,
37 |       'X-RapidAPI-Host': process.env.REACT_APP_WORD_API_HOST
38 |     }
39 |   }
40 | 
41 |   try {
42 |     const response = await axios.request(options)
43 |     return response.data
44 |   } catch (error) {
45 |     if (error.response && error.response.status === 404) {
46 |       console.error('word not found')
47 |       return null
48 |     } else {
49 |       console.error(error)
50 |       throw error
51 |     }
52 |   }
53 | }
54 | 
55 | const getRandomWord = async () => {
56 |   const options = {
57 |     method: 'GET',
58 |     url: 'https://wordsapiv1.p.rapidapi.com/words/',
59 |     params: {
60 |       random: 'true'
61 |     },
62 |     headers: {
63 |       'X-RapidAPI-Key': process.env.REACT_APP_WORD_API_KEY,
64 |       'X-RapidAPI-Host': process.env.REACT_APP_WORD_API_HOST
65 |     }
66 |   }
67 | 
68 |   try {
69 |     const response = await axios.request(options)
70 |     return response.data
71 |   } catch (error) {
72 |     console.error(error)
73 |     throw error
74 |   }
75 | }
76 | 
77 | export { getWordData, getMatchedWords, getRandomWord }
78 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/components/Features/WordForm/WordFormField.js:
--------------------------------------------------------------------------------
 1 | import TextArea from '../../Common/TextArea'
 2 | import { MdOutlineDeleteOutline } from 'react-icons/md'
 3 | import { AiOutlinePlus } from 'react-icons/ai'
 4 | import React from 'react'
 5 | import PropType from 'prop-types'
 6 | 
 7 | const WordFormField = ({
 8 |   fieldName,
 9 |   fieldData,
10 |   handleChange,
11 |   handleDelete,
12 |   handleAdd
13 | }) => {
14 |   return (
15 |     <div className='word-form--fields flex flex-col gap-2'>
16 |       <div className='word-form--details-name font-bold'>
17 |         {fieldName[0].toUpperCase() + fieldName.slice(1)}
18 |       </div>
19 |       <div className='word-form--details-content flex flex-col gap-2'>
20 |         {fieldData?.map((data, i) => (
21 |           <div key={data + i}>
22 |             <div className='flex flex-row gap-2 items-center'>
23 |               <TextArea
24 |                 id={`${fieldName}-${i}`}
25 |                 name={fieldName}
26 |                 value={data}
27 |                 onBlur={(e) => handleChange(e, i)}
28 |                 height={fieldName === 'examples' ? 'h-15' : 'h-10'}
29 |               />
30 |               <button
31 |                 type='button'
32 |                 className='delete'
33 |                 name={fieldName}
34 |                 onClick={(e) => handleDelete(e, i)}>
35 |                 <div className='pointer-events-none'>
36 |                   <MdOutlineDeleteOutline size={20} />
37 |                 </div>
38 |               </button>
39 |             </div>
40 |           </div>
41 |         ))}
42 |       </div>
43 |       <button
44 |         name={fieldName}
45 |         type='button'
46 |         onClick={handleAdd}
47 |         className='flex items-center hover:bg-indigo-100 rounded p-2'>
48 |         <div className='pointer-events-none'>
49 |           <AiOutlinePlus size={20} />
50 |         </div>
51 |         <div className='ml-2 pointer-events-none'>
52 |           Add {fieldName[0].toUpperCase() + fieldName.slice(1)}
53 |         </div>
54 |       </button>
55 |     </div>
56 |   )
57 | }
58 | 
59 | export default WordFormField
60 | 
61 | WordFormField.propTypes = {
62 |   fieldName: PropType.string.isRequired,
63 |   fieldData: PropType.array.isRequired,
64 |   handleChange: PropType.func.isRequired,
65 |   handleDelete: PropType.func.isRequired,
66 |   handleAdd: PropType.func.isRequired
67 | }
68 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/pages/Review/Review.js:
--------------------------------------------------------------------------------
 1 | import { Link, Outlet, useLocation } from 'react-router-dom'
 2 | import { useDispatch } from 'react-redux'
 3 | import {
 4 |   setSearchValue as setSearchSearchValue,
 5 |   setCurrentPage as setSearchCurrentPage
 6 | } from '../../reducers/searchReducer'
 7 | import React from 'react'
 8 | 
 9 | const Review = () => {
10 |   const location = useLocation()
11 |   const dispatch = useDispatch()
12 |   const isReviewPage = location.pathname === '/review'
13 |   const divStyleClassName =
14 |     'w-full font-semibold hover:bg-indigo-100 hover:text-indigo-800 text-lg border-2 rounded-xl border-indigo-100 flex items-center justify-center p-6'
15 | 
16 |   const isJournalEmpty = (() => {
17 |     try {
18 |       const journalData = localStorage.getItem('journal')
19 |       return !journalData || JSON.parse(journalData).length === 0
20 |     } catch (error) {
21 |       console.error('Error parsing journal data:', error)
22 |       return true
23 |     }
24 |   })()
25 | 
26 |   return (
27 |     <div className='w-full flex flex-col items-center'>
28 |       {isReviewPage && (
29 |         <div className='flex flex-col gap-2 md:gap-5 w-full max-w-screen-md'>
30 |           <h1 className='text-xl md:text-2xl font-bold text-center'>Review</h1>
31 |           {isJournalEmpty
32 |             ? (
33 |                 <div className='text-center w-full'>
34 |                   There is no word in your journal to review.{' '}
35 |                   <Link
36 |                     className='text-indigo-800 hover:underline'
37 |                     to='../search'
38 |                     onClick={() => {
39 |                       dispatch(setSearchSearchValue(''))
40 |                       dispatch(setSearchCurrentPage('search'))
41 |                     }}>
42 |                     Explore new words here!
43 |                   </Link>
44 |                 </div>
45 |               )
46 |             : (
47 |                 <>
48 |                   <Link to='flashcards'>
49 |                     <div className={divStyleClassName}>Flashcards</div>
50 |                   </Link>
51 |                   <Link to='quiz'>
52 |                     <div className={divStyleClassName}>Quiz</div>
53 |                   </Link>
54 |                 </>
55 |               )}
56 |         </div>
57 |       )}
58 |       <Outlet />
59 |     </div>
60 |   )
61 | }
62 | 
63 | export default Review
64 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/components/Features/Review/ResultTable.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | 
 4 | const ResultTable = ({ wordArray }) => {
 5 |   const bgColor = (pointsEarned) => {
 6 |     if (pointsEarned > 0) {
 7 |       return 'bg-emerald-100'
 8 |     } else if (pointsEarned < 0) {
 9 |       return 'bg-rose-100'
10 |     } else {
11 |       return 'bg-gray-100'
12 |     }
13 |   }
14 | 
15 |   const changeColor = (pointsEarned) => {
16 |     if (pointsEarned > 0) {
17 |       return 'text-emerald-700'
18 |     } else if (pointsEarned < 0) {
19 |       return 'text-rose-700'
20 |     } else {
21 |       return 'text-gray-700'
22 |     }
23 |   }
24 | 
25 |   const headerStyleClassName = 'p-2 font-semibold text-center'
26 | 
27 |   return (
28 |     <table>
29 |       <thead>
30 |         <tr>
31 |           <th
32 |             className={headerStyleClassName}
33 |             scope='col'>
34 |             Word
35 |           </th>
36 |           <th
37 |             className={headerStyleClassName}
38 |             scope='col'>
39 |             Original Points
40 |           </th>
41 |           <th
42 |             className={headerStyleClassName}
43 |             scope='col'>
44 |             New Points
45 |           </th>
46 |           <th
47 |             className={headerStyleClassName}
48 |             scope='col'>
49 |             Points Earned
50 |           </th>
51 |         </tr>
52 |       </thead>
53 |       <tbody>
54 |         {wordArray.map((wordData, index) => {
55 |           const { word, originalPoints, newPoints, pointsEarned } = wordData
56 |           return (
57 |             <tr
58 |               className={`${bgColor(pointsEarned)}`}
59 |               key={word + index}>
60 |               <td className='p-4 font-semibold text-center'>{word}</td>
61 |               <td className='p-4 text-center'>{originalPoints}</td>
62 |               <td className='p-4 text-center'>{newPoints}</td>
63 |               <td
64 |                 className={`p-4 text-center font-bold ${changeColor(
65 |                   pointsEarned
66 |                 )}`}>
67 |                 {pointsEarned > 0 ? `+${pointsEarned}` : pointsEarned}
68 |               </td>
69 |             </tr>
70 |           )
71 |         })}
72 |       </tbody>
73 |     </table>
74 |   )
75 | }
76 | 
77 | export default ResultTable
78 | 
79 | ResultTable.propTypes = {
80 |   wordArray: PropTypes.array.isRequired
81 | }
82 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/components/Features/Word/WordDetails.js:
--------------------------------------------------------------------------------
 1 | import { AiFillSound } from 'react-icons/ai'
 2 | import React from 'react'
 3 | import PropType from 'prop-types'
 4 | 
 5 | const WordDetail = ({ fieldName, fieldData, transformSentence, speak }) => {
 6 |   if (!fieldData) return null
 7 | 
 8 |   let fieldContent
 9 | 
10 |   if (fieldName === 'Examples') {
11 |     fieldContent = (
12 |       <div className='word--details-content'>
13 |         <ul className='word-details--example-list flex- flex-col gap-2'>
14 |           {fieldData?.map((example, i) => {
15 |             const formattedExample = transformSentence(example)
16 |             const lines = formattedExample.split('/')
17 |             return (
18 |               <li
19 |                 key={example + i}
20 |                 className='flex flex-row gap-3'>
21 |                 <div className='lines'>
22 |                   {lines.map((line, i) => (
23 |                     <p key={i}>{line}</p>
24 |                   ))}
25 |                 </div>
26 |                 <button
27 |                   onClick={(e) => speak(e, example, 'samantha', 0.8)}
28 |                   aria-label='speak'>
29 |                   <AiFillSound size={15} />
30 |                 </button>
31 |               </li>
32 |             )
33 |           })}
34 |         </ul>
35 |       </div>
36 |     )
37 |   } else if (fieldName === 'Images') {
38 |     fieldContent = (
39 |       <div className='word--details-content flex gap-2 wrap'>
40 |         {fieldData.map((image, i) => (
41 |           <img
42 |             className='w-20 md:w-40 object-cover rounded-lg'
43 |             key={image + i}
44 |             src={image.src}
45 |             alt={image.alt}
46 |           />
47 |         ))}
48 |       </div>
49 |     )
50 |   } else {
51 |     const content = fieldData?.map((data, i) =>
52 |       i === fieldData?.length - 1 ? data : data + ', '
53 |     )
54 | 
55 |     fieldContent = (
56 |       <div className='word--details-content flex gap-2'>{content}</div>
57 |     )
58 |   }
59 |   return (
60 |     <div className='word--details'>
61 |       <div className='word--details-name font-bold'>{fieldName}</div>
62 |       {fieldContent}
63 |     </div>
64 |   )
65 | }
66 | 
67 | export default WordDetail
68 | 
69 | WordDetail.propTypes = {
70 |   fieldName: PropType.string.isRequired,
71 |   fieldData: PropType.oneOfType([
72 |     PropType.string,
73 |     PropType.array,
74 |     PropType.object
75 |   ]),
76 |   transformSentence: PropType.func,
77 |   speak: PropType.func
78 | }
79 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/reducers/flashcardsReducer.test.js:
--------------------------------------------------------------------------------
 1 | import flashcardsReducer, {
 2 |   setMode,
 3 |   setWordArray,
 4 |   setNumber,
 5 |   setWordArrayByIndex,
 6 |   setShowNotFinished,
 7 |   setShowQuit,
 8 |   setInSession,
 9 |   resetFlashcards
10 | } from './flashcardsReducer'
11 | 
12 | import { describe, expect, it } from 'vitest'
13 | 
14 | describe('flashcards reducer', () => {
15 |   const initialState = {
16 |     mode: '',
17 |     wordArray: [],
18 |     number: 0,
19 |     showNotFinished: false,
20 |     showQuit: false,
21 |     inSession: false
22 |   }
23 | 
24 |   it('should handle setMode', () => {
25 |     const nextState = flashcardsReducer(initialState, setMode('testing'))
26 |     expect(nextState.mode).toEqual('testing')
27 |   })
28 | 
29 |   it('should handle setWordArray', () => {
30 |     const testWordArray = ['word1', 'word2']
31 |     const nextState = flashcardsReducer(
32 |       initialState,
33 |       setWordArray(testWordArray)
34 |     )
35 |     expect(nextState.wordArray).toEqual(testWordArray)
36 |   })
37 | 
38 |   it('should handle setNumber', () => {
39 |     const nextState = flashcardsReducer(initialState, setNumber(2))
40 |     expect(nextState.number).toEqual(2)
41 |   })
42 | 
43 |   it('should handle setWordArrayByIndex', () => {
44 |     const initialStateWithWords = {
45 |       ...initialState,
46 |       wordArray: ['word1', 'word2', 'word3']
47 |     }
48 |     const nextState = flashcardsReducer(
49 |       initialStateWithWords,
50 |       setWordArrayByIndex({ index: 1, word: 'newWord' })
51 |     )
52 |     expect(nextState.wordArray).toEqual(['word1', 'newWord', 'word3'])
53 |   })
54 | 
55 |   it('should handle setShowNotFinished', () => {
56 |     const nextState = flashcardsReducer(initialState, setShowNotFinished(true))
57 |     expect(nextState.showNotFinished).toBe(true)
58 |   })
59 | 
60 |   it('should handle setShowQuit', () => {
61 |     const nextState = flashcardsReducer(initialState, setShowQuit(true))
62 |     expect(nextState.showQuit).toBe(true)
63 |   })
64 | 
65 |   it('should handle setInSession', () => {
66 |     const nextState = flashcardsReducer(initialState, setInSession(true))
67 |     expect(nextState.inSession).toBe(true)
68 |   })
69 | 
70 |   it('should handle resetFlashcards', () => {
71 |     const currentState = {
72 |       mode: 'testMode',
73 |       wordArray: ['testWord'],
74 |       number: 5,
75 |       showNotFinished: true,
76 |       showQuit: true,
77 |       inSession: true
78 |     }
79 |     const nextState = flashcardsReducer(currentState, resetFlashcards())
80 |     expect(nextState).toEqual(initialState)
81 |   })
82 | })
83 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/reducers/quizReducer.js:
--------------------------------------------------------------------------------
  1 | import { createSlice } from '@reduxjs/toolkit'
  2 | 
  3 | const initialState = {
  4 |   wordArray: [],
  5 |   questionArray: [],
  6 |   mode: '',
  7 |   number: 0,
  8 |   showNotFinished: false,
  9 |   showQuit: false,
 10 |   inSession: false,
 11 |   isLoading: false,
 12 |   error: null
 13 | }
 14 | 
 15 | const quizSlice = createSlice({
 16 |   name: 'quiz',
 17 |   initialState,
 18 |   reducers: {
 19 |     setWordArray: (state, action) => {
 20 |       return {
 21 |         ...state,
 22 |         wordArray: action.payload
 23 |       }
 24 |     },
 25 |     setQuestionArray: (state, action) => {
 26 |       return {
 27 |         ...state,
 28 |         questionArray: action.payload
 29 |       }
 30 |     },
 31 |     setMode: (state, action) => {
 32 |       return {
 33 |         ...state,
 34 |         mode: action.payload
 35 |       }
 36 |     },
 37 |     setNumber: (state, action) => {
 38 |       return {
 39 |         ...state,
 40 |         number: action.payload
 41 |       }
 42 |     },
 43 |     setWordArrayById: (state, action) => {
 44 |       const { id, word } = action.payload
 45 |       const newWordArray = state.wordArray.map((w) => {
 46 |         if (w.id === id) {
 47 |           return word
 48 |         } else {
 49 |           return w
 50 |         }
 51 |       })
 52 |       return {
 53 |         ...state,
 54 |         wordArray: newWordArray
 55 |       }
 56 |     },
 57 |     setShowNotFinished: (state, action) => {
 58 |       return {
 59 |         ...state,
 60 |         showNotFinished: action.payload
 61 |       }
 62 |     },
 63 |     setShowQuit: (state, action) => {
 64 |       return {
 65 |         ...state,
 66 |         showQuit: action.payload
 67 |       }
 68 |     },
 69 |     setInSession: (state, action) => {
 70 |       return {
 71 |         ...state,
 72 |         inSession: action.payload
 73 |       }
 74 |     },
 75 |     resetQuiz: () => {
 76 |       return initialState
 77 |     },
 78 |     setError: (state, action) => {
 79 |       return {
 80 |         ...state,
 81 |         error: action.payload
 82 |       }
 83 |     },
 84 |     setIsLoading: (state, action) => {
 85 |       return {
 86 |         ...state,
 87 |         isLoading: action.payload
 88 |       }
 89 |     }
 90 |   }
 91 | })
 92 | 
 93 | export const {
 94 |   setWordArray,
 95 |   setQuestionArray,
 96 |   setMode,
 97 |   setNumber,
 98 |   setWordArrayById,
 99 |   setShowNotFinished,
100 |   setShowQuit,
101 |   setInSession,
102 |   resetQuiz,
103 |   setError,
104 |   setIsLoading
105 | } = quizSlice.actions
106 | export default quizSlice.reducer
107 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/components/UI/Header.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { NavLink } from 'react-router-dom'
 3 | import { AiOutlineHome, AiOutlineSearch } from 'react-icons/ai'
 4 | import { BiBookBookmark } from 'react-icons/bi'
 5 | import { MdOutlineQuiz } from 'react-icons/md'
 6 | import useIsMobile from '../../hooks/useIsMobile'
 7 | import PropType from 'prop-types'
 8 | 
 9 | const Header = () => {
10 |   const activeTextStyleClassName =
11 |     'font-bold text-gray-800 hover:underline select-none'
12 |   const textLinkStyleClassName = 'text-gray-700 hover:underline select-none'
13 |   const iconLinkStyleClassName =
14 |     'hover:border-b-2 hover:pb-1 border-gray-700 text-gray-700 select-none'
15 |   const activeIconStyleClassName =
16 |     'border-b-2 border-gray-800 text-gray-800 pb-1 select-none'
17 |   const { isMobile } = useIsMobile(500)
18 | 
19 |   const navigationItems = [
20 |     {
21 |       text: 'Home',
22 |       icon: <AiOutlineHome size={25} />,
23 |       link: '/'
24 |     },
25 |     {
26 |       text: 'Search',
27 |       icon: <AiOutlineSearch size={25} />,
28 |       link: '/search'
29 |     },
30 |     {
31 |       text: 'Journal',
32 |       icon: <BiBookBookmark size={25} />,
33 |       link: '/journal'
34 |     },
35 |     {
36 |       text: 'Review',
37 |       icon: <MdOutlineQuiz size={25} />,
38 |       link: '/review'
39 |     }
40 |   ]
41 | 
42 |   return (
43 |     <div className='header-wrapper px-3 py-2'>
44 |       <header>
45 |         <nav className='flex flex-row items-center px-3 py-2 sm:py-3 border-b-2 border-indigo-100 gap-6 font-medium text-gray-700'>
46 |           {navigationItems.map((item) => (
47 |             <NavLink
48 |               key={item.link}
49 |               className={({ isActive }) =>
50 |                 isActive ? activeTextStyleClassName : textLinkStyleClassName
51 |               }
52 |               to={item.link}>
53 |               {({ isActive }) =>
54 |                 isMobile
55 |                   ? (
56 |                     <div
57 |                       className={
58 |                         isActive
59 |                           ? activeIconStyleClassName
60 |                           : iconLinkStyleClassName
61 |                       }
62 |                       aria-label={item.text}>
63 |                       {item.icon}
64 |                     </div>
65 |                     )
66 |                   : (
67 |                       item.text
68 |                     )
69 |               }
70 |             </NavLink>
71 |           ))}
72 |         </nav>
73 |       </header>
74 |     </div>
75 |   )
76 | }
77 | 
78 | export default Header
79 | 
80 | Header.propTypes = {
81 |   isMobile: PropType.bool
82 | }
83 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/App.js:
--------------------------------------------------------------------------------
 1 | import { BrowserRouter, Routes, Route } from 'react-router-dom'
 2 | import React from 'react'
 3 | import Home from './pages/Home'
 4 | import Search from './pages/Search/Search'
 5 | import Journal from './pages/Journal'
 6 | import Layout from './components/UI/Layout'
 7 | import WordMeanings from './pages/Search/WordMeanings'
 8 | import PossibleWords from './pages/Search/PossibleWords'
 9 | import Review from './pages/Review/Review'
10 | import Flashcards from './pages/Review/Flashcards'
11 | import FlashcardsMode from './pages/Review/FlashcardsMode'
12 | import Card from './pages/Review/Card'
13 | import FlashcardsResult from './pages/Review/FlashcardsResult'
14 | import Quiz from './pages/Review/Quiz'
15 | import QuizMode from './pages/Review/QuizMode'
16 | import QuizQuestion from './pages/Review/QuizQuestion'
17 | import QuizResult from './pages/Review/QuizResult'
18 | import NotFound from './pages/NotFound'
19 | 
20 | const App = () => {
21 |   return (
22 |     <BrowserRouter>
23 |       <Routes>
24 |         <Route
25 |           path='/'
26 |           element={<Layout />}>
27 |           <Route
28 |             index
29 |             element={<Home />}
30 |           />
31 |           <Route
32 |             path='search'
33 |             element={<Search />}>
34 |             <Route
35 |               index
36 |               element={<PossibleWords />}
37 |             />
38 |             <Route
39 |               path=':word'
40 |               element={<WordMeanings />}
41 |             />
42 |           </Route>
43 |           <Route
44 |             path='journal'
45 |             element={<Journal />}
46 |           />
47 |           <Route
48 |             path='review'
49 |             element={<Review />}>
50 |             <Route
51 |               path='flashcards'
52 |               element={<Flashcards />}>
53 |               <Route
54 |                 index
55 |                 element={<FlashcardsMode />}
56 |               />
57 |               <Route
58 |                 path=':index'
59 |                 element={<Card />}
60 |               />
61 |               <Route
62 |                 path='result'
63 |                 element={<FlashcardsResult />}
64 |               />
65 |             </Route>
66 |             <Route
67 |               path='quiz'
68 |               element={<Quiz />}>
69 |               <Route
70 |                 index
71 |                 element={<QuizMode />}
72 |               />
73 |               <Route
74 |                 path=':index'
75 |                 element={<QuizQuestion />}
76 |               />
77 |               <Route
78 |                 path='result'
79 |                 element={<QuizResult />}
80 |               />
81 |             </Route>
82 |           </Route>
83 |         </Route>
84 |         <Route
85 |           path='*'
86 |           element={<NotFound />}
87 |         />
88 |       </Routes>
89 |     </BrowserRouter>
90 |   )
91 | }
92 | 
93 | export default App
94 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/components/Features/Review/MCQuestion.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropType from 'prop-types'
 3 | 
 4 | const MCQuestion = ({ checked, chosen, questionData, handleSelect }) => {
 5 |   const { questionType, question, correctAnswer, choices } = questionData
 6 | 
 7 |   const answerButtonStyleClassName = (buttonName) => {
 8 |     const baseStyle =
 9 |       'border-2 text-gray-600 rounded-xl py-2 px-4 w-full flex justify-center items-center min-w-[250px]'
10 |     const uncheckedStyle =
11 |       'hover:font-semibold hover:bg-indigo-100 border-indigo-100'
12 |     const chosenStyle = 'bg-indigo-100 font-semibold border-indigo-100'
13 |     const correctStyle = 'bg-emerald-100 text-emerald-700 border-emerald-100'
14 |     const chosenCorrectStyle =
15 |       'bg-emerald-100 font-semibold text-emerald-700 border-emerald-100'
16 |     const wrongStyle = 'bg-rose-100 font-semibold text-rose-700 border-rose-100'
17 |     if (!checked) {
18 |       return (
19 |         baseStyle +
20 |         (chosen === buttonName ? ' ' + chosenStyle : ' ' + uncheckedStyle)
21 |       )
22 |     } else if (chosen === buttonName && checked) {
23 |       return (
24 |         baseStyle +
25 |         (chosen === correctAnswer ? ' ' + chosenCorrectStyle : ' ' + wrongStyle)
26 |       )
27 |     } else {
28 |       return (
29 |         baseStyle + (buttonName === correctAnswer ? ' ' + correctStyle : '')
30 |       )
31 |     }
32 |   }
33 | 
34 |   const typeToPrompt = {
35 |     'mc-definitionToWord': (
36 |       <p>
37 |         Choose the <span className='font-semibold'>word </span>that matches the
38 |         following definition:
39 |       </p>
40 |     ),
41 |     'mc-wordToDefinition': (
42 |       <p>
43 |         Choose the <span className='font-semibold'>definition</span> that
44 |         matches the following word:
45 |       </p>
46 |     ),
47 |     'mc-synonyms': (
48 |       <p>
49 |         Choose the word that is a <span className='font-semibold'>synonym</span>{' '}
50 |         of the following words:
51 |       </p>
52 |     ),
53 |     'mc-antonyms': (
54 |       <p>
55 |         Choose the word that is an{' '}
56 |         <span className='font-semibold'>antonym</span> of the following words:
57 |       </p>
58 |     )
59 |   }
60 |   return (
61 |     <div className='flex flex-col gap-3 text-center items-center'>
62 |       {typeToPrompt[questionType]}
63 |       <p className='font-semibold text-indigo-800 text-lg'>{question}</p>
64 |       <div className='flex flex-col gap-3 items-center'>
65 |         {choices?.map((answer) => (
66 |           <button
67 |             key={answer}
68 |             name={answer}
69 |             onClick={handleSelect}
70 |             className={answerButtonStyleClassName(answer)}>
71 |             {answer}
72 |           </button>
73 |         ))}
74 |       </div>
75 |     </div>
76 |   )
77 | }
78 | 
79 | export default MCQuestion
80 | 
81 | MCQuestion.propTypes = {
82 |   checked: PropType.bool.isRequired,
83 |   chosen: PropType.string.isRequired,
84 |   questionData: PropType.object.isRequired,
85 |   handleSelect: PropType.func.isRequired
86 | }
87 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/reducers/journalReducer.test.js:
--------------------------------------------------------------------------------
 1 | import journalReducer, {
 2 |   setWords,
 3 |   setSearchValue,
 4 |   setSortValue,
 5 |   setPartOfSpeechFilter,
 6 |   setShowForm,
 7 |   setFormWord,
 8 |   setShowDetailsById,
 9 |   setShowAllDetails,
10 |   setGoToTopButton,
11 |   setFilterOpen
12 | } from './journalReducer'
13 | 
14 | import { describe, it, expect } from 'vitest'
15 | 
16 | describe('journalReducer', () => {
17 |   const initialState = {
18 |     words: [],
19 |     searchValue: '',
20 |     sortValue: 'updated',
21 |     partOfSpeechFilter: null,
22 |     showForm: false,
23 |     formWord: '',
24 |     showDetails: {},
25 |     showAllDetails: false,
26 |     showGoToTopButton: false,
27 |     filterOpen: false
28 |   }
29 | 
30 |   it('should handle setWords', () => {
31 |     const testWords = [{ id: 1, word: 'testWord' }]
32 |     const nextState = journalReducer(initialState, setWords(testWords))
33 |     expect(nextState.words).toEqual(testWords)
34 |   })
35 | 
36 |   it('should handle setSearchValue', () => {
37 |     const nextState = journalReducer(initialState, setSearchValue('searchText'))
38 |     expect(nextState.searchValue).toBe('searchText')
39 |   })
40 | 
41 |   it('should handle setSortValue', () => {
42 |     const nextState = journalReducer(initialState, setSortValue('alphabetical'))
43 |     expect(nextState.sortValue).toBe('alphabetical')
44 |   })
45 | 
46 |   it('should handle setPartOfSpeechFilter', () => {
47 |     const nextState = journalReducer(
48 |       initialState,
49 |       setPartOfSpeechFilter('noun')
50 |     )
51 |     expect(nextState.partOfSpeechFilter).toBe('noun')
52 |   })
53 | 
54 |   it('should handle setShowForm', () => {
55 |     const nextState = journalReducer(initialState, setShowForm(true))
56 |     expect(nextState.showForm).toBe(true)
57 |   })
58 | 
59 |   it('should handle setFormWord', () => {
60 |     const nextState = journalReducer(initialState, setFormWord('newFormWord'))
61 |     expect(nextState.formWord).toBe('newFormWord')
62 |   })
63 | 
64 |   it('should handle setShowDetailsById', () => {
65 |     const initialStateWithShowDetails = {
66 |       ...initialState,
67 |       showDetails: { 1: false, 2: false }
68 |     }
69 |     const nextState = journalReducer(
70 |       initialStateWithShowDetails,
71 |       setShowDetailsById({ wordId: 1, showDetails: true })
72 |     )
73 |     expect(nextState.showDetails[1]).toBe(true)
74 |   })
75 | 
76 |   it('should handle setShowAllDetails', () => {
77 |     const nextState = journalReducer(initialState, setShowAllDetails(true))
78 |     expect(nextState.showAllDetails).toBe(true)
79 |     expect(
80 |       Object.values(nextState.showDetails).every((value) => value === true)
81 |     ).toBe(true)
82 |   })
83 | 
84 |   it('should handle setGoToTopButton', () => {
85 |     const nextState = journalReducer(initialState, setGoToTopButton(true))
86 |     expect(nextState.showGoToTopButton).toBe(true)
87 |   })
88 | 
89 |   it('should handle setFilterOpen', () => {
90 |     const nextState = journalReducer(initialState, setFilterOpen(true))
91 |     expect(nextState.filterOpen).toBe(true)
92 |   })
93 | })
94 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/pages/Review/FlashcardsMode.js:
--------------------------------------------------------------------------------
 1 | import { useDispatch, useSelector } from 'react-redux'
 2 | import {
 3 |   setInSession as setFlashcardsInSession,
 4 |   setMode as setFlashcardsMode,
 5 |   setNumber as setFlashcardsNumber,
 6 |   setWordArray as setFlashcardsWordArray
 7 | } from '../../reducers/flashcardsReducer'
 8 | import { useNavigate } from 'react-router-dom'
 9 | import Button from '../../components/Common/Button'
10 | import { getFlashcardsInitWordArray } from '../../utils/reviewHelper'
11 | import NumberChoice from '../../components/Features/Review/NumberChoice'
12 | import ModeChoice from '../../components/Features/Review/ModeChoice'
13 | import React from 'react'
14 | 
15 | const FlashcardsMode = () => {
16 |   const { mode, number } = useSelector((state) => state.flashcards)
17 |   const dispatch = useDispatch()
18 |   const navigate = useNavigate()
19 | 
20 |   const words = (() => {
21 |     try {
22 |       return JSON.parse(localStorage.getItem('journal'))
23 |     } catch {
24 |       return []
25 |     }
26 |   })()
27 | 
28 |   const minNum = Math.min(5, words.length)
29 | 
30 |   const modesArray = [
31 |     { name: 'wordToMeaning', text: 'Show Word, Guess Meaning' },
32 |     { name: 'meaningToWord', text: 'Show Meaning, Guess Word' },
33 |     { name: 'mixed', text: 'Mixed Mode' }
34 |   ]
35 | 
36 |   const handleModeClick = (e) => {
37 |     dispatch(
38 |       setFlashcardsMode(modesArray.find((b) => b.name === e.target.name))
39 |     )
40 |   }
41 | 
42 |   const handleStart = (e) => {
43 |     if (mode === '') {
44 |       e.preventDefault()
45 |       alert('Please select a mode')
46 |     } else if (number === 0) {
47 |       e.preventDefault()
48 |       alert('Please select the number of flashcards')
49 |     } else {
50 |       dispatch(
51 |         setFlashcardsWordArray(getFlashcardsInitWordArray(words, number, mode))
52 |       )
53 |       dispatch(setFlashcardsInSession(true))
54 |       navigate(mode === '' || number === 0 ? '' : '0')
55 |     }
56 |   }
57 | 
58 |   const handleNumberClick = (e) => {
59 |     dispatch(setFlashcardsNumber(Number(e.target.name)))
60 |   }
61 | 
62 |   return (
63 |     <div className='flashcards--options flex flex-col gap-5 text-center items-center'>
64 |       <ModeChoice
65 |         mode={mode}
66 |         modesArray={modesArray}
67 |         handleModeClick={handleModeClick}
68 |       />
69 |       <NumberChoice
70 |         choiceArray={[minNum, 10, 15, 20]}
71 |         wordsLength={words?.length}
72 |         number={number}
73 |         prompt='Please select the number of flashcards:'
74 |         handleNumberClick={handleNumberClick}
75 |       />
76 |       <Button
77 |         onClick={handleStart}
78 |         bgColor='indigo'
79 |         size='lg'
80 |         className='mt-4 font-semibold'>
81 |         Start
82 |       </Button>
83 |       <div className='mt-7 text-center'>
84 |         <span className='font-bold'>Reminder: </span>If you switch to other
85 |         pages in the middle of a review session, you will lose your current
86 |         review progress.
87 |       </div>
88 |     </div>
89 |   )
90 | }
91 | 
92 | export default FlashcardsMode
93 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/reducers/wordMeaningsReducer.test.js:
--------------------------------------------------------------------------------
  1 | import wordMeaningsReducer, {
  2 |   setWordData,
  3 |   setIsLoading,
  4 |   setPartOfSpeechFilter,
  5 |   setShowDetailsById,
  6 |   setShowDetailsArray,
  7 |   setShowAllDetails,
  8 |   setError,
  9 |   setFilterOpen
 10 | } from './wordMeaningsReducer'
 11 | 
 12 | import { describe, expect, it } from 'vitest'
 13 | 
 14 | describe('wordMeanings reducer', () => {
 15 |   const initialState = {
 16 |     wordData: [],
 17 |     isLoading: false,
 18 |     partOfSpeechFilter: '',
 19 |     showDetails: {},
 20 |     showAllDetails: false,
 21 |     error: null,
 22 |     filterOpen: false
 23 |   }
 24 | 
 25 |   it('should handle setWordData', () => {
 26 |     const testWordData = {
 27 |       results: [
 28 |         {
 29 |           id: 1,
 30 |           definition: 'Definition 1',
 31 |           partOfSpeech: 'noun',
 32 |           synonyms: ['synonym1', 'synonym2']
 33 |         },
 34 |         {
 35 |           id: 2,
 36 |           definition: 'Definition 2',
 37 |           partOfSpeech: 'verb',
 38 |           synonyms: ['synonym3', 'synonym4']
 39 |         }
 40 |       ],
 41 |       word: 'testWord',
 42 |       pronunciation: {
 43 |         all: 'testPronunciation'
 44 |       }
 45 |     }
 46 |     const nextState = wordMeaningsReducer(
 47 |       initialState,
 48 |       setWordData(testWordData)
 49 |     )
 50 |     expect(nextState.wordData.length).toBe(2)
 51 |     expect(nextState.wordData[0].id).toBe(1)
 52 |     expect(nextState.wordData[1].id).toBe(2)
 53 |   })
 54 | 
 55 |   it('should handle setIsLoading', () => {
 56 |     const nextState = wordMeaningsReducer(initialState, setIsLoading(true))
 57 |     expect(nextState.isLoading).toBe(true)
 58 |   })
 59 | 
 60 |   it('should handle partOfSpeechFilter', () => {
 61 |     const nextState = wordMeaningsReducer(
 62 |       initialState,
 63 |       setPartOfSpeechFilter('noun')
 64 |     )
 65 |     expect(nextState.partOfSpeechFilter).toBe('noun')
 66 |   })
 67 |   it('should handle setShowDetailsById', () => {
 68 |     const nextState = wordMeaningsReducer(
 69 |       initialState,
 70 |       setShowDetailsById({ wordId: 1, showDetails: true })
 71 |     )
 72 |     expect(nextState.showDetails[1]).toBe(true)
 73 |   })
 74 | 
 75 |   it('should handle setShowDetailsArray', () => {
 76 |     const testShowDetails = { 1: true, 2: false }
 77 |     const nextState = wordMeaningsReducer(
 78 |       initialState,
 79 |       setShowDetailsArray(testShowDetails)
 80 |     )
 81 |     expect(nextState.showDetails).toEqual(testShowDetails)
 82 |   })
 83 | 
 84 |   it('should handle setShowAllDetails', () => {
 85 |     const nextState = wordMeaningsReducer(initialState, setShowAllDetails(true))
 86 |     expect(nextState.showAllDetails).toBe(true)
 87 |     expect(nextState.showDetails).toEqual({}) // Expect showDetails to be empty
 88 |   })
 89 | 
 90 |   it('should handle setError', () => {
 91 |     const testError = 'An error occurred.'
 92 |     const nextState = wordMeaningsReducer(initialState, setError(testError))
 93 |     expect(nextState.error).toBe(testError)
 94 |   })
 95 | 
 96 |   it('should handle setFilterOpen', () => {
 97 |     const nextState = wordMeaningsReducer(initialState, setFilterOpen(true))
 98 |     expect(nextState.filterOpen).toBe(true)
 99 |   })
100 | })
101 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/reducers/journalReducer.js:
--------------------------------------------------------------------------------
  1 | import { createSlice } from '@reduxjs/toolkit'
  2 | 
  3 | const initialState = {
  4 |   words: [],
  5 |   searchValue: '',
  6 |   sortValue: 'updated',
  7 |   partOfSpeechFilter: null,
  8 |   showForm: false,
  9 |   formWord: '',
 10 |   showDetails: {},
 11 |   showAllDetails: false,
 12 |   showGoToTopButton: false,
 13 |   filterOpen: false
 14 | }
 15 | 
 16 | const journalSlice = createSlice({
 17 |   name: 'journal',
 18 |   initialState,
 19 |   reducers: {
 20 |     setWords: (state, action) => {
 21 |       const newWords = action.payload
 22 |       const newShowDetails = { ...state.showDetails }
 23 | 
 24 |       newWords?.forEach((result) => {
 25 |         if (typeof state.showDetails[result.id] === 'undefined') {
 26 |           newShowDetails[result.id] = false
 27 |         }
 28 |       })
 29 | 
 30 |       let allDetailsShown = true
 31 |       for (const wordId in newShowDetails) {
 32 |         if (!newShowDetails[wordId]) {
 33 |           allDetailsShown = false
 34 |           break
 35 |         }
 36 |       }
 37 | 
 38 |       return {
 39 |         ...state,
 40 |         words: newWords,
 41 |         showDetails: newShowDetails,
 42 |         showAllDetails: allDetailsShown
 43 |       }
 44 |     },
 45 |     setSearchValue: (state, action) => {
 46 |       return {
 47 |         ...state,
 48 |         searchValue: action.payload
 49 |       }
 50 |     },
 51 |     setSortValue: (state, action) => {
 52 |       return {
 53 |         ...state,
 54 |         sortValue: action.payload
 55 |       }
 56 |     },
 57 |     setPartOfSpeechFilter: (state, action) => {
 58 |       return {
 59 |         ...state,
 60 |         partOfSpeechFilter: action.payload
 61 |       }
 62 |     },
 63 |     setShowForm: (state, action) => {
 64 |       state.showForm = action.payload
 65 |     },
 66 |     setFormWord: (state, action) => {
 67 |       state.formWord = action.payload
 68 |     },
 69 |     setShowDetailsById: (state, action) => {
 70 |       const { wordId, showDetails } = action.payload
 71 |       const newShowDetails = { ...state.showDetails, [wordId]: showDetails }
 72 | 
 73 |       let allDetailsShown = true
 74 |       for (const wordId in newShowDetails) {
 75 |         if (!newShowDetails[wordId]) {
 76 |           allDetailsShown = false
 77 |           break
 78 |         }
 79 |       }
 80 | 
 81 |       return {
 82 |         ...state,
 83 |         showDetails: newShowDetails,
 84 |         showAllDetails: allDetailsShown
 85 |       }
 86 |     },
 87 |     setShowAllDetails: (state, action) => {
 88 |       const value = action.payload
 89 |       const newShowDetails = {}
 90 |       for (const wordId in state.showDetails) {
 91 |         newShowDetails[wordId] = value
 92 |       }
 93 |       return {
 94 |         ...state,
 95 |         showDetails: newShowDetails,
 96 |         showAllDetails: value
 97 |       }
 98 |     },
 99 |     setGoToTopButton: (state, action) => {
100 |       return {
101 |         ...state,
102 |         showGoToTopButton: action.payload
103 |       }
104 |     },
105 |     setFilterOpen: (state, action) => {
106 |       return {
107 |         ...state,
108 |         filterOpen: action.payload
109 |       }
110 |     }
111 |   }
112 | })
113 | 
114 | export const {
115 |   setWords,
116 |   setSearchValue,
117 |   setSortValue,
118 |   setPartOfSpeechFilter,
119 |   setShowForm,
120 |   setFormWord,
121 |   setShowDetailsById,
122 |   setShowAllDetails,
123 |   setGoToTopButton,
124 |   setFilterOpen
125 | } = journalSlice.actions
126 | export default journalSlice.reducer
127 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/reducers/quizReducer.test.js:
--------------------------------------------------------------------------------
  1 | import quizReducer, {
  2 |   setWordArray,
  3 |   setQuestionArray,
  4 |   setMode,
  5 |   setNumber,
  6 |   setWordArrayById,
  7 |   setShowNotFinished,
  8 |   setShowQuit,
  9 |   setInSession,
 10 |   resetQuiz,
 11 |   setError,
 12 |   setIsLoading
 13 | } from './quizReducer'
 14 | 
 15 | import { describe, it, expect } from 'vitest'
 16 | 
 17 | describe('quiz reducer', () => {
 18 |   const initialState = {
 19 |     wordArray: [],
 20 |     questionArray: [],
 21 |     mode: '',
 22 |     number: 0,
 23 |     showNotFinished: false,
 24 |     showQuit: false,
 25 |     inSession: false,
 26 |     isLoading: false,
 27 |     error: null
 28 |   }
 29 | 
 30 |   it('should handle setWordArray', () => {
 31 |     const testWordArray = ['word1', 'word2']
 32 |     const nextState = quizReducer(initialState, setWordArray(testWordArray))
 33 |     expect(nextState.wordArray).toEqual(testWordArray)
 34 |   })
 35 | 
 36 |   it('should handle setQuestionArray', () => {
 37 |     const testQuestionArray = ['question1', 'question2']
 38 |     const nextState = quizReducer(
 39 |       initialState,
 40 |       setQuestionArray(testQuestionArray)
 41 |     )
 42 |     expect(nextState.questionArray).toEqual(testQuestionArray)
 43 |   })
 44 | 
 45 |   it('should handle setMode', () => {
 46 |     const nextState = quizReducer(initialState, setMode('testing'))
 47 |     expect(nextState.mode).toBe('testing')
 48 |   })
 49 | 
 50 |   it('should handle setNumber', () => {
 51 |     const nextState = quizReducer(initialState, setNumber(5))
 52 |     expect(nextState.number).toBe(5)
 53 |   })
 54 | 
 55 |   it('should handle setWordArrayById', () => {
 56 |     const initialStateWithWords = {
 57 |       ...initialState,
 58 |       wordArray: [
 59 |         { id: 1, word: 'word1' },
 60 |         { id: 2, word: 'word2' }
 61 |       ]
 62 |     }
 63 |     const nextState = quizReducer(
 64 |       initialStateWithWords,
 65 |       setWordArrayById({ id: 2, word: { id: 2, word: 'newWord' } })
 66 |     )
 67 |     expect(nextState.wordArray[1].word).toBe('newWord')
 68 |   })
 69 | 
 70 |   it('should handle setShowNotFinished', () => {
 71 |     const nextState = quizReducer(initialState, setShowNotFinished(true))
 72 |     expect(nextState.showNotFinished).toBe(true)
 73 |   })
 74 | 
 75 |   it('should handle setShowQuit', () => {
 76 |     const nextState = quizReducer(initialState, setShowQuit(true))
 77 |     expect(nextState.showQuit).toBe(true)
 78 |   })
 79 | 
 80 |   it('should handle setInSession', () => {
 81 |     const nextState = quizReducer(initialState, setInSession(true))
 82 |     expect(nextState.inSession).toBe(true)
 83 |   })
 84 | 
 85 |   it('should handle resetQuiz', () => {
 86 |     const currentState = {
 87 |       ...initialState,
 88 |       mode: 'testMode',
 89 |       wordArray: ['testWord'],
 90 |       number: 5,
 91 |       showNotFinished: true,
 92 |       showQuit: true,
 93 |       inSession: true,
 94 |       isLoading: true,
 95 |       error: 'Test Error'
 96 |     }
 97 |     const nextState = quizReducer(currentState, resetQuiz())
 98 |     expect(nextState).toEqual(initialState)
 99 |   })
100 | 
101 |   it('should handle setError', () => {
102 |     const testError = 'An error occurred'
103 |     const nextState = quizReducer(initialState, setError(testError))
104 |     expect(nextState.error).toBe(testError)
105 |   })
106 | 
107 |   it('should handle setIsLoading', () => {
108 |     const nextState = quizReducer(initialState, setIsLoading(true))
109 |     expect(nextState.isLoading).toBe(true)
110 |   })
111 | })
112 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/components/Features/Word/Word.js:
--------------------------------------------------------------------------------
  1 | import WordDetails from './WordDetails'
  2 | import WordHeader from './WordHeader'
  3 | import { useSelector } from 'react-redux'
  4 | import React from 'react'
  5 | import PropType from 'prop-types'
  6 | 
  7 | const Word = ({ wordData, page }) => {
  8 |   const { showDetails } = useSelector((state) =>
  9 |     page === 'journal' ? state.journal : state.wordMeanings
 10 |   )
 11 | 
 12 |   const currentShowDetails =
 13 |     Object.keys(showDetails).length > 0 ? showDetails[wordData?.id] : false
 14 | 
 15 |   // console.log('showDetails in word', showDetails)
 16 | 
 17 |   // console.log('currentShowDetailsinWord', currentShowDetails)
 18 | 
 19 |   const speak = (e, text, voiceName, rate) => {
 20 |     e.stopPropagation()
 21 |     if ('speechSynthesis' in window) {
 22 |       const utterance = new SpeechSynthesisUtterance(text)
 23 |       utterance.rate = rate || 1
 24 |       const voices = speechSynthesis.getVoices()
 25 |       const selectedVoice = voices.find((voice) => voice.name === voiceName)
 26 |       if (selectedVoice) {
 27 |         utterance.voice = selectedVoice
 28 |       }
 29 |       speechSynthesis.speak(utterance)
 30 |     } else {
 31 |       console.err('Speech synthesis not supported')
 32 |     }
 33 |   }
 34 | 
 35 |   const transformSentence = (sentence) => {
 36 |     let returnedSentence = sentence
 37 |     if (returnedSentence && returnedSentence.length > 0) {
 38 |       if (returnedSentence[returnedSentence.length - 1] !== '.') {
 39 |         returnedSentence += '.'
 40 |       }
 41 |       return returnedSentence[0].toUpperCase() + returnedSentence.slice(1)
 42 |     }
 43 |   }
 44 | 
 45 |   if (wordData.word === 'no word') {
 46 |     return <div className='word'>No word found</div>
 47 |   } else {
 48 |     const { definition, synonyms, antonyms, examples, images } = wordData
 49 |     return (
 50 |       <div className='word flex flex-col p-3 rounded-xl border-2 border-indigo-100 gap-3'>
 51 |         <WordHeader
 52 |           wordData={wordData}
 53 |           page={page}
 54 |           speak={speak}
 55 |           currentShowDetails={currentShowDetails}
 56 |         />
 57 |         <div className='word--definition'>
 58 |           {transformSentence(definition) || 'No definition found'}
 59 |         </div>
 60 |         {currentShowDetails && (
 61 |           <div className='word--details flex flex-col gap-3'>
 62 |             {synonyms && synonyms?.length > 0 && (
 63 |               <WordDetails
 64 |                 fieldName='Synonyms'
 65 |                 fieldData={synonyms}
 66 |               />
 67 |             )}
 68 |             {antonyms && antonyms?.length > 0 && (
 69 |               <WordDetails
 70 |                 fieldName='Antonyms'
 71 |                 fieldData={antonyms}
 72 |               />
 73 |             )}
 74 |             {examples && examples.length > 0 && (
 75 |               <WordDetails
 76 |                 fieldName='Examples'
 77 |                 fieldData={examples}
 78 |                 transformSentence={transformSentence}
 79 |                 speak={speak}
 80 |               />
 81 |             )}
 82 |             {images && images.length > 0 && (
 83 |               <WordDetails
 84 |                 fieldName='Images'
 85 |                 fieldData={images}
 86 |               />
 87 |             )}
 88 |           </div>
 89 |         )}
 90 |       </div>
 91 |     )
 92 |   }
 93 | }
 94 | 
 95 | export default Word
 96 | 
 97 | Word.propTypes = {
 98 |   wordData: PropType.object.isRequired,
 99 |   page: PropType.string.isRequired
100 | }
101 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/components/Common/Filter.js:
--------------------------------------------------------------------------------
  1 | import { Link } from 'react-router-dom'
  2 | import { setPartOfSpeechFilter as setJournalPartOfSpeechFilter } from '../../reducers/journalReducer'
  3 | import { setPartOfSpeechFilter as setMeaningsPartOfSpeechFilter } from '../../reducers/wordMeaningsReducer'
  4 | import { useSelector, useDispatch } from 'react-redux'
  5 | import React from 'react'
  6 | import PropType from 'prop-types'
  7 | 
  8 | const Filter = ({ page }) => {
  9 |   const filterStyleClassName =
 10 |     'text-sm text-gray-700 font-semibold border-2 border-gray-200 hover:bg-gray-200 hover:border-gray-200 hover:text-gray-800 py-1 px-3 rounded-full'
 11 | 
 12 |   const filterActiveStyleClassName =
 13 |     'text-sm text-indigo-800 font-bold bg-indigo-100 border-2 border-indigo-100 py-1 px-3 rounded-full'
 14 | 
 15 |   const dispatch = useDispatch()
 16 | 
 17 |   const partOfSpeechFilter = useSelector((state) => {
 18 |     if (page === 'journal') {
 19 |       return state.journal.partOfSpeechFilter
 20 |     } else if (page === 'search') {
 21 |       return state.wordMeanings.partOfSpeechFilter
 22 |     }
 23 |   })
 24 | 
 25 |   const handleFilterClick = (filterValue) => {
 26 |     console.log('set filter to: ', filterValue)
 27 |     if (page === 'journal') {
 28 |       dispatch(setJournalPartOfSpeechFilter(filterValue))
 29 |     } else if (page === 'search') {
 30 |       dispatch(setMeaningsPartOfSpeechFilter(filterValue))
 31 |     }
 32 |   }
 33 | 
 34 |   return (
 35 |     <div className='flex gap-3 flex-wrap'>
 36 |       <Link to='?partOfSpeech=noun'>
 37 |         <div
 38 |           onClick={() => handleFilterClick('noun')}
 39 |           className={
 40 |             partOfSpeechFilter === 'noun'
 41 |               ? filterActiveStyleClassName
 42 |               : filterStyleClassName
 43 |           }>
 44 |           Nouns
 45 |         </div>
 46 |       </Link>
 47 |       <Link to='?partOfSpeech=verb'>
 48 |         <div
 49 |           onClick={() => handleFilterClick('verb')}
 50 |           className={
 51 |             partOfSpeechFilter === 'verb'
 52 |               ? filterActiveStyleClassName
 53 |               : filterStyleClassName
 54 |           }>
 55 |           Verbs
 56 |         </div>
 57 |       </Link>
 58 |       <Link to='?partOfSpeech=adjective'>
 59 |         <div
 60 |           onClick={() => handleFilterClick('adjective')}
 61 |           className={
 62 |             partOfSpeechFilter === 'adjective'
 63 |               ? filterActiveStyleClassName
 64 |               : filterStyleClassName
 65 |           }>
 66 |           Adjectives
 67 |         </div>
 68 |       </Link>
 69 |       <Link to='?partOfSpeech=adverb'>
 70 |         <div
 71 |           onClick={() => handleFilterClick('adverb')}
 72 |           className={
 73 |             partOfSpeechFilter === 'adverb'
 74 |               ? filterActiveStyleClassName
 75 |               : filterStyleClassName
 76 |           }>
 77 |           Adverbs
 78 |         </div>
 79 |       </Link>
 80 |       <Link to='?partOfSpeech=other'>
 81 |         <div
 82 |           onClick={() => handleFilterClick('other')}
 83 |           className={
 84 |             partOfSpeechFilter === 'other'
 85 |               ? filterActiveStyleClassName
 86 |               : filterStyleClassName
 87 |           }>
 88 |           Other
 89 |         </div>
 90 |       </Link>
 91 |       <Link to='.'>
 92 |         <div
 93 |           onClick={() => handleFilterClick('')}
 94 |           className='text-sm text-gray-700 font-semibold border-2 border-white hover:text-indigo-800 hover:underline py-1 px-3'>
 95 |           Clear Filter
 96 |         </div>
 97 |       </Link>
 98 |     </div>
 99 |   )
100 | }
101 | 
102 | export default Filter
103 | 
104 | Filter.propTypes = {
105 |   page: PropType.string.isRequired
106 | }
107 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/components/Features/WordForm/ImageDropZone.js:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react'
  2 | import PropTypes from 'prop-types'
  3 | 
  4 | const ImageDropZone = ({ formData, setFormData, setMessage }) => {
  5 |   const [isDragging, setIsDragging] = useState(false)
  6 | 
  7 |   const handleDragEnter = (e) => {
  8 |     e.preventDefault()
  9 |     setIsDragging(true)
 10 |   }
 11 | 
 12 |   const handleDragLeave = (e) => {
 13 |     e.preventDefault()
 14 |     setIsDragging(false)
 15 |   }
 16 | 
 17 |   const handleDragOver = (e) => {
 18 |     e.preventDefault()
 19 |   }
 20 | 
 21 |   const loadImageObjects = async (files) => {
 22 |     const promises = []
 23 |     for (let i = 0; i < files.length; i++) {
 24 |       const file = files[i]
 25 |       const reader = new FileReader()
 26 |       const promise = new Promise((resolve, reject) => {
 27 |         reader.onload = function (e) {
 28 |           const imageObject = {
 29 |             src: e.target.result,
 30 |             alt: file.name
 31 |           }
 32 |           resolve(imageObject)
 33 |         }
 34 |         reader.onerror = function (err) {
 35 |           reject(err)
 36 |         }
 37 |         reader.readAsDataURL(file)
 38 |       })
 39 |       promises.push(promise)
 40 |     }
 41 |     try {
 42 |       return await Promise.all(promises)
 43 |     } catch (err) {
 44 |       console.err(err)
 45 |     }
 46 |   }
 47 | 
 48 |   const handleImageUpdate = async (
 49 |     files,
 50 |     formData,
 51 |     setFormData,
 52 |     setMessage
 53 |   ) => {
 54 |     const currentImagesLength = formData.images.length
 55 |     if (files.length + currentImagesLength > 3) {
 56 |       alert('Only 3 images allowed')
 57 |       return
 58 |     }
 59 |     try {
 60 |       const imageObjects = await loadImageObjects(files)
 61 |       const newImages = [...formData.images, ...imageObjects]
 62 |       setFormData((prevFormData) => ({ ...prevFormData, images: newImages }))
 63 |       setMessage({ text: 'Images added!', type: 'success' })
 64 |     } catch (err) {
 65 |       setMessage({ text: 'Error adding images', type: 'error' })
 66 |     }
 67 |   }
 68 | 
 69 |   const handleDrop = async (e) => {
 70 |     e.preventDefault()
 71 |     setIsDragging(false)
 72 |     const files = e.dataTransfer.files
 73 |     if (files && files.length > 0) {
 74 |       await handleImageUpdate(files, formData, setFormData, setMessage)
 75 |     }
 76 |   }
 77 | 
 78 |   const handleFileChange = async (e) => {
 79 |     const files = e.target.files
 80 |     if (files && files.length > 0) {
 81 |       await handleImageUpdate(files, formData, setFormData, setMessage)
 82 |     }
 83 |   }
 84 | 
 85 |   const baseStyle =
 86 |     ' border-2 border-dashed w-full md:w-[300px] h-[200px] flex flex-col items-center justify-center text-gray-600 text-md rounded-lg'
 87 |   const inactiveStyle = 'border-gray-300'
 88 |   const activeStyle = 'border-indigo-300'
 89 | 
 90 |   return (
 91 |     <>
 92 |       <div
 93 |         className={`image-drop-zone ${
 94 |           isDragging ? activeStyle : inactiveStyle
 95 |         } ${baseStyle}`}
 96 |         onDragEnter={handleDragEnter}
 97 |         onDragLeave={handleDragLeave}
 98 |         onDragOver={handleDragOver}
 99 |         onDrop={handleDrop}>
100 |         <p className='pointer-events-none'>Drop images here</p>
101 |         <p>
102 |           Or,{' '}
103 |           <label className='underline hover:text-indigo-700 cursor-pointer'>
104 |             browse to upload
105 |             <input
106 |               type='file'
107 |               onChange={handleFileChange}
108 |               className='hidden'
109 |             />
110 |           </label>
111 |         </p>
112 |       </div>
113 |     </>
114 |   )
115 | }
116 | 
117 | export default ImageDropZone
118 | 
119 | ImageDropZone.propTypes = {
120 |   formData: PropTypes.object.isRequired,
121 |   setFormData: PropTypes.func.isRequired,
122 |   setMessage: PropTypes.func.isRequired
123 | }
124 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/pages/Search/PossibleWords.js:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useRef, useMemo } from 'react'
  2 | import { useNavigate, Outlet } from 'react-router-dom'
  3 | import { getMatchedWords } from '../../services/wordAPI'
  4 | import { useSelector, useDispatch } from 'react-redux'
  5 | import {
  6 |   setMatchedWords as setPossibleWordsMatchedWords,
  7 |   setIsLoading as setPossibleWordsIsLoading,
  8 |   setError as setPossibleWordsError
  9 | } from '../../reducers/possibleWordsReducer'
 10 | 
 11 | const CACHE_EXPIRATION_MS = 5 * 60 * 1000 // 5 min
 12 | 
 13 | const PossibleWords = () => {
 14 |   const dispatch = useDispatch()
 15 |   const navigate = useNavigate()
 16 |   const { searchValue } = useSelector((state) => state.search)
 17 |   const { matchedWords, isLoading, error } = useSelector(
 18 |     (state) => state.possibleWords
 19 |   )
 20 |   const isFirstRender = useRef(true)
 21 | 
 22 |   const cache = useMemo(() => ({}), [])
 23 | 
 24 |   const wordStyleClassName =
 25 |     'cursor-pointer border-2 border-gray-100 p-3 rounded-xl text-lg font-medium text-indigo-900 hover:border-indigo-100 hover:bg-indigo-100 hover:text-indigo-900 select-none'
 26 | 
 27 |   console.log('searchValue in possibleWords', searchValue)
 28 | 
 29 |   useEffect(() => {
 30 |     const isCacheExpired = (cacheItem) =>
 31 |       cacheItem && Date.now() - cacheItem.timestamp > CACHE_EXPIRATION_MS
 32 | 
 33 |     const cleanupExpiredCache = () => {
 34 |       Object.keys(cache).forEach((key) => {
 35 |         if (isCacheExpired(cache[key])) {
 36 |           delete cache[key]
 37 |         }
 38 |       })
 39 |     }
 40 |     async function fetchData () {
 41 |       if (searchValue === '' || error) {
 42 |         return
 43 |       }
 44 |       try {
 45 |         cleanupExpiredCache()
 46 |         if (cache[searchValue] && !isCacheExpired(cache[searchValue])) {
 47 |           dispatch(setPossibleWordsMatchedWords(cache[searchValue]))
 48 |         } else {
 49 |           dispatch(setPossibleWordsIsLoading(true))
 50 |           const returnedWords = await getMatchedWords(searchValue.toLowerCase())
 51 |           cache[searchValue.toLowerCase()] = returnedWords.results.data
 52 |           dispatch(setPossibleWordsMatchedWords(returnedWords.results.data))
 53 |         }
 54 |         dispatch(setPossibleWordsError(null))
 55 |       } catch (error) {
 56 |         dispatch(
 57 |           setPossibleWordsError({
 58 |             ...error,
 59 |             message:
 60 |               'Sorry, we could not fetch possible words. Please try again later.'
 61 |           })
 62 |         )
 63 |       } finally {
 64 |         dispatch(setPossibleWordsIsLoading(false))
 65 |       }
 66 |     }
 67 |     const newTimeoutId = setTimeout(() => {
 68 |       fetchData()
 69 |     }, 200)
 70 |     return () => {
 71 |       clearTimeout(newTimeoutId)
 72 |     }
 73 |   }, [searchValue, dispatch, error, cache])
 74 | 
 75 |   const matchedWordsElement = (() => {
 76 |     if (isLoading && searchValue !== '') {
 77 |       return <div>Loading...</div>
 78 |     }
 79 | 
 80 |     if (searchValue === '') {
 81 |       return null
 82 |     }
 83 | 
 84 |     if (matchedWords.length > 0) {
 85 |       return matchedWords.map((word, i) => (
 86 |         <div
 87 |           key={word + i}
 88 |           className={wordStyleClassName}
 89 |           onClick={() => navigate(`${word}`)}>
 90 |           {word}
 91 |         </div>
 92 |       ))
 93 |     }
 94 | 
 95 |     if (!isFirstRender.current) {
 96 |       return <div>Word not found</div>
 97 |     }
 98 | 
 99 |     return null
100 |   })()
101 | 
102 |   useEffect(() => {
103 |     isFirstRender.current = false
104 |   }, [])
105 | 
106 |   return (
107 |     <div>
108 |       <div className='search--matched-words flex flex-col gap-4'>
109 |         {error ? <div>Error: {error.message}</div> : matchedWordsElement}
110 |       </div>
111 |       <Outlet />
112 |     </div>
113 |   )
114 | }
115 | 
116 | export default PossibleWords
117 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/pages/Review/QuizMode.jsx:
--------------------------------------------------------------------------------
  1 | import { useDispatch, useSelector } from 'react-redux'
  2 | import NumberChoice from '../../components/Features/Review/NumberChoice'
  3 | import {
  4 |   setNumber as setQuizNumber,
  5 |   setQuestionArray as setQuizQuestionArray,
  6 |   setInSession as setQuizInSession,
  7 |   setWordArray as setQuizWordArray,
  8 |   setMode as setQuizMode,
  9 |   setError as setQuizError,
 10 |   setIsLoading as setQuizIsLoading
 11 | } from '../../reducers/quizReducer'
 12 | import Button from '../../components/Common/Button'
 13 | import {
 14 |   getQuizInitQuestionArray,
 15 |   getQuizInitWordArray
 16 | } from '../../utils/reviewHelper'
 17 | import { useNavigate } from 'react-router-dom'
 18 | import ModeChoice from '../../components/Features/Review/ModeChoice'
 19 | import React from 'react'
 20 | 
 21 | const QuizMode = () => {
 22 |   const { mode, number, error, isLoading } = useSelector((state) => state.quiz)
 23 |   const dispatch = useDispatch()
 24 |   const navigate = useNavigate()
 25 | 
 26 |   const words = (() => {
 27 |     try {
 28 |       return JSON.parse(localStorage.getItem('journal'))
 29 |     } catch {
 30 |       return []
 31 |     }
 32 |   })()
 33 | 
 34 |   const minNum = Math.min(5, words.length)
 35 | 
 36 |   const modesArray = [
 37 |     { name: 'MC', text: 'Multiple Choice' },
 38 |     { name: 'blank', text: 'Fill in the Blanks' },
 39 |     { name: 'mixed', text: 'Mixed' }
 40 |   ]
 41 | 
 42 |   const handleModeClick = (e) => {
 43 |     dispatch(setQuizMode(modesArray.find((b) => b.name === e.target.name)))
 44 |   }
 45 | 
 46 |   const handleNumberClick = (e) => {
 47 |     e.stopPropagation()
 48 |     dispatch(setQuizNumber(Number(e.target.name)))
 49 |   }
 50 | 
 51 |   const handleStart = async (e) => {
 52 |     e.stopPropagation()
 53 |     if (number === 0) {
 54 |       e.preventDefault()
 55 |       window.alert('Please select the number of words you want to review.')
 56 |     } else if (number === 0) {
 57 |       e.preventDefault()
 58 |       alert('Please select the number of words you want to review.')
 59 |     } else {
 60 |       try {
 61 |         const initWordArray = getQuizInitWordArray(words, number)
 62 |         dispatch(setQuizWordArray(initWordArray))
 63 |         dispatch(setQuizIsLoading(true))
 64 |         const initQuestionArray = await getQuizInitQuestionArray(
 65 |           initWordArray,
 66 |           mode
 67 |         )
 68 |         dispatch(setQuizQuestionArray(initQuestionArray))
 69 |         dispatch(setQuizInSession(true))
 70 |         dispatch(setQuizError(null))
 71 |         navigate('0')
 72 |       } catch (error) {
 73 |         dispatch(
 74 |           setQuizError({
 75 |             ...error,
 76 |             message:
 77 |               'Oops, something went wrong when initializing the quiz. Please try again.'
 78 |           })
 79 |         )
 80 |       }
 81 |     }
 82 |   }
 83 | 
 84 |   return (
 85 |     <div className='quiz--mode flex flex-col gap-3 w-full sm:w-3/4 items-center text-center'>
 86 |       {error && <div>Error: {error.message}</div>}
 87 |       {isLoading && <div>Initializing quiz...</div>}
 88 |       {!error && !isLoading && (
 89 |         <>
 90 |           <ModeChoice
 91 |             mode={mode}
 92 |             modesArray={modesArray}
 93 |             handleModeClick={handleModeClick}
 94 |           />
 95 |           <NumberChoice
 96 |             choiceArray={[minNum, 10, 15, 20]}
 97 |             wordsLength={words?.length}
 98 |             number={number}
 99 |             prompt='Please select the number of words you want to review:'
100 |             handleNumberClick={handleNumberClick}
101 |           />
102 |           <Button
103 |             onClick={handleStart}
104 |             bgColor='indigo'
105 |             size='lg'
106 |             className='mt-4 font-semibold'>
107 |             Start
108 |           </Button>
109 |         </>
110 |       )}
111 |     </div>
112 |   )
113 | }
114 | 
115 | export default QuizMode
116 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/components/Features/Review/BlanksQuestion.jsx:
--------------------------------------------------------------------------------
  1 | import { checkBlanksCorrect } from '../../../utils/reviewHelper'
  2 | import React from 'react'
  3 | import PropTypes from 'prop-types'
  4 | 
  5 | const BlanksQuestion = ({ checked, blanksAns, questionData, handleChange, handleNext, handleCheck }) => {
  6 |   const { questionType, question, correctAnswer } = questionData
  7 | 
  8 |   const questionElement =
  9 |     questionType === 'blank-images'
 10 |       ? (
 11 |         <img
 12 |           src={question.src}
 13 |           alt={question.alt}
 14 |           className='w-full max-w-screen-sm h-auto object-cover rounded-lg shadow-md'
 15 |         />
 16 |         )
 17 |       : (
 18 |           <p className='font-semibold'>{question}</p>
 19 |         )
 20 | 
 21 |   const handleKeyDown = (e, index) => {
 22 |     if (e.key === 'Backspace' && index > 1 && blanksAns[index] === '') {
 23 |       const prevIndex = index - 1
 24 |       const prevInput = document.querySelector(`[name=blank-${prevIndex}]`)
 25 |       if (prevInput) {
 26 |         prevInput.value = ''
 27 |         blanksAns[prevIndex] = ''
 28 |         prevInput.focus()
 29 |         e.preventDefault()
 30 |       }
 31 |     } else if (e.key === 'Enter') {
 32 |       if (checked) {
 33 |         handleNext()
 34 |       } else {
 35 |         handleCheck()
 36 |       }
 37 |     } else if (e.key === 'ArrowLeft' && index > 1) {
 38 |       const prevIndex = index - 1
 39 |       const prevInput = document.querySelector(`[name=blank-${prevIndex}]`)
 40 |       if (prevInput) {
 41 |         prevInput.focus()
 42 |       }
 43 |     } else if (e.key === 'ArrowRight' && index < blanksAns.length - 1) {
 44 |       const nextIndex = index + 1
 45 |       const nextInput = document.querySelector(`[name=blank-${nextIndex}]`)
 46 |       if (nextInput) {
 47 |         nextInput.focus()
 48 |       }
 49 |     }
 50 |   }
 51 | 
 52 |   const handleInput = (e, index) => {
 53 |     if (
 54 |       e.target.value.length === 1 &&
 55 |       index < blanksAns.length - 1 &&
 56 |       !checked
 57 |     ) {
 58 |       const nextIndex = index + 1
 59 |       const nextInput = document.querySelector(`[name=blank-${nextIndex}]`)
 60 |       if (nextInput) {
 61 |         nextInput.focus()
 62 |       }
 63 |     }
 64 |   }
 65 | 
 66 |   const blanksStyleClassName = (index) => {
 67 |     const baseClassName =
 68 |       'w-6 border-b-2 text-lg font-semibold flex-none outline-none text-center'
 69 |     if (checked && checkBlanksCorrect(blanksAns, correctAnswer)) {
 70 |       return `${baseClassName} text-emerald-500`
 71 |     } else if (checked && !checkBlanksCorrect(blanksAns, correctAnswer)) {
 72 |       return `${baseClassName} text-rose-500`
 73 |     } else if (!checked && index !== 0) {
 74 |       return `${baseClassName} text-blue-500`
 75 |     } else {
 76 |       return baseClassName
 77 |     }
 78 |   }
 79 | 
 80 |   const blanksElement = Array.from({ length: blanksAns.length }, (_, index) => (
 81 |     <input
 82 |       className={blanksStyleClassName(index)}
 83 |       value={blanksAns[index]}
 84 |       key={index}
 85 |       name={`blank-${index}`}
 86 |       type='text'
 87 |       onChange={handleChange}
 88 |       readOnly={checked || index === 0}
 89 |       maxLength='1'
 90 |       onInput={(e) => handleInput(e, index)}
 91 |       onKeyDown={(e) => handleKeyDown(e, index)}
 92 |       autoComplete='off'
 93 |     />
 94 |   ))
 95 | 
 96 |   return (
 97 |     <div className='flex flex-col gap-3 text-center items-center'>
 98 |       <p className='text-lg font-semibold'>Fill in the blanks:</p>
 99 |       {questionElement}
100 |       <div className='flex flex-wrap gap-2 justify-center items-center w-full'>
101 |         {blanksElement}
102 |       </div>
103 |     </div>
104 |   )
105 | }
106 | 
107 | export default BlanksQuestion
108 | 
109 | BlanksQuestion.propTypes = {
110 |   checked: PropTypes.bool.isRequired,
111 |   blanksAns: PropTypes.array.isRequired,
112 |   questionData: PropTypes.object.isRequired,
113 |   handleChange: PropTypes.func.isRequired,
114 |   handleNext: PropTypes.func.isRequired,
115 |   handleCheck: PropTypes.func.isRequired
116 | }
117 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/pages/Home.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react'
  2 | import { Link, useNavigate } from 'react-router-dom'
  3 | import { getRandomWord } from '../services/wordAPI'
  4 | import {
  5 |   setCurrentPage as setSearchCurrentPage,
  6 |   setSearchValue as setSearchSearchValue
  7 | } from '../reducers/searchReducer'
  8 | import { useDispatch } from 'react-redux'
  9 | import Button from '../components/Common/Button'
 10 | 
 11 | const Home = () => {
 12 |   const [word, setWord] = useState(null)
 13 |   const [error, setError] = useState(null)
 14 |   const dispatch = useDispatch()
 15 |   const navigate = useNavigate()
 16 |   const divClassName =
 17 |     'max-w-screen-md border-2 rounded-xl border-indigo-100 py-5 px-6 w-full mx-auto text-center md:px-10'
 18 | 
 19 |   const fetchRandomWord = async (maxRetries = 20) => {
 20 |     let retries = 0
 21 |     let word = null
 22 |     while (retries < maxRetries) {
 23 |       try {
 24 |         console.log('fetching random word')
 25 |         word = await getRandomWord()
 26 |         console.log('new word', word)
 27 | 
 28 |         if (word?.results?.length > 0) {
 29 |           return word.word
 30 |         }
 31 |       } catch (error) {
 32 |         setError(error)
 33 |       }
 34 |       retries++
 35 |     }
 36 |   }
 37 | 
 38 |   const handleLearnWord = () => {
 39 |     dispatch(setSearchCurrentPage(`search/${word}`))
 40 |     dispatch(setSearchSearchValue(word))
 41 |   }
 42 | 
 43 |   const handleSearchClick = () => {
 44 |     dispatch(setSearchCurrentPage('search'))
 45 |     dispatch(setSearchSearchValue(''))
 46 |     navigate('/search')
 47 |   }
 48 | 
 49 |   useEffect(() => {
 50 |     const getWordOfTheDay = async () => {
 51 |       const today = new Date().toISOString().slice(0, 10)
 52 |       const storedWord = localStorage.getItem('wordOfTheDay')
 53 |       const storedDate = localStorage.getItem('wordOfTheDayDate')
 54 |       if (storedDate === today && storedWord) {
 55 |         return storedWord
 56 |       } else {
 57 |         const word = await fetchRandomWord()
 58 |         localStorage.setItem('wordOfTheDay', word)
 59 |         localStorage.setItem('wordOfTheDayDate', today)
 60 |         return word
 61 |       }
 62 |     }
 63 |     getWordOfTheDay()
 64 |       .then((word) => {
 65 |         setError(null)
 66 |         setWord(word)
 67 |       })
 68 |       .catch((error) =>
 69 |         setError({
 70 |           ...error,
 71 |           message:
 72 |             'Sorry, we could not fetch the word of the day. Please try refreshing the page.'
 73 |         })
 74 |       )
 75 |   }, [])
 76 | 
 77 |   console.log('word', word)
 78 | 
 79 |   return (
 80 |     <div className='flex flex-col gap-2 md:gap-3 w-full items-center'>
 81 |       <h1 className='text-2xl font-bold md:text-4xl text-center'>
 82 |         Vocabulary Builder
 83 |       </h1>
 84 |       <p className='text-lg font-bold md:text-xl text-center'>
 85 |         Welcome to Vocabulary Builder!
 86 |       </p>
 87 |       <div className={`home--word-of-the-day ${divClassName} mt-2 md:mt-3`}>
 88 |         {error
 89 |           ? (
 90 |               <div>Error: {error.message}</div>
 91 |             )
 92 |           : (
 93 |             <>
 94 |               <h3 className='text-lg font-bold'>Word of the day</h3>
 95 |               <p className='text-xl font-bold text-indigo-800 my-4'>{word}</p>
 96 |               <Link
 97 |                 to={`search/${word}`}
 98 |                 className='text-md hover:text-indigo-800 hover:underline select-none'
 99 |                 onClick={handleLearnWord}>
100 |                 Learn this word
101 |               </Link>
102 |             </>
103 |             )}
104 |       </div>
105 |       <div className={`home--search ${divClassName}`}>
106 |         <h3 className='text-lg font-bold'>Don&apost know the meaning of a word?</h3>
107 |         <Button
108 |           bgColor='indigo'
109 |           size='md'
110 |           className='mt-4 font-semibold select-none'
111 |           onClick={handleSearchClick}>
112 |           Search
113 |         </Button>
114 |       </div>
115 |     </div>
116 |   )
117 | }
118 | 
119 | export default Home
120 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/reducers/wordMeaningsReducer.js:
--------------------------------------------------------------------------------
  1 | import { createSlice } from '@reduxjs/toolkit'
  2 | import { v4 as uuidv4 } from 'uuid'
  3 | 
  4 | const initialState = {
  5 |   wordData: [],
  6 |   isLoading: false,
  7 |   partOfSpeechFilter: '',
  8 |   showDetails: {},
  9 |   showAllDetails: false,
 10 |   error: null,
 11 |   filterOpen: false
 12 | }
 13 | 
 14 | const wordMeaningsSlice = createSlice({
 15 |   name: 'wordMeanings',
 16 |   initialState,
 17 |   reducers: {
 18 |     setWordData: (state, action) => {
 19 |       const wordData = action.payload
 20 |       // console.log('wordData in wordMeaningsReducer', wordData)
 21 | 
 22 |       let newWordData
 23 |       if (wordData.results && wordData.results?.length > 0) {
 24 |         newWordData = wordData.results?.map((result) => {
 25 |           // console.log('result in reducer', result.id)
 26 |           return {
 27 |             id: result.id || uuidv4(),
 28 |             word: wordData.word || 'no word',
 29 |             definition: result.definition || null,
 30 |             pronunciation: wordData.pronunciation?.all || null,
 31 |             partOfSpeech: result.partOfSpeech || null,
 32 |             synonyms: result.synonyms || null,
 33 |             antonyms: result.antonyms || null,
 34 |             examples: result.examples || null,
 35 |             images: [],
 36 |             points: null,
 37 |             lastReviewed: null
 38 |           }
 39 |         })
 40 |       } else {
 41 |         newWordData = [
 42 |           {
 43 |             id: null,
 44 |             word: wordData.word || 'no word',
 45 |             definition: null,
 46 |             pronunciation: null,
 47 |             partOfSpeech: null,
 48 |             synonyms: null,
 49 |             antonyms: null,
 50 |             examples: null,
 51 |             images: [],
 52 |             points: null,
 53 |             lastReviewed: null
 54 |           }
 55 |         ]
 56 |       }
 57 | 
 58 |       console.log('newWordData', newWordData)
 59 | 
 60 |       const newShowDetails = { ...state.showDetails }
 61 | 
 62 |       newWordData?.forEach((result) => {
 63 |         if (typeof state.showDetails[result.id] === 'undefined') {
 64 |           newShowDetails[result.id] = false
 65 |         }
 66 |       })
 67 | 
 68 |       let allDetailsShown = true
 69 |       for (const wordId in newShowDetails) {
 70 |         if (!newShowDetails[wordId]) {
 71 |           allDetailsShown = false
 72 |           break
 73 |         }
 74 |       }
 75 | 
 76 |       return {
 77 |         ...state,
 78 |         wordData: newWordData,
 79 |         showDetails: newShowDetails,
 80 |         showAllDetails: allDetailsShown
 81 |       }
 82 |     },
 83 |     setIsLoading: (state, action) => {
 84 |       return {
 85 |         ...state,
 86 |         isLoading: action.payload
 87 |       }
 88 |     },
 89 |     setPartOfSpeechFilter: (state, action) => {
 90 |       return {
 91 |         ...state,
 92 |         partOfSpeechFilter: action.payload
 93 |       }
 94 |     },
 95 |     setShowDetailsById: (state, action) => {
 96 |       const { wordId, showDetails } = action.payload
 97 |       const newShowDetails = {
 98 |         ...state.showDetails,
 99 |         [wordId]: showDetails
100 |       }
101 | 
102 |       let allDetailsShown = true
103 |       for (const wordId in newShowDetails) {
104 |         if (!newShowDetails[wordId]) {
105 |           allDetailsShown = false
106 |           break
107 |         }
108 |       }
109 | 
110 |       return {
111 |         ...state,
112 |         showDetails: newShowDetails,
113 |         showAllDetails: allDetailsShown
114 |       }
115 |     },
116 |     setShowDetailsArray: (state, action) => {
117 |       const newShowDetails = action.payload
118 | 
119 |       let allDetailsShown = true
120 |       for (const wordId in newShowDetails) {
121 |         if (!newShowDetails[wordId]) {
122 |           allDetailsShown = false
123 |           break
124 |         }
125 |       }
126 | 
127 |       return {
128 |         ...state,
129 |         showDetails: newShowDetails,
130 |         showAllDetails: allDetailsShown
131 |       }
132 |     },
133 |     setShowAllDetails: (state, action) => {
134 |       const value = action.payload
135 |       const newShowDetails = {}
136 |       for (const wordId in state.showDetails) {
137 |         newShowDetails[wordId] = value
138 |       }
139 |       return {
140 |         ...state,
141 |         showDetails: newShowDetails,
142 |         showAllDetails: value
143 |       }
144 |     },
145 |     setError: (state, action) => {
146 |       return {
147 |         ...state,
148 |         error: action.payload
149 |       }
150 |     },
151 |     setFilterOpen: (state, action) => {
152 |       return {
153 |         ...state,
154 |         filterOpen: action.payload
155 |       }
156 |     }
157 |   }
158 | })
159 | 
160 | export const {
161 |   setWordData,
162 |   setIsLoading,
163 |   setPartOfSpeechFilter,
164 |   setShowDetailsById,
165 |   setShowDetailsArray,
166 |   setShowAllDetails,
167 |   setError,
168 |   setFilterOpen
169 | } = wordMeaningsSlice.actions
170 | export default wordMeaningsSlice.reducer
171 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/components/Features/Word/WordHeader.js:
--------------------------------------------------------------------------------
  1 | import { AiFillSound, AiOutlinePlus, AiOutlineEdit } from 'react-icons/ai'
  2 | import { MdOutlineDeleteOutline } from 'react-icons/md'
  3 | import { FiMoreHorizontal } from 'react-icons/fi'
  4 | import {
  5 |   setShowForm as setJournalShowForm,
  6 |   setFormWord as setJournalFormWord,
  7 |   setWords as setJournalWords,
  8 |   setShowDetailsById as setJournalShowDetailsById
  9 | } from '../../../reducers/journalReducer'
 10 | import {
 11 |   setShowForm as setSearchShowForm,
 12 |   setFormWord as setSearchFormWord
 13 | } from '../../../reducers/searchReducer'
 14 | import { setShowDetailsById as setMeaningsShowDetailsById } from '../../../reducers/wordMeaningsReducer'
 15 | import { useDispatch, useSelector } from 'react-redux'
 16 | import React from 'react'
 17 | import PropTypes from 'prop-types'
 18 | 
 19 | const WordHeader = ({ wordData, page, speak, currentShowDetails }) => {
 20 |   const {
 21 |     word,
 22 |     pronunciation,
 23 |     partOfSpeech,
 24 |     synonyms,
 25 |     antonyms,
 26 |     examples,
 27 |     images,
 28 |     points
 29 |   } = wordData
 30 | 
 31 |   const dispatch = useDispatch()
 32 |   const { words } = useSelector((state) => state.journal)
 33 |   const updateShowDetails =
 34 |     page === 'journal' ? setJournalShowDetailsById : setMeaningsShowDetailsById
 35 |   const updateFormWord =
 36 |     page === 'journal' ? setJournalFormWord : setSearchFormWord
 37 | 
 38 |   const handleDelete = (id) => {
 39 |     const newWords = words.filter((word) => word.id !== id)
 40 |     dispatch(setJournalWords(newWords))
 41 |     localStorage.setItem('journal', JSON.stringify(newWords))
 42 |   }
 43 | 
 44 |   const toggleShowForm = (show) => {
 45 |     if (page === 'search') {
 46 |       dispatch(setSearchShowForm(show))
 47 |     } else if (page === 'journal') {
 48 |       dispatch(setJournalShowForm(show))
 49 |     }
 50 |   }
 51 | 
 52 |   const handleClick = (e) => {
 53 |     toggleShowForm(true)
 54 |     dispatch(updateFormWord(wordData))
 55 |   }
 56 | 
 57 |   const handleShowDetails = () => {
 58 |     console.log('wordData', wordData)
 59 |     console.log('wordData?.id', wordData?.id)
 60 |     dispatch(
 61 |       updateShowDetails({
 62 |         wordId: wordData?.id,
 63 |         showDetails: !currentShowDetails
 64 |       })
 65 |     )
 66 |   }
 67 | 
 68 |   return (
 69 |     <div className='word--header flex justify-between gap-2 flex-wrap'>
 70 |       <div className='flex gap-2 flex-row flex-wrap items-center'>
 71 |         <div className='flex flex-row gap-1 items-center flex-wrap'>
 72 |           <h2 className='text-lg md:text-xl font-bold text-indigo-800'>
 73 |             {word}
 74 |           </h2>
 75 |           {pronunciation && (
 76 |             <div className='flex gap-2'>
 77 |               <h3 className='text-md md:text-lg'>{`[${pronunciation}]`}</h3>
 78 |               <button
 79 |                 className='word--audio'
 80 |                 onClick={(e) => speak(e, word, 'samantha', 0.8)}
 81 |                 aria-label='speak'>
 82 |                 <AiFillSound size={20} />
 83 |               </button>
 84 |             </div>
 85 |           )}
 86 |         </div>
 87 |         {partOfSpeech && (
 88 |           <h4 className='font-semibold text-sm md:text-md md:ml-5'>
 89 |             {partOfSpeech[0].toUpperCase() + partOfSpeech.slice(1)}
 90 |           </h4>
 91 |         )}
 92 |         {points !== null && (
 93 |           <div className='text-blue-500 md:ml-5'>
 94 |             {points + (points === 1 ? ' point' : ' points')}
 95 |           </div>
 96 |         )}
 97 |       </div>
 98 | 
 99 |       <div className='flex gap-3 items-start'>
100 |         {(synonyms?.length > 0 ||
101 |           antonyms?.length > 0 ||
102 |           examples?.length > 0 ||
103 |           images?.length > 0) && (
104 |           <button onClick={handleShowDetails}>
105 |             <FiMoreHorizontal size={20} />
106 |           </button>
107 |         )}
108 | 
109 |         {page === 'search' && (
110 |           <button
111 |             onClick={handleClick}
112 |             aria-label='Add to journal'>
113 |             <AiOutlinePlus size={20} />
114 |           </button>
115 |         )}
116 | 
117 |         {page === 'journal' && typeof wordData?.id !== 'undefined' && (
118 |           <button
119 |             type='button'
120 |             onClick={handleClick}
121 |             aria-label='Edit'>
122 |             <AiOutlineEdit size={20} />
123 |           </button>
124 |         )}
125 | 
126 |         {page === 'journal' && typeof wordData?.id !== 'undefined' && (
127 |           <button
128 |             type='button'
129 |             onClick={() => handleDelete(wordData.id)}
130 |             aria-label='delete'>
131 |             <MdOutlineDeleteOutline size={20} />
132 |           </button>
133 |         )}
134 |       </div>
135 |     </div>
136 |   )
137 | }
138 | 
139 | export default WordHeader
140 | 
141 | WordHeader.propTypes = {
142 |   wordData: PropTypes.object.isRequired,
143 |   page: PropTypes.string.isRequired,
144 |   speak: PropTypes.func.isRequired,
145 |   currentShowDetails: PropTypes.bool.isRequired
146 | }
147 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/pages/Search/WordMeanings.js:
--------------------------------------------------------------------------------
  1 | import React, { useEffect } from 'react'
  2 | import { useParams, Link } from 'react-router-dom'
  3 | import Word from '../../components/Features/Word/Word'
  4 | import { getWordData } from '../../services/wordAPI'
  5 | import Filter from '../../components/Common/Filter'
  6 | import { useDispatch, useSelector } from 'react-redux'
  7 | import {
  8 |   setWordData as setMeaningsWordData,
  9 |   setIsLoading as setMeaningsIsLoading,
 10 |   setShowAllDetails as setMeaningsShowAllDetails,
 11 |   setError as setMeaningsError,
 12 |   setFilterOpen as setMeaningsFilterOpen
 13 | } from '../../reducers/wordMeaningsReducer'
 14 | import { setCurrentPage as setSearchCurrentPage } from '../../reducers/searchReducer'
 15 | import useIsMobile from '../../hooks/useIsMobile'
 16 | 
 17 | const WordMeanings = () => {
 18 |   const { word } = useParams()
 19 |   const dispatch = useDispatch()
 20 |   const { isMobile } = useIsMobile(1070)
 21 |   const {
 22 |     wordData,
 23 |     isLoading,
 24 |     partOfSpeechFilter,
 25 |     showAllDetails,
 26 |     showDetails,
 27 |     error,
 28 |     filterOpen
 29 |   } = useSelector((state) => state.wordMeanings)
 30 | 
 31 |   console.log('showAllDetails', showAllDetails)
 32 |   console.log('showDetails', showDetails)
 33 | 
 34 |   console.log('word data in WordMeanings', wordData)
 35 | 
 36 |   let displayedMeanings
 37 | 
 38 |   if (partOfSpeechFilter !== '') {
 39 |     if (partOfSpeechFilter === 'other') {
 40 |       displayedMeanings = wordData?.filter(
 41 |         (result) =>
 42 |           result.partOfSpeech !== 'noun' &&
 43 |           result.partOfSpeech !== 'verb' &&
 44 |           result.partOfSpeech !== 'adjective' &&
 45 |           result.partOfSpeech !== 'adverb'
 46 |       )
 47 |     } else {
 48 |       displayedMeanings = wordData?.filter(
 49 |         (result) => result.partOfSpeech === partOfSpeechFilter
 50 |       )
 51 |       // console.log('displayedMeanings', displayedMeanings)
 52 |     }
 53 |   } else {
 54 |     displayedMeanings = wordData
 55 |   }
 56 | 
 57 |   // console.log('word inside WordMeanings', word)
 58 |   // console.log('wordData', wordData)
 59 | 
 60 |   const handleDetailsClick = (e) => {
 61 |     e.preventDefault()
 62 |     dispatch(setMeaningsShowAllDetails(!showAllDetails))
 63 |   }
 64 | 
 65 |   useEffect(() => {
 66 |     async function fetchData () {
 67 |       dispatch(setMeaningsIsLoading(true))
 68 |       try {
 69 |         if (
 70 |           wordData.length > 0 &&
 71 |           wordData.every((data) => data.word === word)
 72 |         ) {
 73 |           console.log('wordData already exists')
 74 |         } else {
 75 |           const returnedWordData = await getWordData(word)
 76 |           console.log('returnedWordData', returnedWordData)
 77 |           dispatch(setMeaningsWordData(returnedWordData))
 78 |           dispatch(setMeaningsError(null))
 79 |         }
 80 |       } catch (error) {
 81 |         dispatch(
 82 |           setMeaningsError({
 83 |             ...error,
 84 |             message:
 85 |               'Sorry, we are having trouble fetching the data. Please try again later.'
 86 |           })
 87 |         )
 88 |       } finally {
 89 |         dispatch(setMeaningsIsLoading(false))
 90 |       }
 91 |     }
 92 |     fetchData()
 93 |   }, [word, dispatch, wordData])
 94 | 
 95 |   useEffect(() => {
 96 |     dispatch(setSearchCurrentPage(`search/${word}`))
 97 |   }, [dispatch, word])
 98 | 
 99 |   const wordDataElement = (() => {
100 |     if (isLoading || !wordData) {
101 |       return <div>Loading...</div>
102 |     }
103 | 
104 |     if (displayedMeanings && displayedMeanings.length > 0) {
105 |       return displayedMeanings.map((result, i) => (
106 |         <Word
107 |           key={result.word + i}
108 |           wordData={result}
109 |           page='search'
110 |         />
111 |       ))
112 |     } else if (partOfSpeechFilter === '') {
113 |       return (
114 |         <Word
115 |           key={wordData.word || 'no word'}
116 |           wordData={wordData}
117 |           page='search'
118 |         />
119 |       )
120 |     } else {
121 |       return (
122 |         <div>
123 |           No results found. Try clearing the filter or switch to other filters.
124 |         </div>
125 |       )
126 |     }
127 |   })()
128 | 
129 |   return (
130 |     <div className='search--word-meanings flex flex-col gap-5 px-2'>
131 |       <nav className='flex flex-row items-center flex-wrap gap-3 justify-between'>
132 |         <div className='flex flex-row items-center gap-3'>
133 |           <Link
134 |             to='..'
135 |             className='ml-2 underline text-sm hover:text-indigo-800 md:text-md'
136 |             onClick={() => dispatch(setSearchCurrentPage('search'))}>
137 |             Back
138 |           </Link>
139 |           {isMobile
140 |             ? (
141 |                 <button
142 |                   className={`text-sm text-gray-700 font-semibold border-2 border-indigo-100 hover:text-indigo-800 hover:bg-indigo-100 py-1 px-3 rounded-lg
143 |                 ${filterOpen ? 'bg-indigo-100' : ''}
144 |               `}
145 |                   onClick={() => dispatch(setMeaningsFilterOpen(!filterOpen))}>
146 |                   {filterOpen ? 'Hide' : 'Show'} filter
147 |                 </button>
148 |               )
149 |             : (
150 |                 <Filter page='search' />
151 |               )}
152 |         </div>
153 |         <button
154 |           onClick={handleDetailsClick}
155 |           className='py-1 px-3 border-2 border-indigo-100 rounded-lg text-sm font-semibold hover:bg-indigo-100 hover:text-indigo-800'>
156 |           {showAllDetails ? 'Hide all details' : 'Show all details'}
157 |         </button>
158 |       </nav>
159 |       {filterOpen && isMobile && (
160 |         <div>
161 |           <Filter page='search' />
162 |         </div>
163 |       )}
164 |       {error ? <div>Error: {error.message}</div> : wordDataElement}
165 |     </div>
166 |   )
167 | }
168 | 
169 | export default WordMeanings
170 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/components/Features/WordForm/WordFormImages.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useRef } from 'react'
  2 | import { getImage } from '../../../services/pexelAPI'
  3 | import ImageDropZone from './ImageDropZone'
  4 | import PropType from 'prop-types'
  5 | 
  6 | const WordFormImages = ({
  7 |   formData,
  8 |   setFormData,
  9 |   handleDelete,
 10 |   setMessage
 11 | }) => {
 12 |   const [images, setImages] = useState(formData.images)
 13 |   const [searchValue, setSearchValue] = useState(formData.word)
 14 |   const [showImageResults, setShowImageResults] = useState(false)
 15 |   const [isLoading, setIsLoading] = useState(false)
 16 |   const [error, setError] = useState(null)
 17 | 
 18 |   const isSearchClicked = useRef(false)
 19 | 
 20 |   const handleSearch = async (e) => {
 21 |     isSearchClicked.current = true
 22 |     setShowImageResults(true)
 23 |     if (searchValue !== '') {
 24 |       setIsLoading(true)
 25 |       try {
 26 |         const newImages = await getImage(searchValue, 10)
 27 |         setImages(newImages)
 28 |       } catch (error) {
 29 |         setError(error)
 30 |       } finally {
 31 |         setIsLoading(false)
 32 |       }
 33 |     }
 34 |   }
 35 | 
 36 |   const handleAdd = (e, index) => {
 37 |     if (formData.images.length >= 3) {
 38 |       alert('Only 3 images allowed')
 39 |       return
 40 |     }
 41 |     const name = e.target.name
 42 |     setFormData((prevFormData) => {
 43 |       const newArr = [...prevFormData[name]]
 44 |       const imageObject = {
 45 |         src: images[index].src.medium,
 46 |         alt: images[index].alt,
 47 |         id: images[index].id
 48 |       }
 49 |       newArr.push(imageObject)
 50 |       return {
 51 |         ...prevFormData,
 52 |         [name]: newArr
 53 |       }
 54 |     })
 55 |     setMessage({ text: 'Image added!', type: 'success' })
 56 |   }
 57 | 
 58 |   const handleShow = (e) => {
 59 |     e.stopPropagation()
 60 |     setShowImageResults((prevShow) => !prevShow)
 61 |   }
 62 | 
 63 |   const handleChange = (e) => {
 64 |     e.stopPropagation()
 65 |     isSearchClicked.current = false
 66 |     setSearchValue(e.target.value)
 67 |     setImages([])
 68 |   }
 69 | 
 70 |   const infoTextStyleClassName = 'text-gray-500 text-sm'
 71 | 
 72 |   const imageElements = (() => {
 73 |     if (isLoading && searchValue !== '') {
 74 |       return <div className={infoTextStyleClassName}>Loading...</div>
 75 |     }
 76 |     if (searchValue === '') {
 77 |       return <div className={infoTextStyleClassName}>Enter a search term</div>
 78 |     }
 79 |     if (images.length > 0) {
 80 |       return images?.map((image, index) => (
 81 |         <div
 82 |           className='result-images flex flex-col justify-center'
 83 |           key={image.id}>
 84 |           <img
 85 |             className='w-30 h-40 md:w-40 object-cover rounded-t-lg'
 86 |             src={image.src.medium}
 87 |             alt={image.alt}
 88 |           />
 89 |           <button
 90 |             className='border-b-2 border-x-2 border-indigo-100 rounded-b-lg px-2 py-1 hover:bg-indigo-100'
 91 |             type='button'
 92 |             name='images'
 93 |             onClick={(e) => handleAdd(e, index)}>
 94 |             Add
 95 |           </button>
 96 |         </div>
 97 |       ))
 98 |     }
 99 | 
100 |     if (isSearchClicked.current) {
101 |       return <div className={infoTextStyleClassName}>No images found</div>
102 |     } else {
103 |       return <div className={infoTextStyleClassName}>Please click search</div>
104 |     }
105 |   })()
106 | 
107 |   return (
108 |     <div className='word-form--images flex flex-col gap-2'>
109 |       <div className='word-form--details-name font-bold'>Images</div>
110 |       <div className='flex flex-col gap-1'>
111 |         <p>Search for images:</p>
112 |         <div className='word-form--image-search flex items-center gap-2'>
113 |           <input
114 |             className='border-2 border-gray-200 rounded-full w-full px-2 py-1'
115 |             type='text'
116 |             value={searchValue}
117 |             onChange={handleChange}
118 |           />
119 |           <button
120 |             className='rounded-lg px-2 py-1 hover:bg-indigo-100'
121 |             type='button'
122 |             onClick={handleSearch}>
123 |             Search
124 |           </button>
125 |           <button
126 |             className='rounded-lg px-2 py-1 hover:bg-gray-100'
127 |             type='button'
128 |             onClick={handleShow}>
129 |             {showImageResults ? 'Hide' : 'Expand'}
130 |           </button>
131 |         </div>
132 |       </div>
133 |       {showImageResults && (
134 |         <div className='word-form--images-results border-2 rounded-lg flex flex-wrap max-h-[300px] overflow-auto gap-2 md:gap-4 px-3 md:px-6 py-4'>
135 |           {error ? <div>Error: {error.message}</div> : imageElements}
136 |         </div>
137 |       )}
138 |       <div>
139 |         <p className='flex flex-col gap-1'>Or import images here:</p>
140 |         <ImageDropZone
141 |           formData={formData}
142 |           setFormData={setFormData}
143 |           setMessage={setMessage}
144 |         />
145 |       </div>
146 | 
147 |       <div className='word-form--details-content'>
148 |         <p>Your images:</p>
149 |         <div className='flex justify-center lg:justify-start gap-2'>
150 |           {formData.images?.length > 0
151 |             ? (
152 |                 formData.images?.map((image, index) => (
153 |                   <div
154 |                     key={image.src + index}
155 |                     className='flex flex-col'>
156 |                     <img
157 |                       className='rounded-t-lg w-[150px] md:w-[200px] lg:w-[250px] object-cover'
158 |                       src={image.src}
159 |                       alt={image.alt}
160 |                     />
161 |                     <button
162 |                       type='button'
163 |                       className='delete w-full border-b-2 border-x-2 border-indigo-100 rounded-b-lg px-2 py-1 hover:bg-indigo-100'
164 |                       name='images'
165 |                       onClick={(e) => handleDelete(e, index)}>
166 |                       Delete
167 |                     </button>
168 |                   </div>
169 |                 ))
170 |               )
171 |             : (
172 |               <p className={infoTextStyleClassName}>No images added</p>
173 |               )}
174 |         </div>
175 |       </div>
176 |     </div>
177 |   )
178 | }
179 | 
180 | export default WordFormImages
181 | 
182 | WordFormImages.propTypes = {
183 |   formData: PropType.object.isRequired,
184 |   setFormData: PropType.func.isRequired,
185 |   handleDelete: PropType.func.isRequired,
186 |   setMessage: PropType.func.isRequired
187 | }
188 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/pages/Review/QuizQuestion.js:
--------------------------------------------------------------------------------
  1 | import { useParams, useNavigate } from 'react-router-dom'
  2 | import { useSelector, useDispatch } from 'react-redux'
  3 | import MCQuestion from '../../components/Features/Review/MCQuestion'
  4 | import { setWordArrayById as setQuizWordArrayById, setShowNotFinished as setQuizShowNotFinished } from '../../reducers/quizReducer'
  5 | import React, { useState, useEffect } from 'react'
  6 | import Button from '../../components/Common/Button'
  7 | import BlanksQuestion from '../../components/Features/Review/BlanksQuestion'
  8 | import { checkBlanksCorrect, hasBlank } from '../../utils/reviewHelper'
  9 | 
 10 | const QuizQuestion = () => {
 11 |   const { index } = useParams()
 12 |   const dispatch = useDispatch()
 13 |   const navigate = useNavigate()
 14 | 
 15 |   const [blanksAns, setBlanksAns] = useState([])
 16 |   const [chosen, setChosen] = useState('')
 17 |   const [checked, setChecked] = useState(false)
 18 |   const [correctWrongMessage, setCorrectWrongMessage] = useState(null)
 19 |   const [showCorrectSpelling, setShowCorrectSpelling] = useState(false)
 20 | 
 21 |   const { questionArray, wordArray } = useSelector((state) => state.quiz)
 22 |   const questionData = questionArray[index]
 23 |   // console.log('questionData', questionData)
 24 |   const questionType = questionData?.questionType.split('-')[0]
 25 | 
 26 |   // console.log('initWordArray', wordArray)
 27 | 
 28 |   useEffect(() => {
 29 |     if (!questionData || !questionType) {
 30 |       navigate('../..')
 31 |     } else if (questionType === 'blank') {
 32 |       const initialBlanksAns =
 33 |         questionType === 'blank'
 34 |           ? Array.from(
 35 |             { length: questionData?.correctAnswer.length },
 36 |             (_, index) => ''
 37 |           )
 38 |           : []
 39 |       setBlanksAns([
 40 |         questionData.correctAnswer[0],
 41 |         ...initialBlanksAns.slice(1)
 42 |       ])
 43 |     }
 44 |   }, [questionData, questionType, navigate])
 45 | 
 46 |   useEffect(() => {
 47 |     if (checked) {
 48 |       if (
 49 |         (questionType === 'mc' && chosen === questionData.correctAnswer) ||
 50 |         (questionType === 'blank' &&
 51 |           checkBlanksCorrect(blanksAns, questionData.correctAnswer))
 52 |       ) {
 53 |         setCorrectWrongMessage({ text: 'Correct:)', style: 'text-emerald-600' })
 54 |       } else {
 55 |         setCorrectWrongMessage({ text: 'Wrong:<', style: 'text-rose-600' })
 56 |       }
 57 |     }
 58 |   }, [chosen, checked, questionData?.correctAnswer, questionType, blanksAns])
 59 | 
 60 |   const handleCheckClick = () => {
 61 |     const wordData = wordArray.find((word) => word.id === questionData.id)
 62 |     // console.log('wordData before update', wordArray)
 63 |     if (questionType === 'mc') {
 64 |       if (!chosen) {
 65 |         alert('Please select an answer')
 66 |         return
 67 |       } else {
 68 |         const newPointsEarned = chosen === questionData.correctAnswer ? 1 : -1
 69 |         const updatedWordData = {
 70 |           ...wordData,
 71 |           pointsEarned: wordData.pointsEarned + newPointsEarned
 72 |         }
 73 |         console.log('correct? ', chosen === questionData.correctAnswer)
 74 |         console.log(
 75 |           'pointsEarned',
 76 |           wordData.word,
 77 |           wordData.pointsEarned + newPointsEarned
 78 |         )
 79 |         dispatch(
 80 |           setQuizWordArrayById({ id: wordData.id, word: updatedWordData })
 81 |         )
 82 |       }
 83 |     } else {
 84 |       if (hasBlank(blanksAns)) {
 85 |         alert('Please fill in all the blanks')
 86 |         return
 87 |       }
 88 |       const newPointsEarned = checkBlanksCorrect(
 89 |         blanksAns,
 90 |         questionData.correctAnswer
 91 |       )
 92 |         ? 2
 93 |         : -1
 94 |       setShowCorrectSpelling(true)
 95 |       const updatedWordData = {
 96 |         ...wordData,
 97 |         pointsEarned: wordData.pointsEarned + newPointsEarned
 98 |       }
 99 |       console.log(
100 |         'pointsEarned',
101 |         wordData.word,
102 |         wordData.pointsEarned + newPointsEarned
103 |       )
104 |       // console.log('updatedWordData', updatedWordData)
105 |       dispatch(setQuizWordArrayById({ id: wordData.id, word: updatedWordData }))
106 |     }
107 |     setChecked(true)
108 |   }
109 | 
110 |   const handleSelectClick = (e) => {
111 |     if (questionType === 'mc' && !checked) {
112 |       setChosen(e.target.name)
113 |     }
114 |   }
115 | 
116 |   const handleChange = (e) => {
117 |     const { name, value } = e.target
118 |     const index = name.split('-')[1]
119 |     setBlanksAns((prev) => {
120 |       const newAns = [...prev]
121 |       newAns[index] = value.toLowerCase()
122 |       console.log('blanks ans', newAns)
123 |       return newAns
124 |     })
125 |   }
126 | 
127 |   const handleNextClick = () => {
128 |     if (Number(index) < questionArray.length - 1 && checked) {
129 |       const newIndex = Number(index) + 1
130 |       setChecked(false)
131 |       setChosen('')
132 |       setCorrectWrongMessage('')
133 |       setShowCorrectSpelling(false)
134 |       navigate(`../${newIndex}`)
135 |     }
136 |   }
137 | 
138 |   const checkButton = (
139 |     <Button
140 |       bgColor='indigo'
141 |       size='md'
142 |       onClick={handleCheckClick}
143 |       className='mt-4 font-semibold'>
144 |       Check
145 |     </Button>
146 |   )
147 | 
148 |   const nextButton = (
149 |     <Button
150 |       bgColor='indigo'
151 |       size='md'
152 |       onClick={handleNextClick}
153 |       className='mt-4 font-semibold'>
154 |       Next
155 |     </Button>
156 |   )
157 | 
158 |   const resultButton = (
159 |     <Button
160 |       bgColor='indigo'
161 |       size='md'
162 |       onClick={() => navigate('../result')}
163 |       className='mt-4 font-semibold'>
164 |       See Result
165 |     </Button>
166 |   )
167 | 
168 |   const reviewButtonToShow = (() => {
169 |     if (checked && Number(index) === questionArray.length - 1) {
170 |       return resultButton
171 |     } else if (checked) {
172 |       return nextButton
173 |     } else {
174 |       return checkButton
175 |     }
176 |   })()
177 | 
178 |   return (
179 |     <div className='flex flex-col gap-2 items-center max-w-[750px] '>
180 |       <h2 className='text-lg text-center font-bold'>
181 |         Question {Number(index) + 1}
182 |       </h2>
183 |       {questionType === 'mc' && (
184 |         <MCQuestion
185 |           checked={checked}
186 |           chosen={chosen}
187 |           questionData={questionData}
188 |           handleSelect={handleSelectClick}
189 |         />
190 |       )}
191 |       {questionType === 'blank' && (
192 |         <BlanksQuestion
193 |           checked={checked}
194 |           blanksAns={blanksAns}
195 |           questionData={questionData}
196 |           handleChange={handleChange}
197 |           handleNext={handleNextClick}
198 |           handleCheck={handleCheckClick}
199 |         />
200 |       )}
201 |       {showCorrectSpelling && (
202 |         <div className='font-semibold text-sm text-gray-500'>
203 |           Answer: {questionData.correctAnswer}
204 |         </div>
205 |       )}
206 |       {correctWrongMessage && (
207 |         <div
208 |           className={`text-center text-md font-semibold
209 |       ${correctWrongMessage.style}`}>
210 |           {correctWrongMessage.text}
211 |         </div>
212 |       )}
213 |       <div className='flex gap-2 items-center justify-center'>
214 |         {index < questionArray.length - 1 && (
215 |           <Button
216 |             bgColor='gray'
217 |             size='md'
218 |             className='mt-4'
219 |             onClick={() => dispatch(setQuizShowNotFinished(true))}>
220 |             End Session
221 |           </Button>
222 |         )}
223 |         {reviewButtonToShow}
224 |       </div>
225 |     </div>
226 |   )
227 | }
228 | 
229 | export default QuizQuestion
230 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/pages/Review/Card.js:
--------------------------------------------------------------------------------
  1 | import { useParams, useNavigate } from 'react-router-dom'
  2 | import { useSelector, useDispatch } from 'react-redux'
  3 | import React, { useState, useEffect } from 'react'
  4 | import { GrPrevious, GrNext } from 'react-icons/gr'
  5 | import {
  6 |   setShowNotFinished as setFlashcardsShowNotFinished,
  7 |   setWordArrayByIndex as setFlashcardsWordArrayByIndex
  8 | } from '../../reducers/flashcardsReducer'
  9 | import Button from '../../components/Common/Button'
 10 | 
 11 | const Card = () => {
 12 |   const navigate = useNavigate()
 13 |   const { index } = useParams()
 14 |   const idx = Number(index)
 15 |   const { mode, wordArray } = useSelector((state) => state.flashcards)
 16 |   const [face, setFace] = useState('front')
 17 |   const dispatch = useDispatch()
 18 | 
 19 |   useEffect(() => {
 20 |     if (idx < 0 || idx > wordArray.length - 1 || !wordArray[idx]) {
 21 |       navigate('../..')
 22 |     }
 23 |   }, [idx, wordArray, navigate])
 24 | 
 25 |   const wordData = wordArray[idx]
 26 | 
 27 |   if (!wordData) {
 28 |     return null
 29 |   }
 30 | 
 31 |   const familiarityButtons = [
 32 |     { name: 'notFamiliar', text: 'Not familiar', score: -1, color: 'red' },
 33 |     {
 34 |       name: 'somewhatFamiliar',
 35 |       text: 'Somewhat familiar',
 36 |       score: 1,
 37 |       color: 'yellow'
 38 |     },
 39 |     { name: 'veryFamiliar', text: 'Very Familiar', score: 2, color: 'green' }
 40 |   ]
 41 | 
 42 |   const selectedFamiliarity =
 43 |     familiarityButtons.find(
 44 |       (familiarity) => familiarity.score === wordData.pointsEarned
 45 |     )?.name || null
 46 | 
 47 |   const color = (() => {
 48 |     if (idx === 0 || idx % 3 === 0) {
 49 |       return 'bg-rose-50'
 50 |     } else if (idx % 2 === 0) {
 51 |       return 'bg-amber-50'
 52 |     } else {
 53 |       return 'bg-sky-50'
 54 |     }
 55 |   })()
 56 | 
 57 |   const front = (() => {
 58 |     const cardFront = wordArray[idx].front
 59 |     if (cardFront.type === 'word') {
 60 |       return (
 61 |         <div>
 62 |           <h2 className='text-2xl text-indigo-800 font-bold'>
 63 |             {wordArray[idx].front.word}
 64 |           </h2>
 65 |           <p className='mt-2 text-sm text-gray-600'>Guess its meaning</p>
 66 |         </div>
 67 |       )
 68 |     } else if (cardFront.type === 'definitionWithImages') {
 69 |       const definition = wordArray[idx].front.definition
 70 |       const image = wordArray[idx].front.image
 71 |       if (image) {
 72 |         return (
 73 |           <div className='flex flex-col items-center gap-5'>
 74 |             <img
 75 |               src={image.src}
 76 |               alt={image.alt}
 77 |               className='h-40 w-40 object-cover rounded-lg shadow-md'
 78 |             />
 79 |             <p className='text-bold'>{definition}</p>
 80 |             <p className='mt-2 text-sm text-gray-600'>Guess the word</p>
 81 |           </div>
 82 |         )
 83 |       } else {
 84 |         return (
 85 |           <div className='flex flex-col items-center'>
 86 |             <p className='font-semibold'>{definition}</p>
 87 |             <p className='mt-2 text-sm text-gray-600'>Guess the word</p>
 88 |           </div>
 89 |         )
 90 |       }
 91 |     }
 92 |   })()
 93 | 
 94 |   const back = <div>{wordArray[idx].back}</div>
 95 | 
 96 |   const handleCardClick = (e) => {
 97 |     e.stopPropagation()
 98 |     setFace(face === 'front' ? 'back' : 'front')
 99 |   }
100 | 
101 |   const handlePreviousClick = () => {
102 |     if (Number(idx) > 0) {
103 |       const newIndex = Number(idx) - 1
104 |       navigate(`../${newIndex}`)
105 |       setFace('front')
106 |     }
107 |   }
108 | 
109 |   const handleNextClick = () => {
110 |     if (Number(idx) < wordArray.length - 1) {
111 |       const newIndex = Number(idx) + 1
112 |       navigate(`../${newIndex}`)
113 |       setFace('front')
114 |     }
115 |   }
116 | 
117 |   const handleFamiliarityClick = (e) => {
118 |     if (e.target.name !== selectedFamiliarity) {
119 |       const newScore = familiarityButtons.find(
120 |         (familiarity) => familiarity.name === e.target.name
121 |       ).score
122 |       const updatedWordData = {
123 |         ...wordData,
124 |         pointsEarned: newScore
125 |       }
126 |       dispatch(
127 |         setFlashcardsWordArrayByIndex({ index: idx, word: updatedWordData })
128 |       )
129 |     }
130 |   }
131 | 
132 |   const getButtonClassNames = (familiarity, isSelected) => {
133 |     const bgClass = isSelected
134 |       ? familiarity.color === 'red'
135 |         ? 'bg-red-200 border-red-200'
136 |         : familiarity.color === 'yellow'
137 |           ? 'bg-yellow-200 border-yellow-200'
138 |           : familiarity.color === 'green'
139 |             ? 'bg-green-200 border-green-200'
140 |             : ''
141 |       : ''
142 | 
143 |     const borderClass =
144 |       familiarity.color === 'red'
145 |         ? 'border-red-200 hover:bg-red-200'
146 |         : familiarity.color === 'yellow'
147 |           ? 'border-yellow-200 hover:bg-yellow-200'
148 |           : familiarity.color === 'green'
149 |             ? 'border-green-200 hover:bg-green-200'
150 |             : ''
151 | 
152 |     return `font-semibold px-4 py-2 rounded-full cursor-pointer border-2 select-none ${borderClass} ${bgClass}`
153 |   }
154 | 
155 |   const handleFinish = () => {
156 |     const notFinished = wordArray.some((word) => !word.pointsEarned)
157 |     dispatch(setFlashcardsShowNotFinished(notFinished))
158 |     if (!notFinished) {
159 |       navigate('../result')
160 |     }
161 |   }
162 | 
163 |   return (
164 |     <>
165 |       <div className='text-center'>Mode: {mode.text}</div>
166 |       <div className='flex flex-col items-center gap-3'>
167 |         <div className='card-control w-full flex justify-center items-center flex-grow gap-2'>
168 |           <button
169 |             onClick={handlePreviousClick}
170 |             className={Number(idx) <= 0 ? 'cursor-auto opacity-20' : ''}>
171 |             <GrPrevious
172 |               size={25}
173 |               color='#808080'
174 |             />
175 |           </button>
176 |           <div
177 |             className={`card select-none text-center flex flex-col justify-center items-center gap-5 min-w-[250px] sm:min-w-[450px] min-h-[250px] sm:min-h-[350px] px-5 pt-5 pb-3 ${color} shadow-md rounded-lg hover:shadow-lg cursor-pointer`}
178 |             onClick={handleCardClick}>
179 |             <div className='h-full text-xl flex justify-center items-center'>
180 |               {face === 'front' ? front : back}
181 |             </div>
182 |             <div className='font-light text-sm text-gray-400'>{face}</div>
183 |           </div>
184 | 
185 |           <button
186 |             onClick={handleNextClick}
187 |             className={
188 |               Number(idx) >= wordArray.length - 1
189 |                 ? 'cursor-auto opacity-20'
190 |                 : ''
191 |             }>
192 |             <GrNext
193 |               size={25}
194 |               color='#808080'
195 |             />
196 |           </button>
197 |         </div>
198 |         <div>
199 |           {Number(idx) + 1} / {wordArray.length}
200 |         </div>
201 |       </div>
202 |       <div className='text-center flex flex-col gap-3 items-center'>
203 |         <p className='font-semibold'>
204 |           Please rate your familiarity with this word:
205 |         </p>
206 |         <div className='flex flex-col gap-3 sm:flex-row '>
207 |           {familiarityButtons.map((familiarity) => (
208 |             <button
209 |               key={familiarity.name}
210 |               name={familiarity.name}
211 |               onClick={handleFamiliarityClick}
212 |               className={getButtonClassNames(
213 |                 familiarity,
214 |                 familiarity.name === selectedFamiliarity
215 |               )}>
216 |               {familiarity.text}
217 |             </button>
218 |           ))}
219 |         </div>
220 |         <Button
221 |           bgColor='indigo'
222 |           size='lg'
223 |           className='mt-4 font-semibold'
224 |           onClick={handleFinish}>
225 |           Finish Review
226 |         </Button>
227 |       </div>
228 |     </>
229 |   )
230 | }
231 | 
232 | export default Card
233 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vocabulary Builder
  2 | 
  3 | ## Table of Contents
  4 | 
  5 | - [Overview](#overview)
  6 |   - [Description](#description)
  7 |   - [Motivation](#motivation)
  8 |   - [Problem Statement](#problem-statement)
  9 |   - [Video Demo](#video-demo)
 10 |   - [Mobile Demo](#mobile-demo)
 11 |   - [Live Demo](#live-demo)
 12 | - [Getting Started](#getting-started)
 13 |   - [Built with](#built-with)
 14 |   - [Dependencies](#dependencies)
 15 | - [Features](#features)
 16 |   - [Key Features](#key-features)
 17 |   - [Future Features](#future-features)
 18 | - [API](#api)
 19 | - [License](#license)
 20 | 
 21 | ## Overview
 22 | 
 23 | ### Description
 24 | 
 25 | This is a Vocabulary Builder app that is built with React, Tailwind CSS, and HTML. It is designed to enhance user vocabulary in a seamless and engaging way. This app is built as a personal project to practice React and Tailwind CSS. It is currently a front-end only app using local storage to store the data but will be updated to a full-stack app that use MongoDB in the future.
 26 | 
 27 | ### Motivation
 28 | 
 29 | The inspiration behind this project came from my own experiences as someone whose first language is not English and also my husband, who is currently learning English. We both experienced the difficulty in expanding our English vocabulary due to the lack of engaging and customizable tools available. Hence, I felt compelled to create an vocabulary app that offers a built-in dictionary but also grants user the ability to customize their learning journey.
 30 | 
 31 | ### Problem Statement
 32 | 
 33 | Existing vocabulary-building tools often follow a rigid, one-size-fits-all approach, offering a predefined list of words that may not suit learners of various proficiency levels. Additionally, these tools typically lack dynamic features for customization, particularly the ability for users to associate images with words. This feature is especially valuable for individuals with dyslexia, for whom visual aids play a crucial role in learning.
 34 | 
 35 | Furthermore, conventional tools struggle to deliver engaging learning experiences like flashcards or quizzes tailored to vocabulary acquisition. While there are plenty of flashcard apps available, they often lack a dedicated built-in dictionary for seamless learning.
 36 | 
 37 | ### Video Demo
 38 | 
 39 | https://github.com/TiffanyChan614/Vocabulary-Builder/assets/68774129/e029515f-b6e4-48aa-a5c2-5ad8f9eed987
 40 | 
 41 | ### Mobile Demo
 42 | 
 43 | <img width="307" alt="home" src="https://github.com/TiffanyChan614/Vocabulary-Builder/assets/68774129/74efd71c-5622-445e-87b2-77beafbda129">
 44 | <img width="312" alt="search" src="https://github.com/TiffanyChan614/Vocabulary-Builder/assets/68774129/836cff49-fd2d-4338-8aad-b18d334a2b26">
 45 | <img width="310" alt="journal" src="https://github.com/TiffanyChan614/Vocabulary-Builder/assets/68774129/448c9da0-378b-4953-bdb0-eb30fc8c12ac">
 46 | <img width="311" alt="flashcards" src="https://github.com/TiffanyChan614/Vocabulary-Builder/assets/68774129/0e797a7d-3549-41e6-a556-1d9faaba35af">
 47 | <img width="312" alt="quiz" src="https://github.com/TiffanyChan614/Vocabulary-Builder/assets/68774129/19243ce3-79b5-41b8-87d6-4f284224454d">
 48 | 
 49 | ### Live Demo
 50 | 
 51 | Since this app is using the freemium plan of WordsAPI, the number of requests per day is limited. If you are interested in this app, please email me at tiffanychan1999614@gmail.com to get the live demo link.
 52 | 
 53 | ## Getting Started
 54 | 
 55 | ### Built with
 56 | 
 57 | - HTML 5
 58 | - React JS
 59 | - Figma
 60 | - Tailwind CSS
 61 | - React Router
 62 | - Redux
 63 | - REST API
 64 | - create-react-app
 65 | 
 66 | ### Run Locally
 67 | 
 68 | Clone the project
 69 | 
 70 | ```bash
 71 |   git clone https://github.com/TiffanyChan614/Vocabulary-Builder.git
 72 | ```
 73 | 
 74 | Go to the project directory
 75 | 
 76 | ```bash
 77 |   cd Vocabulary-Builder/vocabularybuilder
 78 | ```
 79 | 
 80 | Install dependencies
 81 | 
 82 | ```bash
 83 |   npm install
 84 | ```
 85 | 
 86 | Start the server
 87 | 
 88 | ```bash
 89 |   npm run start
 90 | ```
 91 | 
 92 | ### Dependencies
 93 | 
 94 | This project depends on the following packages:
 95 | 
 96 | - `classnames` (version ^2.3.2): A JavaScript utility for conditionally joining classNames together.
 97 | - `he` (version ^1.2.0): A robust HTML entity encoder/decoder.
 98 | - `react` (version ^18.2.0): A JavaScript library for building user interfaces.
 99 | - `react-dom` (version ^18.2.0): A package for working with the DOM in React applications.
100 | 
101 | ### Development Dependencies
102 | 
103 | This project also has the following development dependencies:
104 | 
105 | - `@types/react` (version ^18.0.37): TypeScript definitions for the React library.
106 | - `@types/react-dom` (version ^18.0.11): TypeScript definitions for the react-dom package.
107 | - `@vitejs/plugin-react` (version ^4.0.0): A Vite plugin for React development.
108 | - `eslint` (version ^8.38.0): A tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
109 | - `eslint-plugin-react` (version ^7.32.2): An ESLint plugin for React-specific linting rules.
110 | - `eslint-plugin-react-hooks` (version ^4.6.0): An ESLint plugin for enforcing rules of Hooks in React applications.
111 | - `eslint-plugin-react-refresh` (version ^0.3.4): An ESLint plugin for react-refresh.
112 | - `vite` (version ^4.4.2): A frontend tooling platform that provides faster and leaner development for modern web projects.
113 | 
114 | ## Features
115 | 
116 | ### Key Features
117 | 
118 | - **Built-in Dictionary**: Users can search for words directly within the application, providing quick access to definitions and information.
119 | 
120 | - **Dynamic Word Form**: Customize word information and add it to a personal journal for future review. This feature enables users to tailor the content to their learning preferences.
121 | 
122 | - **Image API Integration**: Utilizes a built-in image API to retrieve related images for visual association with words. Users can also upload their own images to associate with specific words.
123 | 
124 | - **Voice Pronunciation**: Provides voice pronunciation for words, allowing users to learn the correct pronunciation.
125 | 
126 | - **Word of the Day**: Displays a new word each day, allowing users to learn new words every day.
127 | 
128 | - **Part of Speech Filters**: Filter words based on their part of speech, allowing users to focus on specific categories for targeted learning.
129 | 
130 | - **Show Details**: Users can choose to show or hide word details, providing a clean and simple interface for learning.
131 | 
132 | - **Sort Journal Words**: Users have the ability to sort their journal words, providing an organized and efficient way to review and manage their vocabulary.
133 | 
134 | - **Persistent Filter, Show Details and Sort Settings**: Filter, show details, and sort settings persist across pages, ensuring that user preferences are maintained throughout their learning journey.
135 | 
136 | - **Review Modes**:
137 | 
138 |   - **Flashcards**: Engage in a flashcard-based review mode for efficient and effective learning.
139 |   - **Quiz Mode**: Test your knowledge with a dynamic quiz mode that includes various question types.
140 | 
141 | - **Smart Review Algorithm**: Utilizes an algorithm that intelligently selects words for review. It prioritizes words with the lowest scores (indicating greater difficulty) and those with the earliest review dates.
142 | 
143 | - **Diverse Question Types**: Offers a variety of question types to keep the review process engaging and effective, including multiple choice that asks about the definition, synonym, antonym of a word, and fill-in-the-blank questions that show either the definition or one of the images associated with the word and user has to type in the word.
144 | 
145 | - **Fully Responsive**: The app is fully responsive and can be used on mobile devices.
146 | 
147 | ### Future Features
148 | 
149 | - **User Authentication**: Users can create an account and log in to access their data from any device.
150 | - **MongoDB Integration**: Store user data in a database to allow for data persistence across devices.
151 | - **User Profile**: Users can view their profile and see their progress.
152 | - **Performance Tracking**: Users can view their performance and progress over time.
153 | 
154 | ## API
155 | 
156 | - [WordsAPI](https://www.wordsapi.com/)
157 | - [pexels](https://www.pexels.com/api/)
158 | - Browser Speech Synthesis API
159 | 
160 | ## License
161 | 
162 | [MIT](https://choosealicense.com/licenses/mit/)
163 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/pages/Journal.js:
--------------------------------------------------------------------------------
  1 | import React, { useEffect } from 'react'
  2 | import { Link } from 'react-router-dom'
  3 | import Word from '../components/Features/Word/Word'
  4 | import SearchField from '../components/Common/SearchField'
  5 | import Filter from '../components/Common/Filter'
  6 | import WordForm from '../components/Features/WordForm/WordForm'
  7 | import { useSelector, useDispatch } from 'react-redux'
  8 | import {
  9 |   setWords as setJournalWords,
 10 |   setSearchValue as setJournalSearchValue,
 11 |   setSortValue as setJournalSortValue,
 12 |   setShowAllDetails as setJournalShowAllDetails,
 13 |   setGoToTopButton as toggleJournalShowGoToTopButton,
 14 |   setFilterOpen as setJournalFilterOpen
 15 | } from '../reducers/journalReducer'
 16 | import {
 17 |   setSearchValue as setSearchSearchValue,
 18 |   setCurrentPage as setsSearchCurrentPage
 19 | } from '../reducers/searchReducer'
 20 | import { IoIosArrowUp } from 'react-icons/io'
 21 | import useIsMobile from '../hooks/useIsMobile'
 22 | 
 23 | const Journal = () => {
 24 |   const dispatch = useDispatch()
 25 |   const {
 26 |     words,
 27 |     searchValue,
 28 |     sortValue,
 29 |     partOfSpeechFilter,
 30 |     showForm,
 31 |     showAllDetails,
 32 |     showGoToTopButton,
 33 |     filterOpen
 34 |   } = useSelector((state) => state.journal)
 35 | 
 36 |   // console.log('showAllDetails', showAllDetails)
 37 |   // console.log('sortValue', sortValue)
 38 |   const { isMobile } = useIsMobile(1070)
 39 | 
 40 |   const sortOptions = {
 41 |     updated: (a, b) => b.lastUpdated.localeCompare(a.lastUpdated),
 42 |     created: (a, b) => b.created.localeCompare(a.created),
 43 |     alphabetical: (a, b) => a.word.localeCompare(b.word),
 44 |     length: (a, b) => a.word.length - b.word.length,
 45 |     partOfSpeech: (a, b) => a.partOfSpeech.localeCompare(b.partOfSpeech),
 46 |     pointsAsc: (a, b) => a.points - b.points,
 47 |     pointsDesc: (a, b) => b.points - a.points
 48 |   }
 49 | 
 50 |   useEffect(() => {
 51 |     try {
 52 |       dispatch(setJournalWords(JSON.parse(localStorage.getItem('journal'))))
 53 |     } catch {
 54 |       dispatch(setJournalWords([]))
 55 |     }
 56 |   }, [dispatch])
 57 | 
 58 |   useEffect(() => {
 59 |     if (window.scrollY > 100) {
 60 |       dispatch(toggleJournalShowGoToTopButton(true))
 61 |     } else {
 62 |       dispatch(toggleJournalShowGoToTopButton(false))
 63 |     }
 64 |     const handleScroll = () => {
 65 |       if (window.scrollY > 100) {
 66 |         dispatch(toggleJournalShowGoToTopButton(true))
 67 |       } else {
 68 |         dispatch(toggleJournalShowGoToTopButton(false))
 69 |       }
 70 |     }
 71 |     window.addEventListener('scroll', handleScroll)
 72 |     return () => {
 73 |       window.removeEventListener('scroll', handleScroll)
 74 |     }
 75 |   }, [dispatch])
 76 | 
 77 |   const getFilteredAndSortedWords = () => {
 78 |     if (!words) {
 79 |       return []
 80 |     }
 81 |     let filteredAndSortedWords = [...words]
 82 |     if (searchValue !== '') {
 83 |       filteredAndSortedWords = filteredAndSortedWords
 84 |         .filter((word) =>
 85 |           word.word.toLowerCase().includes(searchValue.toLowerCase())
 86 |         )
 87 |         .sort(sortOptions[sortValue])
 88 |     } else {
 89 |       filteredAndSortedWords = filteredAndSortedWords.sort(
 90 |         sortOptions[sortValue]
 91 |       )
 92 |     }
 93 | 
 94 |     if (partOfSpeechFilter) {
 95 |       if (partOfSpeechFilter === 'other') {
 96 |         filteredAndSortedWords = filteredAndSortedWords.filter(
 97 |           (word) =>
 98 |             word.partOfSpeech !== 'noun' &&
 99 |             word.partOfSpeech !== 'verb' &&
100 |             word.partOfSpeech !== 'adjective' &&
101 |             word.partOfSpeech !== 'adverb'
102 |         )
103 |       } else {
104 |         filteredAndSortedWords = filteredAndSortedWords.filter(
105 |           (word) => word.partOfSpeech === partOfSpeechFilter
106 |         )
107 |       }
108 |     }
109 | 
110 |     return filteredAndSortedWords
111 |   }
112 | 
113 |   const clearSearchValue = () => {
114 |     dispatch(setJournalSearchValue(''))
115 |   }
116 | 
117 |   const handleDetailsClick = (e) => {
118 |     e.preventDefault()
119 |     e.stopPropagation()
120 |     dispatch(setJournalShowAllDetails(!showAllDetails))
121 |   }
122 | 
123 |   const displayedWords = getFilteredAndSortedWords()
124 | 
125 |   const NoWordsFoundMessage = () => (
126 |     <div className='flex flex-col pt-5 items-center justify-center'>
127 |       <h3 className='font-bold text-lg mb-2'>No words found</h3>
128 |       <p className='text-md text-gray-600 mb-4 text-center'>
129 |         Seems like there are no matching words. Why not&nbsp;
130 |         <Link
131 |           className='text-indigo-800 hover:underline'
132 |           to='../search'
133 |           onClick={() => {
134 |             dispatch(setSearchSearchValue(''))
135 |             dispatch(setsSearchCurrentPage('search'))
136 |           }}>
137 |           explore new words
138 |         </Link>
139 |         &nbsp;or try other filters?
140 |       </p>
141 |     </div>
142 |   )
143 | 
144 |   return (
145 |     <>
146 |       <div className='journal flex flex-col gap-4 w-full'>
147 |         <div className='journal--search'>
148 |           <SearchField
149 |             searchValue={searchValue}
150 |             clearSearchValue={clearSearchValue}
151 |             placeholder='Search journal'
152 |             handleInputChange={(e) =>
153 |               dispatch(setJournalSearchValue(e.target.value))
154 |             }
155 |           />
156 |         </div>
157 |         <div className='journal--control flex flex-row justify-between gap-2'>
158 |           {isMobile
159 |             ? (
160 |               <button
161 |                 className={`text-sm text-gray-700 font-semibold border-2 border-indigo-100 hover:text-indigo-800 hover:bg-indigo-100 py-1 px-3 rounded-lg
162 |                   ${filterOpen ? 'bg-indigo-100' : ''}
163 |                   `}
164 |                 onClick={() => dispatch(setJournalFilterOpen(!filterOpen))}>
165 |                 {filterOpen ? 'Hide' : 'Show'} filter
166 |             </button>
167 |               )
168 |             : (
169 |               <Filter page='journal' />
170 |               )}
171 |           <div className='flex justify-between gap-2'>
172 |             <button
173 |               onClick={handleDetailsClick}
174 |               className='py-1 px-3 border-2 border-indigo-100 rounded-lg text-sm font-semibold hover:bg-indigo-100 hover:text-indigo-800'>
175 |               {showAllDetails ? 'Hide all details' : 'Show all details'}
176 |             </button>
177 |             <select
178 |               className='journal--sort border-indigo-100 border-2 rounded-lg py-1 px-3 text-sm font-semibold'
179 |               onChange={(e) => dispatch(setJournalSortValue(e.target.value))}
180 |               value={sortValue}>
181 |               <option disabled>Sort by</option>
182 |               <option value='updated'>Recently updated</option>
183 |               <option value='pointsAsc'>Points - Low to High</option>
184 |               <option value='pointsDesc'>Points - High to Low</option>
185 |               <option value='alphabetical'>Alphabetical</option>
186 |               <option value='length'>Length</option>
187 |               <option value='partOfSpeech'>Part of speech</option>
188 |               <option value='created'>Recently created</option>
189 |             </select>
190 |           </div>
191 |         </div>
192 |         {filterOpen && isMobile && (
193 |           <div>
194 |             <Filter page='journal' />
195 |           </div>
196 |         )}
197 |         <div className='journal--words flex flex-col gap-3'>
198 |           {displayedWords?.length > 0
199 |             ? (
200 |                 displayedWords.map((word) => (
201 |                   <Word
202 |                     key={word.id}
203 |                     wordData={word}
204 |                     page='journal'
205 |                   />
206 |                 ))
207 |               )
208 |             : (
209 |               <NoWordsFoundMessage />
210 |               )}
211 |         </div>
212 |       </div>
213 |       {showForm && <WordForm page='journal' />}
214 |       {showGoToTopButton && (
215 |         <button
216 |           className='fixed bottom-4 right-4 bg-indigo-100 p-2 rounded-full hover:bg-indigo-200 outline-none shadow-md'
217 |           onClick={() => window.scrollTo({ top: 0, behavior: 'auto' })}>
218 |           <IoIosArrowUp size={25} />
219 |         </button>
220 |       )}
221 |     </>
222 |   )
223 | }
224 | 
225 | export default Journal
226 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/components/Features/WordForm/WordForm.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react'
  2 | import { useNavigate } from 'react-router-dom'
  3 | import TextArea from '../../Common/TextArea'
  4 | import WordFormImages from './WordFormImages'
  5 | import { v4 as uuidv4 } from 'uuid'
  6 | import { useDispatch, useSelector } from 'react-redux'
  7 | import {
  8 |   setPartOfSpeechFilter as setJournalPartOfSpeechFilter,
  9 |   setShowForm as setJournalShowForm,
 10 |   setWords as setJournalWords,
 11 |   setSortValue as setJournalSortValue
 12 | } from '../../../reducers/journalReducer'
 13 | import { setShowForm as setSearchShowForm } from '../../../reducers/searchReducer'
 14 | import WordFormField from './WordFormField'
 15 | import Overlay from '../../Common/Overlay'
 16 | import WordFormHeader from './WordFormHeader'
 17 | import Button from '../../Common/Button'
 18 | import PropType from 'prop-types'
 19 | 
 20 | const WordForm = ({ page }) => {
 21 |   const dispatch = useDispatch()
 22 |   const navigate = useNavigate()
 23 | 
 24 |   const [message, setMessage] = useState({ text: '', type: '' })
 25 | 
 26 |   useEffect(() => {
 27 |     const timer = setTimeout(() => {
 28 |       if (message.text !== '') {
 29 |         setMessage({ text: '', type: '' })
 30 |       }
 31 |     }, 2000)
 32 | 
 33 |     return () => clearTimeout(timer)
 34 |   }, [message])
 35 | 
 36 |   const formWord = useSelector((state) => {
 37 |     if (page === 'search') {
 38 |       return state.search.formWord
 39 |     } else if (page === 'journal') {
 40 |       return state.journal.formWord
 41 |     }
 42 |   })
 43 | 
 44 |   const now = new Date().toISOString()
 45 | 
 46 |   const [formData, setFormData] = useState({
 47 |     id: formWord.id || uuidv4(),
 48 |     word: formWord.word,
 49 |     pronunciation: formWord.pronunciation || '',
 50 |     partOfSpeech: formWord.partOfSpeech,
 51 |     definition:
 52 |       formWord.definition?.[0].toUpperCase() + formWord.definition?.slice(1) ||
 53 |       'No definition found',
 54 |     synonyms: formWord.synonyms || [],
 55 |     antonyms: formWord.antonyms || [],
 56 |     examples: formWord.examples || [],
 57 |     images: formWord.images || [],
 58 |     lastUpdated: now,
 59 |     created: page === 'search' ? now : formWord.created,
 60 |     points: formWord.points || 0,
 61 |     lastReviewed: formWord.lastReviewed || null
 62 |   })
 63 | 
 64 |   console.log('formWord in WordForm', formWord)
 65 | 
 66 |   const toggleShowForm = (show) => {
 67 |     if (page === 'search') {
 68 |       dispatch(setSearchShowForm(show))
 69 |     } else if (page === 'journal') {
 70 |       dispatch(setJournalShowForm(show))
 71 |     }
 72 |   }
 73 | 
 74 |   console.log('formData', formData)
 75 | 
 76 |   const handleChange = (e, index) => {
 77 |     const { name, value } = e.target
 78 |     setFormData((prevFormData) => {
 79 |       if (Array.isArray(prevFormData[name])) {
 80 |         const newArr = [...prevFormData[name]]
 81 |         newArr[index] = value
 82 |         return {
 83 |           ...prevFormData,
 84 |           [name]: newArr
 85 |         }
 86 |       } else {
 87 |         return {
 88 |           ...prevFormData,
 89 |           [name]: value
 90 |         }
 91 |       }
 92 |     })
 93 |   }
 94 | 
 95 |   const handleDelete = (e, index) => {
 96 |     console.log('e.target', e.target)
 97 |     const name = e.target.name
 98 |     console.log('name', name, 'index', index)
 99 |     setFormData((prevFormData) => {
100 |       const newArr = [...prevFormData[name]]
101 |       newArr.splice(index, 1)
102 |       return {
103 |         ...prevFormData,
104 |         [name]: newArr
105 |       }
106 |     })
107 |     setMessage({ text: 'Image deleted!', type: 'success' })
108 |   }
109 | 
110 |   const handleAdd = (e) => {
111 |     console.log('e.target', e.target)
112 |     const name = e.target.name
113 |     console.log('handleAdd name', name)
114 |     setFormData((prevFormData) => {
115 |       return {
116 |         ...prevFormData,
117 |         [name]: [...prevFormData[name], '']
118 |       }
119 |     })
120 |   }
121 | 
122 |   const getFilteredFormData = () => {
123 |     console.log('formData', formData)
124 | 
125 |     return Object.keys(formData).reduce((acc, key) => {
126 |       if (Array.isArray(formData[key]) && formData[key].length > 0) {
127 |         acc[key] = formData[key].filter((item) => item !== '')
128 |       } else if (
129 |         !Array.isArray(formData[key]) &&
130 |         formData[key] !== '' &&
131 |         key !== 'definition'
132 |       ) {
133 |         acc[key] = formData[key]
134 |       } else if (key === 'definition' && formData[key] !== '') {
135 |         acc[key] = formData[key]
136 |       } else if (Array.isArray(formData[key])) {
137 |         acc[key] = []
138 |       } else if (key === 'definition' && formData[key] === '') {
139 |         acc[key] = 'No definition found'
140 |       }
141 |       return acc
142 |     }, {})
143 |   }
144 | 
145 |   const getJournalData = () => {
146 |     let journalData
147 |     try {
148 |       journalData = JSON.parse(localStorage.getItem('journal')) || []
149 |     } catch {
150 |       journalData = []
151 |     }
152 |     return journalData
153 |   }
154 | 
155 |   const handleSubmit = (e) => {
156 |     e.preventDefault()
157 | 
158 |     const filteredFormData = getFilteredFormData()
159 |     console.log('filteredFormData', filteredFormData)
160 | 
161 |     const journalData = getJournalData()
162 |     console.log('journalData', journalData)
163 | 
164 |     if (page === 'search') {
165 |       const wordExisted = journalData.some(
166 |         (data) =>
167 |           data.word === filteredFormData.word &&
168 |           data.definition === filteredFormData.definition
169 |       )
170 |       if (wordExisted) {
171 |         window.alert('Word already exists in journal')
172 |       } else {
173 |         journalData.push({ ...filteredFormData })
174 |         localStorage.setItem('journal', JSON.stringify(journalData))
175 |         navigate('../../journal')
176 |         dispatch(setJournalPartOfSpeechFilter(''))
177 |         dispatch(setJournalSortValue('updated'))
178 |       }
179 |     } else if (page === 'journal' && setJournalWords) {
180 |       const updatedJournalData = journalData.map((word) => {
181 |         if (word.id === filteredFormData.id) {
182 |           return filteredFormData
183 |         }
184 |         return word
185 |       })
186 |       localStorage.setItem('journal', JSON.stringify(updatedJournalData))
187 |       console.log('updatedJournalData', updatedJournalData)
188 |       dispatch(setJournalWords(updatedJournalData))
189 |     }
190 | 
191 |     toggleShowForm(false)
192 |   }
193 | 
194 |   const {
195 |     word,
196 |     pronunciation,
197 |     partOfSpeech,
198 |     definition,
199 |     synonyms,
200 |     antonyms,
201 |     examples
202 |   } = formData
203 | 
204 |   const fieldList = [
205 |     {
206 |       name: 'synonyms',
207 |       data: synonyms
208 |     },
209 |     {
210 |       name: 'antonyms',
211 |       data: antonyms
212 |     },
213 |     {
214 |       name: 'examples',
215 |       data: examples
216 |     }
217 |   ]
218 | 
219 |   return (
220 |     <>
221 |       <Overlay>
222 |         <div className='word-form bg-white w-full md:w-2/3 rounded-xl overflow-hidden'>
223 |           <form onSubmit={handleSubmit}>
224 |             <WordFormHeader
225 |               word={word}
226 |               pronunciation={pronunciation}
227 |               partOfSpeech={partOfSpeech}
228 |               message={message}
229 |             />
230 |             <div className='py-4 px-3 md:px-6 flex flex-col gap-3 overflow-y-auto max-h-[60vh]'>
231 |               <div className='word-form--definition flex flex-col gap-2'>
232 |                 <label
233 |                   htmlFor='definition'
234 |                   className='font-bold'>
235 |                   Definition
236 |                 </label>
237 |                 <TextArea
238 |                   className='border-2'
239 |                   id='definition'
240 |                   name='definition'
241 |                   value={definition}
242 |                   onBlur={(e) => handleChange(e)}
243 |                   height='h-15'
244 |                 />
245 |               </div>
246 | 
247 |               {fieldList.map((field) => (
248 |                 <WordFormField
249 |                   key={field.name}
250 |                   fieldName={field.name}
251 |                   fieldData={field.data}
252 |                   handleChange={handleChange}
253 |                   handleDelete={handleDelete}
254 |                   handleAdd={handleAdd}
255 |                 />
256 |               ))}
257 |               <WordFormImages
258 |                 formData={formData}
259 |                 setFormData={setFormData}
260 |                 handleDelete={handleDelete}
261 |                 setMessage={setMessage}
262 |               />
263 |             </div>
264 |             <div className='py-4 px-6 md:py-6 border-t flex justify-between'>
265 |               <Button
266 |                 bgColor='gray'
267 |                 size='md'
268 |                 type='button'
269 |                 onClick={() => toggleShowForm(false)}>
270 |                 Cancel
271 |               </Button>
272 |               <Button
273 |                 bgColor='indigo'
274 |                 size='md'
275 |                 className='font-semibold'
276 |                 type='submit'>
277 |                 Confirm
278 |               </Button>
279 |             </div>
280 |           </form>
281 |         </div>
282 |       </Overlay>
283 |     </>
284 |   )
285 | }
286 | 
287 | export default WordForm
288 | 
289 | WordForm.propTypes = {
290 |   page: PropType.string.isRequired
291 | }
292 | 


--------------------------------------------------------------------------------
/vocabularybuilder/src/utils/reviewHelper.js:
--------------------------------------------------------------------------------
  1 | import { getRandomWord } from '../services/wordAPI'
  2 | 
  3 | const shuffleArray = (array) => {
  4 |   let currentIndex = array.length
  5 |   let temporaryValue
  6 |   let randomIndex
  7 |   const arrayCopy = [...array]
  8 | 
  9 |   while (currentIndex !== 0) {
 10 |     randomIndex = Math.floor(Math.random() * currentIndex)
 11 |     currentIndex -= 1
 12 | 
 13 |     temporaryValue = arrayCopy[currentIndex]
 14 |     arrayCopy[currentIndex] = arrayCopy[randomIndex]
 15 |     arrayCopy[randomIndex] = temporaryValue
 16 |   }
 17 | 
 18 |   return arrayCopy
 19 | }
 20 | 
 21 | const getWordsWithLowestPoints = (words, number) => {
 22 |   return words.sort((a, b) => a.points - b.points).slice(0, number * 0.7)
 23 | }
 24 | 
 25 | const getWordsWithEarliestReview = (words, number, wordsWithLowestPoints) => {
 26 |   return words
 27 |     .filter((word) => !wordsWithLowestPoints.some((w) => w.id === word.id))
 28 |     .sort((a, b) => {
 29 |       if (a.lastReviewed === null && b.lastReviewed === null) {
 30 |         return 0
 31 |       } else if (a.lastReviewed === null) {
 32 |         return -1
 33 |       } else if (b.lastReviewed === null) {
 34 |         return 1
 35 |       } else {
 36 |         return a.lastReviewed - b.lastReviewed
 37 |       }
 38 |     })
 39 |     .slice(0, number - wordsWithLowestPoints.length)
 40 | }
 41 | 
 42 | const generateFrontCardType = (mode) => {
 43 |   if (mode.name === 'wordToMeaning') {
 44 |     return 'word'
 45 |   } else if (mode.name === 'meaningToWord') {
 46 |     return 'definitionWithImages'
 47 |   } else if (mode.name === 'mixed') {
 48 |     return Math.random() < 0.5 ? 'word' : 'definitionWithImages'
 49 |   }
 50 | }
 51 | 
 52 | const createCardData = (word, mode, image) => {
 53 |   const frontCardType = generateFrontCardType(mode)
 54 | 
 55 |   return {
 56 |     word: word.word,
 57 |     id: word.id,
 58 |     originalPoints: word.points,
 59 |     pointsEarned: null,
 60 |     newPoints: word.points,
 61 |     front:
 62 |       frontCardType === 'word'
 63 |         ? { type: 'word', word: word.word }
 64 |         : {
 65 |             type: 'definitionWithImages',
 66 |             definition: word.definition,
 67 |             image
 68 |           },
 69 |     back: frontCardType === 'word' ? word.definition : word.word
 70 |   }
 71 | }
 72 | 
 73 | const getSelectedWordData = (words, number) => {
 74 |   const wordsWithLowestPoints = getWordsWithLowestPoints(words, number)
 75 |   console.log('wordsWithLowestPoints', wordsWithLowestPoints)
 76 |   const wordsWithEarliestReview = getWordsWithEarliestReview(
 77 |     words,
 78 |     number,
 79 |     wordsWithLowestPoints
 80 |   )
 81 |   console.log('wordsWithEarliestReview', wordsWithEarliestReview)
 82 |   return [...wordsWithLowestPoints, ...wordsWithEarliestReview]
 83 | }
 84 | 
 85 | export const getFlashcardsInitWordArray = (words, number, mode) => {
 86 |   const selectedWordData = getSelectedWordData(words, number)
 87 |   const wordArray =
 88 |     selectedWordData?.map((word) => {
 89 |       const images = word.images || []
 90 |       const image =
 91 |         images.length > 0
 92 |           ? images[Math.floor(Math.random() * images.length)]
 93 |           : null
 94 |       console.log('image', image)
 95 |       return createCardData(word, mode, image)
 96 |     }) || []
 97 | 
 98 |   return shuffleArray(wordArray)
 99 | }
100 | 
101 | const getQuizChoices = async (words) => {
102 |   const uniqueWords = {}
103 |   const quizChoices = words
104 |     .filter((word) => {
105 |       if (!uniqueWords[word.word]) {
106 |         uniqueWords[word.word] = true
107 |         return true
108 |       } else {
109 |         return false
110 |       }
111 |     })
112 |     .map((word) => ({ ...word, source: 'journal' }))
113 |   //   console.log('quizChoices', quizChoices)
114 |   while (quizChoices.length < 4) {
115 |     console.log('Get words from API')
116 |     try {
117 |       const word = await getRandomWord()
118 | 
119 |       if (!word || !word.results || word.results.length === 0) {
120 |         continue
121 |       }
122 | 
123 |       const randomDefinition =
124 |         word.results[Math.floor(Math.random() * word.results.length)]
125 | 
126 |       const isDuplicate = quizChoices.some(
127 |         (choice) =>
128 |           choice.word === word.word &&
129 |           choice.definition === randomDefinition.definition
130 |       )
131 | 
132 |       if (!isDuplicate) {
133 |         quizChoices.push({
134 |           word: word.word,
135 |           definition: randomDefinition.definition,
136 |           source: 'api'
137 |         })
138 |       }
139 |     } catch (error) {
140 |       throw new Error(error)
141 |     }
142 |   }
143 |   return quizChoices
144 | }
145 | 
146 | const getWordDefinitionQuestions = (quizChoices) => {
147 |   const questions = []
148 |   for (const choice of quizChoices) {
149 |     let questionType
150 |     if (choice.source === 'journal') {
151 |       questionType =
152 |         Math.random() < 0.5 ? 'mc-wordToDefinition' : 'mc-definitionToWord'
153 |     } else {
154 |       questionType = null
155 |     }
156 |     if (questionType) {
157 |       const isWordToDefinition = questionType === 'mc-wordToDefinition'
158 |       const correctAnswer =
159 |         questionType === 'mc-wordToDefinition' ? choice.definition : choice.word
160 | 
161 |       const incorrectAnswers = shuffleArray(
162 |         quizChoices
163 |           .map((choice) => {
164 |             const isDifferentWord = choice.word !== correctAnswer
165 |             const isDifferentDefinition = choice.definition !== correctAnswer
166 |             if (isWordToDefinition) {
167 |               return isDifferentDefinition ? choice.definition : null
168 |             } else {
169 |               return isDifferentWord ? choice.word : null
170 |             }
171 |           })
172 |           .filter((answer) => answer !== null)
173 |       ).slice(0, 3)
174 | 
175 |       const choices = shuffleArray([correctAnswer, ...incorrectAnswers])
176 | 
177 |       questions.push({
178 |         id: choice.id,
179 |         questionType,
180 |         question: isWordToDefinition ? choice.word : choice.definition,
181 |         correctAnswer,
182 |         choices
183 |       })
184 |     }
185 |   }
186 |   return questions
187 | }
188 | 
189 | const getSynonymAntonymQuestions = (quizChoices) => {
190 |   const questions = []
191 |   for (const choice of quizChoices) {
192 |     let questionType
193 |     if (
194 |       choice.source === 'journal' &&
195 |       choice.synonyms?.length > 0 &&
196 |       choice.antonyms?.length > 0
197 |     ) {
198 |       questionType = Math.random() < 0.5 ? 'mc-synonyms' : 'mc-antonyms'
199 |     } else if (choice.source === 'journal' && choice.synonyms?.length > 0) {
200 |       questionType = 'mc-synonyms'
201 |     } else if (choice.source === 'journal' && choice.antonyms?.length > 0) {
202 |       questionType = 'mc-antonyms'
203 |     } else {
204 |       questionType = null
205 |     }
206 |     if (questionType) {
207 |       const correctAnswer = choice.word
208 | 
209 |       const incorrectAnswers = shuffleArray(
210 |         quizChoices
211 |           .filter((choice) => choice.word !== correctAnswer)
212 |           .map((choice) => choice.word)
213 |           .slice(0, 3)
214 |       )
215 |       const choices = shuffleArray([correctAnswer, ...incorrectAnswers])
216 |       const question = choice[questionType.split('-')[1]].join(', ')
217 | 
218 |       questions.push({
219 |         id: choice.id,
220 |         questionType,
221 |         question,
222 |         correctAnswer: choice.word,
223 |         choices
224 |       })
225 |     }
226 |   }
227 |   //   console.log('synonym-antonym questions', questions)
228 |   return questions
229 | }
230 | 
231 | const getBlankQuestions = (quizChoices) => {
232 |   const questions = []
233 |   for (const choice of quizChoices) {
234 |     let questionType
235 |     if (choice.source === 'journal' && choice.images?.length > 0) {
236 |       questionType = 'blank-' + (Math.random() < 0.5 ? 'definition' : 'images')
237 |     } else if (choice.source === 'journal') {
238 |       questionType = 'blank-definition'
239 |     } else {
240 |       questionType = null
241 |     }
242 |     if (questionType) {
243 |       let question
244 |       if (questionType === 'blank-images') {
245 |         question =
246 |           choice.images[Math.floor(Math.random() * choice.images?.length)]
247 |       } else {
248 |         question = choice.definition
249 |       }
250 |       questions.push({
251 |         id: choice.id,
252 |         questionType,
253 |         question,
254 |         correctAnswer: choice.word
255 |       })
256 |     }
257 |   }
258 |   return questions
259 | }
260 | 
261 | export const getQuizInitWordArray = (words, number) => {
262 |   const selectedWordData = getSelectedWordData(words, number)
263 |   return selectedWordData.map((word) => ({
264 |     ...word,
265 |     pointsEarned: null,
266 |     originalPoints: word.points,
267 |     newPoints: word.points
268 |   }))
269 | }
270 | 
271 | export const getQuizInitQuestionArray = async (selectedWordData, mode) => {
272 |   const quizChoices = await getQuizChoices(selectedWordData)
273 |   console.log('quiz choice in getQuizInitWordArray', quizChoices)
274 | 
275 |   let wordDefinitionQuestions = []
276 |   let synonymAntonymQuestions = []
277 |   let blanksQuestions = []
278 | 
279 |   if (mode.name === 'MC') {
280 |     wordDefinitionQuestions = shuffleArray(
281 |       getWordDefinitionQuestions(quizChoices)
282 |     )
283 |     console.log(
284 |       'word-definition questions in getQuizInitWordArray',
285 |       wordDefinitionQuestions
286 |     )
287 | 
288 |     synonymAntonymQuestions = shuffleArray(
289 |       getSynonymAntonymQuestions(quizChoices)
290 |     )
291 |     console.log(
292 |       'synonym-antonym questions in getQuizInitWordArray',
293 |       synonymAntonymQuestions
294 |     )
295 |   } else if (mode.name === 'blank') {
296 |     blanksQuestions = shuffleArray(getBlankQuestions(quizChoices))
297 |     console.log('blanks questions in getQuizInitWordArray', blanksQuestions)
298 |   } else if (mode.name === 'mixed') {
299 |     wordDefinitionQuestions = shuffleArray(
300 |       getWordDefinitionQuestions(quizChoices)
301 |     )
302 |     console.log(
303 |       'word-definition questions in getQuizInitWordArray',
304 |       wordDefinitionQuestions
305 |     )
306 | 
307 |     synonymAntonymQuestions = shuffleArray(
308 |       getSynonymAntonymQuestions(quizChoices)
309 |     )
310 |     console.log(
311 |       'synonym-antonym questions in getQuizInitWordArray',
312 |       synonymAntonymQuestions
313 |     )
314 | 
315 |     blanksQuestions = shuffleArray(getBlankQuestions(quizChoices))
316 |     console.log('blanks questions in getQuizInitWordArray', blanksQuestions)
317 |   }
318 | 
319 |   const result = [
320 |     ...wordDefinitionQuestions,
321 |     ...synonymAntonymQuestions,
322 |     ...blanksQuestions
323 |   ]
324 | 
325 |   return result
326 | }
327 | 
328 | export const checkBlanksCorrect = (blanksAns, correctAnswer) => {
329 |   return blanksAns.join('') === correctAnswer
330 | }
331 | 
332 | export const hasBlank = (blanksAns) => {
333 |   return blanksAns.some((blank) => blank === '')
334 | }
335 | 


--------------------------------------------------------------------------------