From 73f6845ede3424ca1fa004294d9144288c555825 Mon Sep 17 00:00:00 2001 From: Lanskikh Date: Wed, 6 Nov 2024 14:18:42 +0500 Subject: [PATCH] finally revalidate data completed --- src/actions/articles/addArticleAction.ts | 19 +++++++ src/actions/articles/deleteArticleAction.ts | 14 +++++ src/actions/articles/editArticleAction.ts | 16 ++++++ src/actions/projects/addProjectAction.ts | 20 +++++++ src/actions/projects/deleteProjectAction.ts | 19 +++++++ src/actions/projects/editProjectActions.ts | 20 +++++++ src/app/(main)/blog/[articleId]/edit/page.tsx | 53 ++++------------- src/app/(main)/blog/page.tsx | 2 - src/app/(main)/page.tsx | 2 - src/components/ProjectsActions.tsx | 43 ++++---------- src/components/modals/DeleteArticleModal.tsx | 29 ++++++---- src/components/modals/DeleteProjectModal.tsx | 29 +++------- src/components/modals/ProjectFormModal.tsx | 15 ++--- .../pages/BlogPage/ArticlesList.tsx | 1 - .../pages/BlogPage/ArticlesPageHeader.tsx | 46 +++++---------- src/components/pages/MainPage/Projects.tsx | 31 +++------- .../pages/ProjectsPage/ProjectsPageHeader.tsx | 42 +++++--------- src/lib/apolloClientForCC.ts | 3 +- src/lib/apolloClientForSC.ts | 57 ++++++++++++------- 19 files changed, 236 insertions(+), 225 deletions(-) create mode 100644 src/actions/articles/addArticleAction.ts create mode 100644 src/actions/articles/deleteArticleAction.ts create mode 100644 src/actions/articles/editArticleAction.ts create mode 100644 src/actions/projects/addProjectAction.ts create mode 100644 src/actions/projects/deleteProjectAction.ts create mode 100644 src/actions/projects/editProjectActions.ts diff --git a/src/actions/articles/addArticleAction.ts b/src/actions/articles/addArticleAction.ts new file mode 100644 index 00000000..b9808679 --- /dev/null +++ b/src/actions/articles/addArticleAction.ts @@ -0,0 +1,19 @@ +'use server'; +import { CreateArticleInput } from '@/generated/graphql'; +import { getClient } from '@/lib/apolloClientForSC'; +import { + AddArticleDocument, + AddArticleMutation, +} from '@/queries/articles/addArticle'; +import { revalidatePath } from 'next/cache'; +import { cookies } from 'next/headers'; + +export async function addArticleAction(input: CreateArticleInput) { + const { data } = await getClient().mutate({ + mutation: AddArticleDocument, + variables: { input }, + context: { headers: { cookie: cookies().toString() } }, + }); + revalidatePath('/blog'); + return data?.createArticle; +} diff --git a/src/actions/articles/deleteArticleAction.ts b/src/actions/articles/deleteArticleAction.ts new file mode 100644 index 00000000..ecc1b31e --- /dev/null +++ b/src/actions/articles/deleteArticleAction.ts @@ -0,0 +1,14 @@ +'use server'; +import { getClient } from '@/lib/apolloClientForSC'; +import { DeleteArticleDocument } from '@/queries/articles/deleteArticle'; +import { revalidatePath } from 'next/cache'; +import { cookies } from 'next/headers'; + +export async function deleteArticleAction(id: number) { + await getClient().mutate({ + mutation: DeleteArticleDocument, + variables: { id }, + context: { headers: { cookie: cookies().toString() } }, + }); + revalidatePath('/blog'); +} diff --git a/src/actions/articles/editArticleAction.ts b/src/actions/articles/editArticleAction.ts new file mode 100644 index 00000000..6c707ae3 --- /dev/null +++ b/src/actions/articles/editArticleAction.ts @@ -0,0 +1,16 @@ +'use server'; +import { CreateArticleInput } from '@/generated/graphql'; +import { getClient } from '@/lib/apolloClientForSC'; +import { EditArticleDocument } from '@/queries/articles/editArticle'; +import { revalidatePath } from 'next/cache'; +import { cookies } from 'next/headers'; + +export async function editArticleAction(id: number, input: CreateArticleInput) { + await getClient().mutate({ + mutation: EditArticleDocument, + variables: { id, input }, + context: { headers: { cookie: cookies().toString() } }, + }); + revalidatePath('/blog'); + revalidatePath(`/blog/${id}`); +} diff --git a/src/actions/projects/addProjectAction.ts b/src/actions/projects/addProjectAction.ts new file mode 100644 index 00000000..834ec433 --- /dev/null +++ b/src/actions/projects/addProjectAction.ts @@ -0,0 +1,20 @@ +'use server'; +import { CreateProjectInput } from '@/generated/graphql'; +import { getClient } from '@/lib/apolloClientForSC'; +import { + AddProjectDocument, + AddProjectMutation, +} from '@/queries/projects/addProject'; +import { revalidatePath } from 'next/cache'; +import { cookies } from 'next/headers'; + +export async function addProjectAction(input: CreateProjectInput) { + await getClient().mutate({ + mutation: AddProjectDocument, + variables: { input }, + context: { headers: { cookie: cookies().toString() } }, + }); + + revalidatePath('/'); + revalidatePath('/projects'); +} diff --git a/src/actions/projects/deleteProjectAction.ts b/src/actions/projects/deleteProjectAction.ts new file mode 100644 index 00000000..376b4022 --- /dev/null +++ b/src/actions/projects/deleteProjectAction.ts @@ -0,0 +1,19 @@ +'use server'; +import { getClient } from '@/lib/apolloClientForSC'; +import { + DeleteProjectDocument, + DeleteProjectMutation, +} from '@/queries/projects/deleleProject'; +import { revalidatePath } from 'next/cache'; +import { cookies } from 'next/headers'; + +export async function deleteProjectAction(id: number) { + await getClient().mutate({ + mutation: DeleteProjectDocument, + variables: { id }, + context: { headers: { cookie: cookies().toString() } }, + }); + + revalidatePath('/'); + revalidatePath('/projects'); +} diff --git a/src/actions/projects/editProjectActions.ts b/src/actions/projects/editProjectActions.ts new file mode 100644 index 00000000..ffb941d4 --- /dev/null +++ b/src/actions/projects/editProjectActions.ts @@ -0,0 +1,20 @@ +'use server'; +import { CreateProjectInput } from '@/generated/graphql'; +import { getClient } from '@/lib/apolloClientForSC'; +import { EditProjectDocument } from '@/queries/projects/editProject'; +import { revalidatePath } from 'next/cache'; +import { cookies } from 'next/headers'; + +export async function editProjectActions( + id: number, + input: CreateProjectInput, +) { + await getClient().mutate({ + mutation: EditProjectDocument, + variables: { id, input }, + context: { headers: { cookie: cookies().toString() } }, + }); + + revalidatePath('/'); + revalidatePath('/projects'); +} diff --git a/src/app/(main)/blog/[articleId]/edit/page.tsx b/src/app/(main)/blog/[articleId]/edit/page.tsx index 58069092..f90dde2b 100644 --- a/src/app/(main)/blog/[articleId]/edit/page.tsx +++ b/src/app/(main)/blog/[articleId]/edit/page.tsx @@ -1,16 +1,13 @@ 'use client'; +import { editArticleAction } from '@/actions/articles/editArticleAction'; import { ArticleActions } from '@/components/ArticleActions'; import { ArticleHeader } from '@/components/ArticleHeader'; import { ArticleContentInput } from '@/components/articleInputs/ArticleContentInput'; import { ArticleSliderInput } from '@/components/articleInputs/ArticleSliderInput'; import { IArticleFormInput } from '@/components/modals/ArticleFormModal'; import { ArticleContent } from '@/components/pages/BlogPage/ArticleContent'; -import { useEditArticleMutation } from '@/queries/articles/editArticle'; -import { - GetArticleByIdDocument, - useGetArticleByIdQuery, -} from '@/queries/articles/getArticleById'; +import { useGetArticleByIdQuery } from '@/queries/articles/getArticleById'; import { IArticle } from '@/types/IArticle'; import { Button } from '@/ui/Button'; import { reorderFields } from '@/utils/reorderFields'; @@ -59,17 +56,7 @@ export default function DashboardArticlePage() { fetchPolicy: 'no-cache', }); - const { query } = useApolloClient(); - - const [editArticle] = useEditArticleMutation({ - async onCompleted() { - await query({ - query: GetArticleByIdDocument, - variables: { id: +articleId }, - }); - window.location.href = '/blog'; - }, - }); + const client = useApolloClient(); const [title, description, createdAt, cardImage, tags, blocks] = useWatch({ name: ['title', 'description', 'createdAt', 'cardImage', 'tags', 'blocks'], @@ -88,34 +75,16 @@ export default function DashboardArticlePage() { }); }, [title, description, createdAt, cardImage, tags, blocks, articleId]); - function handleSaveArticle() { + async function onSubmit() { if (!article) return; const { id, createdAt, ...other } = article; - editArticle({ - variables: { - id: +articleId, - input: { - ...other, - createdAt: new Date(createdAt).toISOString(), - blocks: JSON.stringify(getValues('blocks')), - }, - }, - }); - } - - function onSubmit(formData: IArticleFormInput) { - if (!article) return; - const { id, createdAt, ...other } = article; - editArticle({ - variables: { - id: +articleId, - input: { - ...other, - createdAt: createdAt.toISOString(), - blocks: JSON.stringify(formData.blocks), - }, - }, + await editArticleAction(id, { + ...other, + createdAt: new Date(createdAt).toISOString(), + blocks: JSON.stringify(getValues('blocks')), }); + client.refetchQueries({ include: ['GetArticlesCount'] }); + window.location.href = '/blog'; } if (!article) return
not found
; @@ -126,7 +95,7 @@ export default function DashboardArticlePage() {
- +
diff --git a/src/app/(main)/blog/page.tsx b/src/app/(main)/blog/page.tsx index 9c5f49f6..55dd2eaa 100644 --- a/src/app/(main)/blog/page.tsx +++ b/src/app/(main)/blog/page.tsx @@ -25,7 +25,6 @@ export default async function BlogPage({ tags, limit: +limit, }, - fetchPolicy: 'network-only', }); const { @@ -35,7 +34,6 @@ export default async function BlogPage({ variables: { tags, }, - fetchPolicy: 'no-cache', }); return ( diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx index 5c447a1b..997f7965 100644 --- a/src/app/(main)/page.tsx +++ b/src/app/(main)/page.tsx @@ -14,8 +14,6 @@ import { getClient } from '@/lib/apolloClientForSC'; import { GetProjectsDocument } from '@/queries/projects/getProjects'; import dynamicImport from 'next/dynamic'; -export const dynamic = 'force-dynamic'; - export default async function HomePage() { const DynamicIntegrationsSlider = dynamicImport( async () => diff --git a/src/components/ProjectsActions.tsx b/src/components/ProjectsActions.tsx index 56258d2b..e94a1b43 100644 --- a/src/components/ProjectsActions.tsx +++ b/src/components/ProjectsActions.tsx @@ -1,7 +1,6 @@ 'use client'; +import { editProjectActions } from '@/actions/projects/editProjectActions'; import { Project } from '@/generated/graphql'; -import { useEditProjectMutation } from '@/queries/projects/editProject'; -import { GetProjectsDocument } from '@/queries/projects/getProjects'; import { useModalStore } from '@/stores/useModalStore'; import { useApolloClient } from '@apollo/client'; import { DeleteIcon } from './icons/DeleteIcon'; @@ -20,34 +19,15 @@ export function ProjectsActions({ }) { const { setModal } = useModalStore(); - const [editProject] = useEditProjectMutation({ - onCompleted: () => setModal(null, ''), - }); - const client = useApolloClient(); - function onSubmit(id: number) { - return async (data: IAddProjectFormInput) => { - await editProject({ - variables: { - id, - input: { - ...data, - releaseDate: new Date(data.releaseDate).toISOString().split('T')[0], - }, - }, - refetchQueries: [ - { - query: GetProjectsDocument, - variables: { devices: [], city: chosenCity }, - }, - ], - update(cache, { data }) { - if (data?.updateProject.__typename === 'Project') - window.location.reload(); - }, - }); - }; + async function onSubmit({ releaseDate, ...data }: IAddProjectFormInput) { + await editProjectActions(project.id, { + ...data, + releaseDate: releaseDate.toISOString().split('T')[0], + }); + setModal(null, ''); + client.refetchQueries({ include: ['GetProjectsCount'] }); } function handleEditProject() { @@ -55,11 +35,8 @@ export function ProjectsActions({ setModal( , 'editProject', ); diff --git a/src/components/modals/DeleteArticleModal.tsx b/src/components/modals/DeleteArticleModal.tsx index 4b02dfd8..fdaafd0f 100644 --- a/src/components/modals/DeleteArticleModal.tsx +++ b/src/components/modals/DeleteArticleModal.tsx @@ -1,19 +1,28 @@ -import { useDeleteArticleMutation } from '@/queries/articles/deleteArticle'; +import { deleteArticleAction } from '@/actions/articles/deleteArticleAction'; import { useModalStore } from '@/stores/useModalStore'; import { Button } from '@/ui/Button'; +import { useApolloClient } from '@apollo/client'; import { CloseIcon } from '../icons/CloseIcon'; export function DeleteArticleModal({ id }: { id: number }) { const { setModal } = useModalStore(); - const [deleteArticle] = useDeleteArticleMutation({ - variables: { id }, - refetchQueries: ['GetArticleById', 'GetArticlesCount'], - onCompleted: () => { - setModal(null, ''); - window.location.href = '/blog'; - }, - }); + // const [deleteArticle] = useDeleteArticleMutation({ + // variables: { id }, + // refetchQueries: ['GetArticleById', 'GetArticlesCount'], + // onCompleted: () => { + // setModal(null, ''); + // window.location.href = '/blog'; + // }, + // }); + + const client = useApolloClient(); + + async function handleDeleteArticle() { + await deleteArticleAction(id); + setModal(null, ''); + client.refetchQueries({ include: ['GetArticlesCount'] }); + } return (
@@ -28,7 +37,7 @@ export function DeleteArticleModal({ id }: { id: number }) {