Skip to content

Commit

Permalink
chore: use fetchRawCarouselSlides
Browse files Browse the repository at this point in the history
  • Loading branch information
athar-d-reader committed Sep 4, 2024
1 parent 5ae01b3 commit 91668e1
Show file tree
Hide file tree
Showing 9 changed files with 75 additions and 60 deletions.
9 changes: 9 additions & 0 deletions api/carousel/carouselKeys.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import { CarouselSlideParams } from "@/models/carousel/carouselSlide"

export const CAROUSEL_QUERY_KEYS = Object.freeze({
CAROUSEL: 'carousel',
SLIDES: 'slides',
GET: 'get',
GET_RAW: 'get-raw',
CREATE: 'create',
UPDATE: 'update',
IMAGE: 'image',
Expand All @@ -16,4 +19,10 @@ export const carouselKeys = Object.freeze({
CAROUSEL_QUERY_KEYS.GET,
`${id}`,
],
getRaw: (id: string | number, params?:CarouselSlideParams) => [
CAROUSEL_QUERY_KEYS.CAROUSEL,
CAROUSEL_QUERY_KEYS.SLIDES,
CAROUSEL_QUERY_KEYS.GET_RAW,
`${id}`,
],
})
4 changes: 2 additions & 2 deletions api/carousel/queries/useFetchCarouselSlides.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ const fetchCarouselSlides = async (params?:CarouselSlideParams): Promise<Carouse
return response.data
}

