diff --git a/src/actions/articles/getArticlesWithPaginationAction.ts b/src/actions/articles/getArticlesWithPaginationAction.ts new file mode 100644 index 00000000..f035b5a9 --- /dev/null +++ b/src/actions/articles/getArticlesWithPaginationAction.ts @@ -0,0 +1,19 @@ +'use server'; +import { getClient } from '@/lib/apolloClientForSC'; +import { + GetArticlesDocument, + GetArticlesQuery, +} from '@/queries/articles/getArticles'; + +export async function getArticlesWithPaginationAction( + offset: number = 0, + limit: number = 5, + tags: string[] = [], +) { + return ( + await getClient().query({ + query: GetArticlesDocument, + variables: { offset, limit, tags }, + }) + ).data.articles; +} diff --git a/src/app/(main)/blog/page.tsx b/src/app/(main)/blog/page.tsx index 55dd2eaa..69f02288 100644 --- a/src/app/(main)/blog/page.tsx +++ b/src/app/(main)/blog/page.tsx @@ -1,45 +1,22 @@ +import { getArticlesWithPaginationAction } from '@/actions/articles/getArticlesWithPaginationAction'; import { ArticlesList } from '@/components/pages/BlogPage/ArticlesList'; import { ArticlesPageHeader } from '@/components/pages/BlogPage/ArticlesPageHeader'; -import { ArticlesResult } from '@/generated/graphql'; -import { getClient } from '@/lib/apolloClientForSC'; -import { GetArticlesDocument } from '@/queries/articles/getArticles'; -import { GetArticlesCountDocument } from '@/queries/articles/getArticlesCount'; export default async function BlogPage({ - searchParams: { tags = [], limit = 5 }, + searchParams: { tags = [] }, }: { searchParams: { tags?: string[]; - limit: number; }; }) { - const client = getClient(); + const data = await getArticlesWithPaginationAction(0, 5, tags); - const { - data: { articles }, - } = await client.query<{ - articles: ArticlesResult; - }>({ - query: GetArticlesDocument, - variables: { - tags, - limit: +limit, - }, - }); - - const { - data: { articlesCount }, - } = await client.query<{ articlesCount: number }>({ - query: GetArticlesCountDocument, - variables: { - tags, - }, - }); + if (data.__typename !== 'Articles') return
error
; return ( <> - + ); } diff --git a/src/app/globals.css b/src/app/globals.css index f8ba3533..836a2d50 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -4,6 +4,7 @@ @layer base { .no-tailwindcss-base { + @apply w-full; word-break: normal; h1 { @apply text-[32px] font-medium leading-[35.2px]; diff --git a/src/components/CitySelector.tsx b/src/components/CitySelector.tsx index 07e1bd2d..5d595a00 100644 --- a/src/components/CitySelector.tsx +++ b/src/components/CitySelector.tsx @@ -1,6 +1,6 @@ import { cities } from '@/consts/cities'; import { usePathname, useRouter, useSearchParams } from 'next/navigation'; -import { useEffect, useMemo, useRef, useState } from 'react'; +import { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react'; export function CitySelector() { const { push } = useRouter(); @@ -21,6 +21,12 @@ export function CitySelector() { useEffect(() => setValue(params.get('city') as string), [params]); + function handleChangeSelect(e: ChangeEvent) { + if (!e.target.value) params.delete('city'); + else params.set('city', e.target.value); + push(pathname + '?' + params.toString()); + } + return (

")`, }} className="bg-[#14161F] flex-1 appearance-none [-webkit-appearance:none] [-moz-appearance:none] rounded-full p-[10px] outline-none bg-no-repeat bg-[right_10px_center]" - onChange={e => { - if (!e.target.value) params.delete('city'); - else params.set('city', e.target.value); - push(pathname + '?' + params.toString()); - }} + onChange={handleChangeSelect} > {!!ref.current && ( <> diff --git a/src/components/TagFilterItem.tsx b/src/components/FilterItem.tsx similarity index 95% rename from src/components/TagFilterItem.tsx rename to src/components/FilterItem.tsx index 70fa6652..33569039 100644 --- a/src/components/TagFilterItem.tsx +++ b/src/components/FilterItem.tsx @@ -23,7 +23,7 @@ export function FilterItem({ const params = new URLSearchParams(useSearchParams()); - function clickHandler() { + function handleClick() { if (isAll) { params.delete(type); } else { @@ -44,7 +44,7 @@ export function FilterItem({ ? 'bg-[#798FFF] border-[#798FFF]' : 'border-[#3D425C] nice-cock-2' }`} - onClick={clickHandler} + onClick={handleClick} > {value} {!!count && ( diff --git a/src/components/Layout/ProductsList.tsx b/src/components/Layout/ProductsList.tsx index bdda75e9..aff6c7c4 100644 --- a/src/components/Layout/ProductsList.tsx +++ b/src/components/Layout/ProductsList.tsx @@ -15,9 +15,7 @@ export function ProductsList({ inBurger = false }: { inBurger?: boolean }) { return ( diff --git a/src/components/articleInputs/ArticleSliderInput.tsx b/src/components/articleInputs/ArticleSliderInput.tsx index 5ee883f3..a3d8e4c1 100644 --- a/src/components/articleInputs/ArticleSliderInput.tsx +++ b/src/components/articleInputs/ArticleSliderInput.tsx @@ -1,6 +1,7 @@ import { ISlider } from '@/types/IArticle'; import { reorderFields } from '@/utils/reorderFields'; import { Reorder } from 'framer-motion'; +import { SyntheticEvent } from 'react'; import { Control, useFieldArray, @@ -32,26 +33,26 @@ export function ArticleSliderInput({ name: `blocks.${index}.images`, }); + function handleAddSlide(e: SyntheticEvent) { + e.preventDefault(); + append({ img: '' }); + } + + function handleRemoveSlider(e: SyntheticEvent) { + e.preventDefault(); + removeSlider(index); + } + return (

- -
diff --git a/src/components/modals/ArticleContentEditorModal.tsx b/src/components/modals/ArticleContentEditorModal.tsx index 94ca3e41..b7a190ee 100644 --- a/src/components/modals/ArticleContentEditorModal.tsx +++ b/src/components/modals/ArticleContentEditorModal.tsx @@ -33,7 +33,7 @@ export function ArticleContentEditorModal({ }} init={{ content_style: - 'body {color: #fff; background: #14161f; font-size:16px;display:grid;grid-template-columns:repeat(4,1fr)} body > * {grid-column-start: 2;grid-column-end:4', + 'body {color: #fff; background: #14161f; font-size:16px;display:grid;grid-template-columns:repeat(4,1fr);} body > * {grid-column-start: 2;grid-column-end:4', height: '100%', font_size_formats: '10px 12px 14px 16px 18px 20px 24px 28px 30px', video_template_callback: (data: { source: string }) => diff --git a/src/components/modals/ArticleFormModal.tsx b/src/components/modals/ArticleFormModal.tsx index 558cdafd..3e07b8fc 100644 --- a/src/components/modals/ArticleFormModal.tsx +++ b/src/components/modals/ArticleFormModal.tsx @@ -30,6 +30,23 @@ export function ArticleFormModal({ defaultValues, set }: IArticleFormProps) { defaultValues, }); + function onSubmit({ + cardImage, + createdAt, + description, + tags, + title, + }: Omit) { + setModal(null, ''); + if (set) { + set('title', title); + set('description', description); + set('tags', tags); + set('cardImage', cardImage); + set('createdAt', createdAt); + } + } + return (
@@ -41,21 +58,7 @@ export function ArticleFormModal({ defaultValues, set }: IArticleFormProps) {
-
{ - setModal(null, ''); - if (set) { - set('title', title); - set('description', description); - set('tags', tags); - set('cardImage', cardImage); - set('createdAt', createdAt); - } - }, - )} - className="space-y-4" - > +