From 5541d76574fd1fa5173daa55d1eb12201a24e985 Mon Sep 17 00:00:00 2001 From: smanylov Date: Fri, 9 Jan 2026 11:41:26 +0700 Subject: [PATCH] add dev inputs --- src/app/[locale]/pages/marking-photo/page.tsx | 2 + src/app/components/StackedBarChart.tsx | 16 +++++--- src/app/components/test-component.tsx | 38 +++++++++++++++++++ src/app/stores/useStoreWithDevtools.ts | 20 ++++++++-- .../ui/marking-page/protection-summary.tsx | 9 ++--- 5 files changed, 70 insertions(+), 15 deletions(-) create mode 100644 src/app/components/test-component.tsx diff --git a/src/app/[locale]/pages/marking-photo/page.tsx b/src/app/[locale]/pages/marking-photo/page.tsx index 9c7c39a..aeed655 100644 --- a/src/app/[locale]/pages/marking-photo/page.tsx +++ b/src/app/[locale]/pages/marking-photo/page.tsx @@ -4,6 +4,7 @@ import PageTitle from '@/app/ui/page-title'; import UploadSectionFile from '@/app/components/upload-section-file'; import { getAllowedFilesExtensions } from '@/app/actions/fileUpload'; import {StackedBarChart} from '@/app/components/StackedBarChart'; +import {TestComponent} from '@/app/components/test-component'; const data = [ { @@ -40,6 +41,7 @@ export default async function Page() { return (
+
diff --git a/src/app/components/StackedBarChart.tsx b/src/app/components/StackedBarChart.tsx index a5d114f..208f6a0 100644 --- a/src/app/components/StackedBarChart.tsx +++ b/src/app/components/StackedBarChart.tsx @@ -4,6 +4,7 @@ import { useTranslations } from 'next-intl'; import { useMemo } from 'react'; import { BarChart, Bar, Cell, XAxis, Tooltip } from 'recharts'; import { pluralize } from '@/app/lib/pluralize'; +import { useStoreWithDevtools } from '@/app/stores/useStoreWithDevtools'; type Files = { data: { @@ -31,10 +32,13 @@ export const StackedBarChart = ({ data }: Files) => { const STROKE_COLOR = "#dfdede24"; const STROKE_WIDTH = 1; - const { totalChecks, totalViolations } = useMemo(() => ({ - totalChecks: data.reduce((sum, item) => sum + (item.checks || 0), 0), - totalViolations: data.reduce((sum, item) => sum + (item.violations || 0), 0) - }), [data]); + /* const { totalChecks, totalViolations } = useMemo(() => ({ + totalChecks: data.reduce((sum, item) => sum + (item.checks || 0), 0), + totalViolations: data.reduce((sum, item) => sum + (item.violations || 0), 0) + }), [data]); */ + + const totalChecks = useStoreWithDevtools(s => s.value1); + const totalViolations = useStoreWithDevtools(s => s.value2); const renderBarWithPartialBorder = (props: BarShapeProps) => { const { x, y, width, height, fill } = props; @@ -208,13 +212,13 @@ export const StackedBarChart = ({ data }: Files) => {
{totalChecks} {pluralizeCheks(totalChecks)}
{totalViolations} {pluralizeViolations(totalViolations)}
diff --git a/src/app/components/test-component.tsx b/src/app/components/test-component.tsx new file mode 100644 index 0000000..ae36e9a --- /dev/null +++ b/src/app/components/test-component.tsx @@ -0,0 +1,38 @@ +'use client' + +import { useStoreWithDevtools } from '@/app/stores/useStoreWithDevtools'; +import { useTranslations } from 'next-intl'; + +export function TestComponent() { + const t = useTranslations('Global'); + + const setText1 = useStoreWithDevtools(s => s.setValue1); + const setText2 = useStoreWithDevtools(s => s.setValue2); + const text1 = useStoreWithDevtools(s => s.value1); + const text2 = useStoreWithDevtools(s => s.value2); + + return ( +
+
+ { + setText1(Number(e.target.value)) + }} + /> + {t('check')} {text1} +
+
+ { + setText2(Number(e.target.value)) + }} + /> + {t('violation')} {text2} +
+
+ ) +} \ No newline at end of file diff --git a/src/app/stores/useStoreWithDevtools.ts b/src/app/stores/useStoreWithDevtools.ts index d900c73..d57c761 100644 --- a/src/app/stores/useStoreWithDevtools.ts +++ b/src/app/stores/useStoreWithDevtools.ts @@ -2,15 +2,27 @@ import { create } from 'zustand' import { devtools } from 'zustand/middleware' interface Store { - value: any - setValue: (value: any) => void + value1: number + setValue1: (value: number) => void + value2: number + setValue2: (value: number) => void } export const useStoreWithDevtools = create()( devtools( (set) => ({ - value: 0, - setValue: (value) => set({ value }), + value1: 0, + setValue1: (value) => { + if ((typeof value === 'number')) { + set({ value1: value }) + } + }, + value2: 0, + setValue2: (value) => { + if ((typeof value === 'number')) { + set({ value2: value }) + } + }, }), { name: 'DevStore', // имя для DevTools diff --git a/src/app/ui/marking-page/protection-summary.tsx b/src/app/ui/marking-page/protection-summary.tsx index 45f822d..788d101 100644 --- a/src/app/ui/marking-page/protection-summary.tsx +++ b/src/app/ui/marking-page/protection-summary.tsx @@ -2,10 +2,10 @@ import { useTranslations } from 'next-intl'; import { useQuery } from '@tanstack/react-query'; -import { getUserFilesData } from '@/app/actions/fileEntity'; import { getUserFilesInfo } from '@/app/actions/action'; import { convertBytes } from '@/app/lib/convertBytes'; import { pluralize } from '@/app/lib/pluralize'; +import { useStoreWithDevtools } from '@/app/stores/useStoreWithDevtools'; type FilesInfo = { totalSize: number; @@ -15,7 +15,9 @@ type FilesInfo = { export default function ProtectionSummary({ fileType }: { fileType: string }) { const t = useTranslations('Global'); - console.log(fileType); + const CHECKS = useStoreWithDevtools(s => s.value1); + const VIOLATIONS = useStoreWithDevtools(s => s.value2); + const getFileTypeFields = (fileType: string): { totalSize: string, totalCount: string } => { switch (fileType) { @@ -85,9 +87,6 @@ export default function ProtectionSummary({ fileType }: { fileType: string }) { return pluralize(number, translate[0], translate[1], translate[2]); }; - const CHECKS = 6; - const VIOLATIONS = 2; - return (

{t('protecting-your-content')}