212 deny upload (#247), refactor localisation, styles

* refactor ModalAddEditCard - answer and question values sometimes works. С ПЕРВОГО РАЗА НЕ СРАБАТЫВАЕТ! Нужно 2жды открывать модалку

* refactor ModalAddEditDeck. Now toast correct and if image remained same I do not send it

* refactor ModalAddEditDeck schema

* refactor ModalAddEditCard schema

* refactor ModalAddEditDeck with custom hook. Works perfect

* refactor ModalAddEditCard with custom hook. Works. Need refactor on rtk state

* add cardSlice. Less states. It works. Ready to refactor

* refactor Cards update. Works fine.

* refactor Cards update. Works fine.

* refactor words in localisation, styles for table, fixed localisation issues

* refactor table styles - cancel padding for columns, refactor learnPage.module - add word-break

public/locales/en/translation.json

@@ -84,6 +84,7 @@
   "cardsPage": {
     "backDeckList": "Back to Deck List",
     "learn": "Learn",
+    "learnCards": "Learn Cards",
     "edit": "Edit",
     "delete": "Delete",
     "emptyDeck": "This deck is empty. Click add new card to fill this pack",

public/locales/ru/translation.json

@@ -73,9 +73,9 @@
   },
   "tableComponentWithTypes": {
     "name": "Имя",
-    "cards": "Колличество",
-    "lastUpdated": "Последнее обновление",
-    "createdBy": "Создано",
+    "cards": "Кол-во",
+    "lastUpdated": "Обновлено",
+    "createdBy": "Автор",
     "pleaseAddAnyData": "Пожалуйста, добавьте данные для отображения",
     "noContent": "Нет данных с такими условиями",
     "question": "Вопрос",
@@ -85,6 +85,7 @@
   "cardsPage": {
     "backDeckList": "Вернуться на страницу с колодами",
     "learn": "Изучить",
+    "learnCards": "Учить карточки",
     "edit": "Изменить",
     "delete": "Удалить",
     "emptyDeck": "Эта колода пуста. Нажмите кнопку добавить, чтобы заполнить эту колоду",

src/Pages/CardsPage/Cards.page.tsx

@@ -1,8 +1,9 @@
-import { ChangeEvent, useState } from 'react'
+import { ChangeEvent, useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link, useParams } from 'react-router-dom'
 
 import groupIcon from '@/assets/icons/WhiteSVG/Group 1399.svg'
+import groupIconBlack from '@/assets/icons/WhiteSVG/Group 1399Black.svg'
 import menuIcon2 from '@/assets/icons/WhiteSVG/edit-2-outline.svg'
 import playIcon from '@/assets/icons/WhiteSVG/play-circle-outline.svg'
 import menuIcon from '@/assets/icons/WhiteSVG/trash-outline.svg'
@@ -23,6 +24,7 @@ import { Page } from '@/components/ui/Page/Page'
 import { PaginationWithSelect } from '@/components/ui/Pagination/PaginationWithSelect'
 import Typography from '@/components/ui/Typography/Typography'
 import { Button } from '@/components/ui/button'
+import { UserContext } from '@/components/ui/changeTheme/Context'
 import { useQueryParams } from '@/hooks/useQueryParams'
 import { path } from '@/router/path'
 import { router } from '@/router/router'
@@ -35,6 +37,7 @@ import { clsx } from 'clsx'
 import s from './cardsPage.module.scss'
 
 export const CardsPage = () => {
+  const context = useContext(UserContext)
   const { t } = useTranslation()
   const {
     currentOrderBy,
@@ -130,8 +133,11 @@ export const CardsPage = () => {
                   {deck?.name}
                 </Typography>
                 {isMineCards && (
-                  // В DropDownItem можно передать onClick? Если нет, то обернуть в Button
-                  <DropdownMenuDemo className={s.dropdown} icon={groupIcon} type={'menu'}>
+                  <DropdownMenuDemo
+                    className={s.dropdown}
+                    icon={context?.theme === 'moon' ? groupIcon : groupIconBlack}
+                    type={'menu'}
+                  >
                     {isCardsCountZero ? (
                       <DropDownItem
                         handleOnClick={notifyLearnHandler}
@@ -160,7 +166,7 @@ export const CardsPage = () => {
                 )}
               </div>
               {isCardsCountFilled && deck?.cover && (
-                <img alt={'img'} src={deck?.cover} width={'200px'} />
+                <img alt={'img'} src={deck?.cover} width={'120px'} />
               )}
             </div>
             {isCardsCountFilled && (
@@ -177,7 +183,7 @@ export const CardsPage = () => {
                     to={`${path.decks}/${deckId}${path.learn}`}
                     type={'button'}
                   >
-                    <Typography variant={'subtitle2'}>Learn Cards</Typography>
+                    <Typography variant={'subtitle2'}>{t('cardsPage.learnCards')}</Typography>
                   </Button>
                 )}
               </div>

src/Pages/LearnPage/learnPage.module.scss

@@ -34,6 +34,7 @@ section {
 
 .showBtn {
   text-align: center;
+  word-break: break-word;
 }
 
 .radio {

src/common/addEditCardsOrDecks/addEditCardLogic.ts

@@ -0,0 +1,57 @@
+import { useEffect, useRef, useState } from 'react'
+import { Control } from 'react-hook-form'
+
+import { FormValuesAddEditCard } from '@/common/zodSchemas/cards/cards.schemas'
+import { CardResponse } from '@/services/cards/cards.types'
+import { cardsActions } from '@/services/cardsSlice/cardsSlice'
+import { useAppDispatch } from '@/services/store'
+
+type Props = {
+  control: Control<FormValuesAddEditCard, any>
+  img: null | string | undefined
+  item?: CardResponse
+  label: string
+}
+export const useAddEditCardLogic = (props: Props) => {
+  const { control, img, item, label } = props
+  const initPreview = item ? img ?? null : ''
+  const [preview, setPreview] = useState<null | string>(initPreview)
+  const [cover, setCover] = useState<File | null | undefined>(undefined)
+  const refInputImg = useRef<HTMLInputElement>(null)
+  const dispatch = useAppDispatch()
+
+  useEffect(() => {
+    if (img) {
+      setPreview(img)
+      label === 'question'
+        ? dispatch(cardsActions.setPreviewQuestion({ previewQuestion: img }))
+        : dispatch(cardsActions.setPreviewAnswer({ previewAnswer: img }))
+    }
+  }, [img])
+  // Генерируем ссылку на загружаемый файл и сэтаем в preview, который будем отображать, и очищаем после сэта хэш
+  useEffect(() => {
+    if (cover) {
+      const newPreviewQuestion = URL.createObjectURL(cover)
+
+      if (preview) {
+        URL.revokeObjectURL(preview)
+      }
+
+      setPreview(newPreviewQuestion)
+      label === 'question'
+        ? dispatch(cardsActions.setPreviewQuestion({ previewQuestion: newPreviewQuestion }))
+        : dispatch(cardsActions.setPreviewAnswer({ previewAnswer: newPreviewQuestion }))
+
+      return () => URL.revokeObjectURL(newPreviewQuestion)
+    }
+  }, [cover])
+
+  return {
+    control,
+    cover,
+    preview,
+    refInputImg,
+    setCover,
+    setPreview,
+  }
+}

src/common/addEditCardsOrDecks/addEditDeckLogic.ts

@@ -0,0 +1,51 @@
+import { useEffect, useRef, useState } from 'react'
+import { useForm } from 'react-hook-form'
+
+import { FormValuesAddEditDeck, schemaAddEditDeck } from '@/common/zodSchemas/decks/decks.schemas'
+import { Deck } from '@/services/decks/deck.types'
+import { zodResolver } from '@hookform/resolvers/zod'
+
+type Props = {
+  item?: Deck
+}
+export const useAddEditDeckLogic = ({ item }: Props) => {
+  const initPreview = item ? item.cover ?? null : ''
+  const [preview, setPreview] = useState<null | string>(initPreview)
+  const [cover, setCover] = useState<File | null | undefined>(undefined)
+  const refInputImg = useRef<HTMLInputElement>(null)
+  const { control, handleSubmit } = useForm<FormValuesAddEditDeck>({
+    defaultValues: item
+      ? { isPrivate: item.isPrivate, name: item.name }
+      : { isPrivate: false, name: '' },
+    resolver: zodResolver(schemaAddEditDeck),
+  })
+
+  useEffect(() => {
+    if (item?.cover) {
+      setPreview(item?.cover)
+    }
+  }, [item?.cover])
+  useEffect(() => {
+    if (cover) {
+      const newPreview = URL.createObjectURL(cover)
+
+      if (preview) {
+        URL.revokeObjectURL(preview)
+      }
+
+      setPreview(newPreview)
+
+      return () => URL.revokeObjectURL(newPreview)
+    }
+  }, [cover])
+
+  return {
+    control,
+    cover,
+    handleSubmit,
+    preview,
+    refInputImg,
+    setCover,
+    setPreview,
+  }
+}

src/common/addEditCardsOrDecks/getEditCardNotifyMsg.ts

@@ -0,0 +1,45 @@
+import { FormValuesAddEditCard } from '@/common/zodSchemas/cards/cards.schemas'
+import { CardResponse } from '@/services/cards/cards.types'
+
+export const getEditCardNotifyMsg = ({
+  data,
+  item,
+  previewAnswerImg,
+  previewQuestionImg,
+}: {
+  data: FormValuesAddEditCard
+  item?: CardResponse
+  previewAnswerImg: null | string
+  previewQuestionImg: null | string
+}) => {
+  let message = ''
+
+  const answersAndImgsCondition =
+    data.answer === item?.answer && previewAnswerImg === item?.answerImg
+  const questionAndImgsCondition =
+    data.question === item?.question && previewQuestionImg === item?.questionImg
+
+  if (answersAndImgsCondition || questionAndImgsCondition) {
+    if (answersAndImgsCondition) {
+      message += 'Answer and answer image are equal to previous. '
+    }
+    if (questionAndImgsCondition) {
+      message += 'Question and question image are equal to previous. '
+    }
+  } else {
+    if (data.answer === item?.answer) {
+      message += 'Answer is equal to previous. '
+    }
+    if (data.question === item?.question) {
+      message += 'Question is equal to previous. '
+    }
+    if (previewAnswerImg === item?.answerImg) {
+      message += 'Answer image is equal to previous. '
+    }
+    if (previewQuestionImg === item?.questionImg) {
+      message += 'Question image is equal to previous. '
+    }
+  }
+
+  return `${message}It is ok, just let you know 👌`
+}

src/common/addEditCardsOrDecks/getEditDeckNotifyMsg.ts

@@ -0,0 +1,26 @@
+import { FormValuesAddEditDeck } from '@/common/zodSchemas/decks/decks.schemas'
+import { Deck } from '@/services/decks/deck.types'
+
+export const getEditDeckNotifyMsg = ({
+  data,
+  item,
+  preview,
+}: {
+  data: FormValuesAddEditDeck
+  item?: Deck
+  preview: null | string
+}) => {
+  let message = ''
+
+  if (data.name === item?.name) {
+    message += 'Deck name is equal to previous. '
+  }
+  if (preview === item?.cover) {
+    message = 'Image is equal to previous. '
+  }
+  if (data.name === item?.name && preview === item?.cover) {
+    message = 'Deck name and cover image are equal to previous. '
+  }
+
+  return `${message}It is ok, just let you know 👌`
+}

src/common/zodSchemas/cards/cards.schemas.ts

@@ -16,3 +16,10 @@ export const LearnCardSchema = z.object({
 })
 
 export type LearnCardFormValues = z.infer<typeof LearnCardSchema>
+
+export const schemaAddEditCard = z.object({
+  answer: z.string().min(3).max(500),
+  question: z.string().min(3).max(500),
+})
+
+export type FormValuesAddEditCard = z.infer<typeof schemaAddEditCard>

src/common/zodSchemas/decks/decks.schemas.ts

@@ -0,0 +1,8 @@
+import { z } from 'zod'
+
+export const schemaAddEditDeck = z.object({
+  isPrivate: z.boolean().optional(),
+  name: z.string().min(3).max(30),
+})
+
+export type FormValuesAddEditDeck = z.infer<typeof schemaAddEditDeck>