export const useFetchCarouselSlides = (params?:CarouselSlideParams) => {
export const useFetchCarouselSlides = () => {
const toaster = useToaster()

return useQuery({
queryFn: ()=>fetchCarouselSlides(params),
queryFn: ()=>fetchCarouselSlides(),
queryKey: carouselKeys.getMany,
staleTime: 1000 * 60 * 10, // stale for 10 minutes
onError: toaster.onQueryError,
Expand Down
23 changes: 23 additions & 0 deletions api/carousel/queries/useFetchRawCarouselSlides.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { carouselKeys, CAROUSEL_QUERY_KEYS } from 'api/carousel/carouselKeys'
import { useToaster } from 'providers/ToastProvider'
import { CarouselSlide, CarouselSlideParams } from 'models/carousel/carouselSlide'
import { useQuery } from 'react-query'
import http from 'api/http'

const { CAROUSEL, SLIDES, GET_RAW } = CAROUSEL_QUERY_KEYS

const fetchRawCarouselSlides = async (params?:CarouselSlideParams): Promise<CarouselSlide[]> => {
const response = await http.get<CarouselSlide[]>(`${CAROUSEL}/${SLIDES}/${GET_RAW}`,{params})
return response.data
}

export const useFetchRawCarouselSlides = (params?:CarouselSlideParams) => {
const toaster = useToaster()

return useQuery({
queryFn: ()=>fetchRawCarouselSlides(params),
queryKey: carouselKeys.getMany,
staleTime: 1000 * 60 * 10, // stale for 10 minutes
onError: toaster.onQueryError,
})
}
10 changes: 3 additions & 7 deletions app/(authenticated)/admin/carousel-slides/[id]/edit/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,7 @@ import { useFetchComics, useFetchRawComic } from '@/api/comic'
import { Role } from '@/enums/role'
import { useFetchMe } from '@/api/creator'
import SearchInput from '@/components/forms/SearchInput'

type SearchInputOption = {
value: string | number;
label: string;
}
import { CarouselSlideSearchInputOption } from '@/types/carouseSlideSearchInputOption'

interface Params {
id: string | number
Expand Down Expand Up @@ -123,7 +119,7 @@ export default function CreateCarouselSlidePage({ params }: { params: Params }){
<SearchInput
options={comicIssues.map(issue => ({ value: issue.id, label: issue.title }))}
value={searchComicIssue}
onChange={(value:string, option?:SearchInputOption) => {
onChange={(value:string, option?:CarouselSlideSearchInputOption) => {
setSearchComicIssue(value);
if (option) {
handleChangeComicIssue(option.value as number, option.label);
Expand All @@ -138,7 +134,7 @@ export default function CreateCarouselSlidePage({ params }: { params: Params }){
<SearchInput
options={comics.map(comic => ({ value: comic.slug, label: comic.title }))}
value={searchComic}
onChange={(value:string, option?:SearchInputOption) => {
onChange={(value:string, option?:CarouselSlideSearchInputOption) => {
setSearchComic(value);
if (option) {
handleChangeComic(option.value as string, option.label);
Expand Down
74 changes: 28 additions & 46 deletions app/(authenticated)/admin/carousel-slides/create/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,13 @@ import { useFetchComics } from '@/api/comic'
import { useFetchMe } from '@/api/creator'
import { Role } from '@/enums/role'
import CustomDatePicker from '@/components/forms/CustomDatePicker'
import SearchInput from '@/components/forms/SearchInput'
import { CarouselSlideSearchInputOption } from '@/types/carouseSlideSearchInputOption'

export default function CreateCarouselSlidePage() {
const toaster = useToaster()
const [searchComicIssue, setSearchComicIssue] = useState('')
const [searchComic, setSearchComic] = useState('')
const [isSearchingIssues, setIsSearchingIssues] = useState(false)
const [isSearchingComics, setIsSearchingComics] = useState(false)

const { flatData: comicIssues } = useFetchComicIssues({ titleSubstring: searchComicIssue, skip: 0, take: 10 })
const { flatData: comics } = useFetchComics({ titleSubstring: searchComic, skip: 0, take: 10 })
Expand Down Expand Up @@ -76,13 +76,11 @@ export default function CreateCarouselSlidePage() {
const handleChangeComicIssue = async (value: number, title: string) => {
setValue('comicIssueId', value)
setSearchComicIssue(title)
setIsSearchingIssues(false)
}

const handleChangeComic = async (value: string, title: string) => {
setValue('comicSlug', value)
setSearchComic(title)
setIsSearchingComics(false)
}

const handleChangeLocation = (value: string) => {
Expand Down Expand Up @@ -115,50 +113,34 @@ export default function CreateCarouselSlidePage() {
</div>

<div className='inputs--bottom'>
<div onMouseLeave={() => setIsSearchingIssues(false)}>
<Input
value={searchComicIssue}
type='text'
placeholder='Select Comic Issues'
onMouseEnter={() => setIsSearchingIssues(true)}
onChange={(e) => {
setSearchComicIssue(e.target.value)
}}
/>
{isSearchingIssues
? comicIssues.map((issue) => (
<p
key={issue.id}
style={{ cursor: 'pointer', zIndex: 1 }}
onClick={() => handleChangeComicIssue(issue.id, issue.title)}
>
{issue.title}
</p>
))
: null}
</div>
<div onMouseLeave={() => setIsSearchingComics(false)}>
<Input
<Label>Comic Issue</Label>
<SearchInput
options={comicIssues.map(issue => ({ value: issue.id, label: issue.title }))}
value={searchComicIssue}
onChange={(value:string, option?:CarouselSlideSearchInputOption) => {
setSearchComicIssue(value);
if (option) {
handleChangeComicIssue(option.value as number, option.label);
}
}}
onInputChange={setSearchComicIssue}
placeholder="Select Comic Issues"
/>
<div>
<Label>Comic</Label>
<SearchInput
options={comics.map(comic => ({ value: comic.slug, label: comic.title }))}
value={searchComic}
type='text'
placeholder='Select Comics'
onChange={(e) => {
setSearchComic(e.target.value)
onChange={(value:string, option?:CarouselSlideSearchInputOption) => {
setSearchComic(value);
if (option) {
handleChangeComic(option.value as string, option.label);
}
}}
onMouseEnter={() => setIsSearchingComics(true)}
/>
{isSearchingComics
? comics.map((comic) => (
<p
key={comic.slug}
style={{ cursor: 'pointer', zIndex: 1 }}
onClick={() => handleChangeComic(comic.slug, comic.title)}
>
{comic.title}
</p>
))
: null}
</div>
onInputChange={setSearchComic}
placeholder="Select Comics"
/>
</div>
<div>
<Label>Title</Label>
<Input {...register('title')} />
Expand Down
5 changes: 3 additions & 2 deletions app/(authenticated)/admin/carousel-slides/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,14 @@ import CircularProgress from '@mui/material/CircularProgress'
import SkeletonImage from '@/components/SkeletonImage'
import ButtonLink from '@/components/ButtonLink'
import { RoutePath } from '@/enums/routePath'
import { useExpireCarouselSlide, useFetchCarouselSlides } from '@/api/carousel'
import { useExpireCarouselSlide } from '@/api/carousel'
import { useFetchMe } from '@/api/creator'
import { Role } from '@/enums/role'
import { Button } from '@mui/material'
import { useFetchRawCarouselSlides } from '@/api/carousel/queries/useFetchRawCarouselSlides'

export default function CarouselSlidePage() {
const {data: carouselSlides, isLoading: isLoadingCarouselSlides} = useFetchCarouselSlides({getExpired:true})
const {data: carouselSlides, isLoading: isLoadingCarouselSlides} = useFetchRawCarouselSlides({isExpired:true})
useAuthenticatedRoute()
const { mutateAsync: expireCarouselSlide } = useExpireCarouselSlide();

Expand Down
4 changes: 2 additions & 2 deletions components/forms/schemas.ts
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ export const createCarouselSlideValidationSchema = yup.object().shape({
image: yup.mixed(),
title: yup
.string()
.max(26, generateMaxLengthErrorMessage('title', 26)),
.max(64, generateMaxLengthErrorMessage('title', 64)),
priority: yup
.number()
.required(yupRequiredMessage('Priority number'))
Expand All @@ -176,7 +176,7 @@ export const createCarouselSlideValidationSchema = yup.object().shape({
.min(1, generateMinNumberErrorMessage('Priority number', 1)),
subtitle: yup
.string()
.max(48, generateMaxLengthErrorMessage('title', 48)),
.max(256, generateMaxLengthErrorMessage('subtitle', 256)),
location: yup.string().required(yupRequiredMessage('Carousel Location')),
comicIssueId: yup.number(),
comicSlug: yup.string(),
Expand Down
2 changes: 1 addition & 1 deletion models/carousel/carouselSlide.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,5 +38,5 @@ export type UpdateCarouselSlideData = Partial<
>

export interface CarouselSlideParams {
getExpired?:boolean
isExpired?:boolean
}
4 changes: 4 additions & 0 deletions types/carouseSlideSearchInputOption.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export type CarouselSlideSearchInputOption = {
value: string | number;
label: string;
}

0 comments on commit 91668e1

Please sign in to comment.