-
-
+
+
-
-
- 
-
-
-
-
- {name}
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ {name}
+
+
+
+
+
+
+
-
-
-
-
-
- )
+ return (
+
-
- {checked && (
-
-
- )}
-
-
- {label}
-
+
+
+
+
+
+ )
}
diff --git a/src/components/ui/controlled/controlled-checkbox/controlled-checkbox.tsx b/src/components/ui/controlled/controlled-checkbox/controlled-checkbox.tsx
index 95eb77c..cc7212a 100644
--- a/src/components/ui/controlled/controlled-checkbox/controlled-checkbox.tsx
+++ b/src/components/ui/controlled/controlled-checkbox/controlled-checkbox.tsx
@@ -3,34 +3,34 @@ import { FieldValues, UseControllerProps, useController } from 'react-hook-form'
import { Checkbox, CheckboxProps } from '../../'
export type ControlledCheckboxProps
+
+ {checked && (
+
+
+ )}
+
+
+ {label}
+
-
-
-
-
+
+
+
+ {label}
}
- {children}
- {label}
}
+ {children}
+
-
-
- {title}
-
-
-
-
-
- {children}
-
+
+
+ {title}
+
+
+
+
+
+ {children}
+
-
+ )
}
type NavigationButtonProps = {
- disabled?: boolean
- onClick: () => void
+ disabled?: boolean
+ onClick: () => void
}
type PageButtonProps = NavigationButtonProps & {
- page: number
- selected: boolean
+ page: number
+ selected: boolean
}
const Dots: FC = () => {
- return …
+ return …
}
const PageButton: FC
-
- )
+ {showPerPageSelect && (
+
+
- {showPerPageSelect && (
-
+
+
- Показать
- {/*
- )
+ return (
+
+ Показать
+ {/*
+ )
}
diff --git a/src/components/ui/pagination/usePagination.ts b/src/components/ui/pagination/usePagination.ts
index 98fa57b..be7d78e 100644
--- a/src/components/ui/pagination/usePagination.ts
+++ b/src/components/ui/pagination/usePagination.ts
@@ -3,110 +3,110 @@ import { useCallback, useMemo } from 'react'
// original code: https://www.freecodecamp.org/news/build-a-custom-pagination-component-in-react/
const range = (start: number, end: number) => {
- const length = end - start + 1
+ const length = end - start + 1
- /*
+ /*
Create an array of certain length and set the elements within it from
start value to end value.
*/
- return Array.from({ length }, (_, idx) => idx + start)
+ return Array.from({ length }, (_, idx) => idx + start)
}
const DOTS = '...'
type UsePaginationParamType = {
- count: number
- onChange: (pageNumber: number) => void
- page: number
- siblings?: number
+ count: number
+ onChange: (pageNumber: number) => void
+ page: number
+ siblings?: number
}
type PaginationRange = ('...' | number)[]
export const usePagination = ({ count, onChange, page, siblings = 1 }: UsePaginationParamType) => {
- const paginationRange = useMemo(() => {
- // Pages count is determined as siblingCount + firstPage + lastPage + page + 2*DOTS
- const totalPageNumbers = siblings + 5
+ const paginationRange = useMemo(() => {
+ // Pages count is determined as siblingCount + firstPage + lastPage + page + 2*DOTS
+ const totalPageNumbers = siblings + 5
- /*
+ /*
Case 1:
If the number of pages is less than the page numbers we want to show in our
paginationComponent, we return the range [1..totalPageCount]
*/
- if (totalPageNumbers >= count) {
- return range(1, count)
- }
+ if (totalPageNumbers >= count) {
+ return range(1, count)
+ }
- /*
+ /*
Calculate left and right sibling index and make sure they are within range 1 and totalPageCount
*/
- const leftSiblingIndex = Math.max(page - siblings, 1)
- const rightSiblingIndex = Math.min(page + siblings, count)
+ const leftSiblingIndex = Math.max(page - siblings, 1)
+ const rightSiblingIndex = Math.min(page + siblings, count)
- /*
+ /*
We do not show dots when there is only one page number to be inserted
between the extremes of siblings and the page limits i.e 1 and totalPageCount.
Hence, we are using leftSiblingIndex > 2 and rightSiblingIndex < totalPageCount - 2
*/
- const shouldShowLeftDots = leftSiblingIndex > 2
- const shouldShowRightDots = rightSiblingIndex < count - 2
+ const shouldShowLeftDots = leftSiblingIndex > 2
+ const shouldShowRightDots = rightSiblingIndex < count - 2
- const firstPageIndex = 1
- const lastPageIndex = count
+ const firstPageIndex = 1
+ const lastPageIndex = count
- /*
+ /*
Case 2: No left dots to show, but rights dots to be shown
*/
- if (!shouldShowLeftDots && shouldShowRightDots) {
- const leftItemCount = 3 + 2 * siblings
- const leftRange = range(1, leftItemCount)
+ if (!shouldShowLeftDots && shouldShowRightDots) {
+ const leftItemCount = 3 + 2 * siblings
+ const leftRange = range(1, leftItemCount)
- return [...leftRange, DOTS, count]
- }
+ return [...leftRange, DOTS, count]
+ }
- /*
+ /*
Case 3: No right dots to show, but left dots to be shown
*/
- if (shouldShowLeftDots && !shouldShowRightDots) {
- const rightItemCount = 3 + 2 * siblings
- const rightRange = range(count - rightItemCount + 1, count)
+ if (shouldShowLeftDots && !shouldShowRightDots) {
+ const rightItemCount = 3 + 2 * siblings
+ const rightRange = range(count - rightItemCount + 1, count)
- return [firstPageIndex, DOTS, ...rightRange]
- }
+ return [firstPageIndex, DOTS, ...rightRange]
+ }
- /*
+ /*
Case 4: Both left and right dots to be shown
*/
- if (shouldShowLeftDots && shouldShowRightDots) {
- const middleRange = range(leftSiblingIndex, rightSiblingIndex)
+ if (shouldShowLeftDots && shouldShowRightDots) {
+ const middleRange = range(leftSiblingIndex, rightSiblingIndex)
- return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex]
- }
- }, [siblings, page, count]) as PaginationRange
-
- const lastPage = paginationRange.at(-1)
-
- const isFirstPage = page === 1
- const isLastPage = page === lastPage
-
- const handleNextPageClicked = useCallback(() => {
- onChange(page + 1)
- }, [page, onChange])
-
- const handlePreviousPageClicked = useCallback(() => {
- onChange(page - 1)
- }, [page, onChange])
-
- function handleMainPageClicked(pageNumber: number) {
- return () => onChange(pageNumber)
+ return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex]
}
+ }, [siblings, page, count]) as PaginationRange
- return {
- handleMainPageClicked,
- handleNextPageClicked,
- handlePreviousPageClicked,
- isFirstPage,
- isLastPage,
- paginationRange,
- }
+ const lastPage = paginationRange.at(-1)
+
+ const isFirstPage = page === 1
+ const isLastPage = page === lastPage
+
+ const handleNextPageClicked = useCallback(() => {
+ onChange(page + 1)
+ }, [page, onChange])
+
+ const handlePreviousPageClicked = useCallback(() => {
+ onChange(page - 1)
+ }, [page, onChange])
+
+ function handleMainPageClicked(pageNumber: number) {
+ return () => onChange(pageNumber)
+ }
+
+ return {
+ handleMainPageClicked,
+ handleNextPageClicked,
+ handlePreviousPageClicked,
+ isFirstPage,
+ isLastPage,
+ paginationRange,
+ }
}
diff --git a/src/components/ui/radio-group/radio-group.stories.tsx b/src/components/ui/radio-group/radio-group.stories.tsx
index b326525..4b9011f 100644
--- a/src/components/ui/radio-group/radio-group.stories.tsx
+++ b/src/components/ui/radio-group/radio-group.stories.tsx
@@ -3,29 +3,29 @@ import type { Meta, StoryObj } from '@storybook/react'
import { RadioGroup } from './'
const meta = {
- component: RadioGroup,
- tags: ['autodocs'],
- title: 'Components/Radio Group',
+ component: RadioGroup,
+ tags: ['autodocs'],
+ title: 'Components/Radio Group',
} satisfies Meta
-
- {option.label}
-
-
- ))}
-
+
+ {option.label}
+
+
+ ))}
+
- {value?.[0]}
-
-
-
-
- {value?.[1]}
-
- )
+ return (
+
+ {value?.[0]}
+
+
+
+
+ {value?.[1]}
+
+ )
})
Slider.displayName = SliderPrimitive.Root.displayName
diff --git a/src/components/ui/table/table.stories.tsx b/src/components/ui/table/table.stories.tsx
index afd7204..9ea1833 100644
--- a/src/components/ui/table/table.stories.tsx
+++ b/src/components/ui/table/table.stories.tsx
@@ -3,127 +3,124 @@ import { Typography } from '@/components'
import { Meta } from '@storybook/react'
export default {
- component: Table,
- title: 'Components/Table',
+ component: Table,
+ title: 'Components/Table',
} as Meta
- {label && (
-
- {label}
-
- )}
-
- {errorMessage}
-
-
- )
+ function handleChange(e: ChangeEvent
- {search &&
-
-
+ {label && (
+
+ {label}
+
+ )}
+
+ {errorMessage}
+
+
+ )
+ }
)
function getFinalType(type: ComponentProps<'input'>['type'], showPassword: boolean) {
- if (type === 'password' && showPassword) {
- return 'text'
- }
+ if (type === 'password' && showPassword) {
+ return 'text'
+ }
- return type
+ return type
}
diff --git a/src/components/ui/typography/typography.stories.tsx b/src/components/ui/typography/typography.stories.tsx
index 2c4b9aa..12e9847 100644
--- a/src/components/ui/typography/typography.stories.tsx
+++ b/src/components/ui/typography/typography.stories.tsx
@@ -3,121 +3,121 @@ import type { Meta, StoryObj } from '@storybook/react'
import { Typography } from './'
const meta = {
- argTypes: {
- variant: {
- control: { type: 'radio' },
- options: [
- 'large',
- 'h1',
- 'h2',
- 'h3',
- 'body1',
- 'body2',
- 'subtitle1',
- 'subtitle2',
- 'caption',
- 'overline',
- 'link1',
- 'link2',
- 'error',
- ],
- },
+ argTypes: {
+ variant: {
+ control: { type: 'radio' },
+ options: [
+ 'large',
+ 'h1',
+ 'h2',
+ 'h3',
+ 'body1',
+ 'body2',
+ 'subtitle1',
+ 'subtitle2',
+ 'caption',
+ 'overline',
+ 'link1',
+ 'link2',
+ 'error',
+ ],
},
- component: Typography,
- tags: ['autodocs'],
- title: 'Components/Typography',
+ },
+ component: Typography,
+ tags: ['autodocs'],
+ title: 'Components/Typography',
} satisfies Meta
+ {search &&
+
+
- {deckData?.name}
-
-
- )
+ return (
+
+ {deckData?.name}
+
+
+ )
}
diff --git a/src/pages/decks-page/decks-page.tsx b/src/pages/decks-page/decks-page.tsx
index 55e2c34..1da4d00 100644
--- a/src/pages/decks-page/decks-page.tsx
+++ b/src/pages/decks-page/decks-page.tsx
@@ -1,24 +1,23 @@
import { useState } from 'react'
-import { Button, Page, Slider, TextField, Typography } from '@/components'
-import { DecksTable } from '@/components'
+import { Button, DecksTable, Page, Slider, TextField, Typography } from '@/components'
import { DeckDialog } from '@/components/decks/deck-dialog'
import { DeleteDeckDialog } from '@/components/decks/delete-deck-dialog'
import { Pagination } from '@/components/ui/pagination'
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
import {
- Tab,
- useCreateDeckMutation,
- useDeleteDeckMutation,
- useGetDecksQuery,
- useUpdateDeckMutation,
+ Tab,
+ useCreateDeckMutation,
+ useDeleteDeckMutation,
+ useGetDecksQuery,
+ useUpdateDeckMutation,
} from '@/services/decks'
import {
- selectDecksCurrentPage,
- selectDecksCurrentTab,
- selectDecksMaxCards,
- selectDecksMinCards,
- selectDecksSearch,
+ selectDecksCurrentPage,
+ selectDecksCurrentTab,
+ selectDecksMaxCards,
+ selectDecksMinCards,
+ selectDecksSearch,
} from '@/services/decks/decks.selectors'
import { decksSlice } from '@/services/decks/decks.slice'
import { useAppDispatch, useAppSelector } from '@/services/store'
@@ -26,132 +25,127 @@ import { useAppDispatch, useAppSelector } from '@/services/store'
import s from './decks-page.module.scss'
export const DecksPage = () => {
- const [showCreateModal, setShowCreateModal] = useState(false)
- const [deckToDeleteId, setDeckToDeleteId] = useStateloading...
- }
+ if (!decks) {
+ return loading...
+ }
- return (
-
-
-
- Decks
-
- setShowCreateModal(false)}
- onConfirm={createDeck}
- onOpenChange={setShowCreateModal}
- open={showCreateModal}
- />
-
-
- setCurrentTab(value as Tab)} value={currentTab}>
-
- My decks
- All decks
-
-
-
-
+
+
+ Decks
+
+ setShowCreateModal(false)}
+ onConfirm={createDeck}
+ onOpenChange={setShowCreateModal}
+ open={showCreateModal}
+ />
+
+
+ setCurrentTab(value as Tab)} value={currentTab}>
+
+ My decks
+ All decks
+
+
+
+