update: changing interating logics

json-schema-org · Jun 5, 2024 · 443977a · 443977a
1 parent 15865bf
commit 443977a
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 133 deletions.
diff --git a/data/getting-started-examples.json b/data/getting-started-examples.json
diff --git a/data/getting-started-examples/instances/default.json b/data/getting-started-examples/instances/default.json
diff --git a/data/getting-started-examples/schemas/default.json b/data/getting-started-examples/schemas/default.json
diff --git a/pages/learn/getting-started-step-by-step/index.page.tsx b/pages/learn/getting-started-step-by-step/index.page.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import JsonEditor from '~/components/JsonEditor';
-import data from '~/data/getting-started-examples.json';
 import fs from 'fs';
 
 import { getLayout } from '~/components/Sidebar';
@@ -12,36 +11,43 @@ import { SectionContext } from '~/context';
 import { DocsHelp } from '~/components/DocsHelp';
 
 export async function getStaticProps() {
-  const schemaFilepath = data.map((data) => data.file).join('');
-  const instanceFilepath = data.map((data) => data.instances[0].file).join('');
-
-  const schemaData = fs.readFileSync(schemaFilepath, 'utf-8');
-  const instanceData = fs.readFileSync(instanceFilepath, 'utf-8');
-
   const block1 = fs.readFileSync(
     'pages/learn/getting-started-step-by-step/getting-started-step-by-step.md',
     'utf-8',
   );
   const { content: block1Content } = matter(block1);
   return {
     props: {
-      schemaData,
-      instanceData,
       blocks: [block1Content],
     },
   };
 }
 
-export default function StyledValidator({
-  schemaData,
-  instanceData,
-  blocks,
-}: {
-  schemaData: string;
-  instanceData: string;
-  blocks: any[];
-}) {
-  const newTitle = 'Creating your first schema'; // replace this
+const fetchData = async () => {
+  const response = await fetch('/getting-started-examples.json');
+  const data = await response.json();
+  return data;
+};
+
+export default function StyledValidator({ blocks }: { blocks: any[] }) {
+  const newTitle = 'Creating your first schema';
+
+  const [options, setOptions] = useState([]);
+  const [selectedSchema, setSelectedSchema] = useState(
+    '/getting-started-examples/schemas/default.json',
+  );
+
+  // const [selectedInstance, setSelectedInstance] = useState(
+  //   '/getting-started-examples/instances/default-ok.json',
+  // );
+
+  useEffect(() => {
+    fetchData().then((data) => setOptions(data));
+  }, []);
+
+  const handleChange = (e: any) => {
+    setSelectedSchema(e.target.value);
+  };
 
   return (
     <SectionContext.Provider value='docs'>
@@ -58,22 +64,18 @@ export default function StyledValidator({
             name='Select a JSON Schema Validator'
             className='p-2 border dark:border-slate-300 border-slate-800 dark:bg-slate-900 rounded-md max-sm:text-[12px]'
             id='Examples'
+            value={selectedSchema}
+            onChange={handleChange}
           >
-            {data.map((data, id) => {
-              return (
-                <option
-                  key={id}
-                  value={data.name}
-                  className='dark:bg-slate-900'
-                >
-                  {data.name}
-                </option>
-              );
-            })}
+            {options.map((option: any) => (
+              <option key={option.name} value={option.file}>
+                {option.name}
+              </option>
+            ))}
           </select>
         </div>
-
-        <JsonEditor initialCode={schemaData} />
+        <div>{selectedSchema}</div>
+        <JsonEditor initialCode={''} />
       </div>
 
       <div className='flex flex-col'>
@@ -83,27 +85,15 @@ export default function StyledValidator({
             name='Select a JSON Schema Instance'
             className='p-2 border dark:border-slate-300 border-slate-800 dark:bg-slate-900 rounded-md max-sm:text-[12px] '
             id='Examples'
-          >
-            {data.map((data, id) => {
-              return (
-                <option
-                  key={id}
-                  value={data.instances[0].name}
-                  className='dark:bg-slate-900 max-sm:text-[12px]'
-                >
-                  {data.instances[0].name}
-                </option>
-              );
-            })}
-          </select>
+          ></select>
         </div>
 
-        <JsonEditor initialCode={instanceData} />
+        <JsonEditor initialCode={'instanceData'} />
       </div>
 
       <h2 className='text-h5 font-semibold'>Result</h2>
       <div className='flex bg-slate-800 justify-between items-center text-white font-medium flex-row border p-5 rounded-xl'>
-        {data.map((data, id) => {
+        {/* {data.map((data, id) => {
           return (
             <>
               <p key={id}>{data.instances[0].details}</p>
@@ -115,7 +105,7 @@ export default function StyledValidator({
               )}
             </>
           );
-        })}
+        })} */}
       </div>
       <div className='flex justify-end'>
         <button className='px-3 py-2 text-white rounded-md mt-5 bg-startBlue hover:bg-startBlue/90'>