Merge pull request #48 from lbratkovskaya/add_settings_popover_to_dic…

…tionary

fix: link to video, add settings popover to dictionary

src/components/MainPage/MainPage.tsx

@@ -50,7 +50,7 @@ const MainPage: React.FC = () => {
           playing={false}
           width="100%"
           height="500px"
-          url="https://www.youtube.com/watch?v=pCjBetzC8ME"
+          url="https://www.youtube.com/watch?v=48zbCLQa5MA"
           controls
           className={classes.video}
         />

src/components/MemoryGame/ControlPanel.tsx

@@ -23,7 +23,7 @@ const ControlPanel: React.FC = () => {
   const gameWords = useSelector((state: IAppState) => state.memoryGame.words);
   const isLoggedIn = useSelector((state: IAppState) => state.user.isLoggedIn);
   const userData = useSelector((state: IAppState) => state.user.data);
-  const volume = useSelector((state: IAppState) => state.settings.soundsVolume);
+  const { soundsVolume } = useSelector((state: IAppState) => state.settings);
   const userDictionary = useSelector((state: IAppState) => state.userDictionary);
   const userWords = [...userDictionary.learningWords, ...userDictionary.deletedWords];
   const userWordsWords = userWords.map((uw) => uw.word);
@@ -68,7 +68,7 @@ const ControlPanel: React.FC = () => {
 
   function playSound(audio: string) {
     const player = new Audio(audio);
-    player.volume = volume / 100;
+    player.volume = soundsVolume / 100;
     player.play();
   }
 

src/components/MemoryGame/GameCard.tsx

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { get } from 'lodash';
 import { Card, Typography } from '@material-ui/core';
 import { showGameCard } from '../../store/actions/memoryGameActions';
-import backendUrl, { GAMES, MEMORY } from '../../constants';
+import backendUrl, { GAMES } from '../../constants';
 import { ICardProps } from './types';
 import { IAppState } from '../../store/types';
 import { IMemoryGameCard } from '../../store/reducers/memoryGameReducer/types';
@@ -13,7 +13,7 @@ const GameCard: React.FC<ICardProps> = (props: ICardProps) => {
   const classes = useStyles();
   const dispatch = useDispatch();
   const isGameStared = useSelector((state: IAppState) => state.memoryGame.isStarted);
-  const volume = useSelector((state: IAppState) => state.memoryGame.wordsVolume);
+  const soundsVolume = useSelector((state: IAppState) => state.settings.soundsVolume);
 
   const handleGameMove = (event: React.SyntheticEvent) => {
     if (!props.disabled && isGameStared) {
@@ -35,7 +35,7 @@ const GameCard: React.FC<ICardProps> = (props: ICardProps) => {
 
   function handleAutoplay(audio: string) {
     const player = new Audio(audio);
-    player.volume = volume / MEMORY.gameWordsMaxVolumeLevel;
+    player.volume = soundsVolume / 100;
     player.play();
   }
 

src/components/MemoryGame/SideMenu.tsx

@@ -15,11 +15,12 @@ import {
   Typography,
 } from '@material-ui/core';
 import { VolumeUp, Settings } from '@material-ui/icons';
-import { initiateGameField, setWordsVolumeLevel } from '../../store/actions/memoryGameActions';
+import { initiateGameField } from '../../store/actions/memoryGameActions';
 import { WORDBOOK_GROUPS, GAMES, MEMORY } from '../../constants';
 import { SELECT_ROUNDS } from '../GameSavannah/constants';
 import { IAppState } from '../../store/types';
 import useStyles from './styles';
+import { changeVolumeSounds } from '../../store/actions/settingsActions';
 
 type Anchor = 'left';
 
@@ -51,7 +52,7 @@ const SideMenu: React.FC = () => {
     GAMES.memory.difficulty[gameLevelFromSettings].label
   );
 
-  const wordsVolumeLevel = useSelector((state: IAppState) => state.memoryGame.wordsVolume);
+  const { soundsVolume } = useSelector((state: IAppState) => state.settings);
 
   const handleChangeGameMode = (event: React.ChangeEvent<HTMLInputElement>) => {
     setMode(event.target.checked ? 'image' : 'translation');
@@ -95,11 +96,11 @@ const SideMenu: React.FC = () => {
   };
 
   const handleVolumeLevelChange = (event: React.ChangeEvent<{}>, value: Number | Array<Number>) => {
-    dispatch(setWordsVolumeLevel(Number(value)));
+    dispatch(changeVolumeSounds(Number(value)));
   };
 
   const handleMaxVolume = () => {
-    dispatch(setWordsVolumeLevel(MEMORY.gameWordsMaxVolumeLevel));
+    dispatch(changeVolumeSounds(MEMORY.gameWordsMaxVolumeLevel));
   };
 
   useEffect(() => {
@@ -152,7 +153,7 @@ const SideMenu: React.FC = () => {
                 <Slider
                   min={MEMORY.gameWordsMinimalVolumeLevel}
                   max={MEMORY.gameWordsMaxVolumeLevel}
-                  value={wordsVolumeLevel}
+                  value={soundsVolume}
                   onChange={handleVolumeLevelChange}
                   aria-labelledby="continuous-slider"
                 />

src/components/UserDictionary/UserDictionary.tsx

@@ -5,6 +5,7 @@ import { AppBar, Tab, Tabs, Typography, useTheme } from '@material-ui/core';
 import UserDictionarySection from './UserDictionarySection';
 import Header from '../Header';
 import Footer from '../Footer';
+import SettingsPopover from '../SettingsPopover';
 import { fetchDictionary } from '../../store/actions/dictionaryActions';
 import { IAppState } from '../../store/types';
 import { TabPanelProps } from './types';
@@ -48,7 +49,7 @@ const UserDictionary: React.FC = () => {
       <Header />
       <main className={classes.main}>
         <Typography variant="h5" className={classes.title}>
-          Мой словарь
+          Мой словарь <SettingsPopover />
         </Typography>
         {userData.userId ? (
           <div className={classes.root}>

src/components/UserDictionary/styles.ts

@@ -24,6 +24,7 @@ const useStyles = makeStyles((theme: Theme) => {
       margin: '1rem 0',
       textTransform: 'uppercase',
       fontWeight: 500,
+      position: 'relative',
     },
     dictionary: {
       display: 'flex',

src/components/WordCard/WordCard.tsx

@@ -17,7 +17,7 @@ import backendUrl, {
   WORDBOOK_GROUPS,
   WORDCARD_APPEAR_GAP,
 } from '../../constants';
-import { IAppState, IUserWord } from '../../store/types';
+import { IAppState, IUserWord, IWord } from '../../store/types';
 import { IWordCardButton, IWordCardProps } from './types';
 import useStyles, { defaultImageSize, transitionStyles } from './styles';
 
@@ -60,6 +60,9 @@ const WordCard: React.FC<IWordCardProps> = ({
   const colorOfDifficult = theme.palette.secondary.main;
   const dispatch = useDispatch();
 
+  const { deletedWords } = useSelector((state: IAppState) => state.userDictionary);
+  const isInDeletedWords = deletedWords.map((el: IWord) => el.word).includes(word.word);
+
   const textStyle = {
     word: playingAudioIndex === 0 ? highlightStyle : {},
     meaning: playingAudioIndex === 1 ? highlightStyle : {},
@@ -215,6 +218,10 @@ const WordCard: React.FC<IWordCardProps> = ({
     };
   }, []);
 
+  useEffect(() => {
+    setIsDeleted(isInDeletedWords);
+  }, [isInDeletedWords]);
+
   return (
     <Transition in={isMounted && !isLoading} timeout={APPEAR_DURATION} unmountOnExit>
       {(state: TransitionStatus) => (