JSONビューアーと永続処理の追加

Author: su-u

.replit

@@ -1,4 +1,4 @@
-modules = ["nodejs-20"]
+modules = ["nodejs-20", "nodejs-21"]
 run = "yarn run dev"
 
 [nix]

package.json

@@ -34,6 +34,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
+    "react-json-view": "^1.21.3",
     "rsuite": "^5.70.0",
     "timezones-list": "^3.0.3",
     "uuid": "^10.0.0"

src/app/json_view/JsonView.tsx

@@ -0,0 +1,60 @@
+'use client';
+import React, { FC } from 'react';
+import { Controller, FormProvider } from 'react-hook-form';
+import { Col, Grid, Panel, PanelGroup, Row } from 'rsuite';
+import ReactJson from 'react-json-view';
+import { AppLayout } from '@/Layout/App';
+import { useJsonView } from '@/app/json_view/useJsonView';
+import { Editor, ex } from '@/components/common/Editor';
+import { ClearButton } from '@/components/common/Form/ClearButton';
+import { CopyButton } from '@/components/common/Form/CopyButton';
+import { PageTitle } from '@/components/common/PageTitle';
+import { PanelHeader } from '@/components/common/PanelHeader';
+
+export const JsonView: FC = () => {
+  const title = 'JSONビューアー';
+  const { input, methods } = useJsonView();
+
+  return (
+    <FormProvider {...methods}>
+      <AppLayout>
+        <Grid fluid>
+          <PageTitle title={title} />
+          <Row gutter={5}>
+            <Col xs={24} md={12}>
+              <PanelGroup bordered>
+                <Panel
+                  bordered
+                  header={<PanelHeader title="入力" right={<ClearButton name="input" />} />}
+                >
+                  <Controller
+                    render={({ field }) => <Editor extensions={[ex.json]} {...field} />}
+                    name="input"
+                    control={methods.control}
+                  />
+                </Panel>
+              </PanelGroup>
+            </Col>
+            <Col xs={24} md={12}>
+              <Panel
+                bordered
+                header={
+                  <PanelHeader
+                    title="JSON"
+                    right={<CopyButton size="small" copyText={JSON.stringify(input)} />}
+                  />
+                }
+              >
+                <ReactJson
+                  src={input}
+                  theme="chalk"
+                  style={{ padding: '4px', border: '1px solid #a4a9b3', borderRadius: '6px' }}
+                />
+              </Panel>
+            </Col>
+          </Row>
+        </Grid>
+      </AppLayout>
+    </FormProvider>
+  );
+};

src/app/json_view/page.tsx

@@ -0,0 +1,12 @@
+import React, { FC } from 'react';
+import { JsonView } from './JsonView';
+
+export const metadata = {
+  title: 'Dev Toolkit - JSONビューアー',
+};
+
+const JsonViewPage: FC = () => {
+  return <JsonView />;
+};
+
+export default JsonViewPage;

src/app/json_view/useJsonView.ts

@@ -0,0 +1,36 @@
+import { useCustomForm } from '@/components/common/Form/useCustomForm';
+import { useFormPersistence } from '@/hooks/useFormPersistence';
+
+type JsonFormatForm = {
+  input: string;
+};
+
+const DEFAULT_VALUES: JsonFormatForm = {
+  input: '',
+};
+
+export const useJsonView = () => {
+  const methods = useCustomForm<JsonFormatForm>({
+    defaultValues: DEFAULT_VALUES,
+  });
+  const { watch, setValue } = methods;
+  useFormPersistence('json_view', methods, (defaultValues) => {
+    setValue('input', defaultValues?.input);
+  });
+
+  const input = toJson(watch('input', DEFAULT_VALUES.input));
+
+  return {
+    DEFAULT_VALUES,
+    methods,
+    input,
+  };
+};
+
+const toJson = (input: string): object => {
+  try {
+    return JSON.parse(input);
+  } catch {
+    return {};
+  }
+};

src/components/common/Features.tsx

@@ -74,6 +74,11 @@ export const features: FeatureGroupType[] = [
         title: 'JSONフォーマット',
         path: '/json_formatter',
       },
+      {
+        key: 'json_view',
+        title: 'JSONビューアー',
+        path: '/json_view',
+      },
     ],
   },
   {

src/hooks/useFormPersistence.ts

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+import type { UseFormReturn } from 'react-hook-form';
+
+// フォームの情報をlocalStorageに保存して永続化する
+export const useFormPersistence = <T>(
+  name: string,
+  methods: UseFormReturn<T>,
+  setCallback: (defaultValues: T) => void,
+) => {
+  const {
+    watch,
+    formState: { isDirty },
+  } = methods;
+  const formData = watch();
+
+  useEffect(() => {
+    const defaultValues = JSON.parse(localStorage.getItem(name));
+    if (!isDirty) {
+      setCallback(defaultValues);
+    }
+  }, [isDirty]);
+
+  useEffect(() => {
+    if (isDirty) {
+      localStorage.setItem(name, JSON.stringify(formData));
+      console.log('set', isDirty, formData);
+    }
+  }, [formData, isDirty]);
+};