schema data fetching

pages/learn/getting-started-step-by-step/index.page.tsx

@@ -23,31 +23,112 @@ export async function getStaticProps() {
   };
 }
 
-const fetchData = async () => {
+async function fetchData() {
   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 intitalSchemaData = {
+    $schema: 'https://json-schema.org/draft/2020-12/schema',
+    $id: 'https://example.com/product.schema.json',
+    title: 'Product',
+    description: 'A product from Acmes catalog',
+    type: 'object',
+    properties: {
+      productId: {
+        description: 'The unique identifier for a product',
+        type: 'integer',
+      },
+      productName: {
+        description: 'Name of the product',
+        type: 'string',
+      },
+      price: {
+        description: 'The price of the product',
+        type: 'number',
+        exclusiveMinimum: 0,
+      },
+      tags: {
+        description: 'Tags for the product',
+        type: 'array',
+        items: {
+          type: 'string',
+        },
+        minItems: 1,
+        uniqueItems: true,
+      },
+      dimensions: {
+        type: 'object',
+        properties: {
+          length: {
+            type: 'number',
+          },
+          width: {
+            type: 'number',
+          },
+          height: {
+            type: 'number',
+          },
+        },
+        required: ['length', 'width', 'height'],
+      },
+      warehouseLocation: {
+        description:
+          'Coordinates of the warehouse where the product is located.',
+        $ref: 'https://example.com/geographical-location.schema.json',
+      },
+    },
+    required: ['productId', 'productName', 'price'],
+  };
+
   const [options, setOptions] = useState([]);
+  const [fetchedSchema, setFetchedSchema] = useState(intitalSchemaData);
   const [selectedSchema, setSelectedSchema] = useState(
     '/getting-started-examples/schemas/default.json',
   );
+  const [instances, setInstances] = useState([
+    {
+      name: 'Valid instance',
+      default: true,
+      valid: true,
+      file: '/getting-started-examples/instances/default-ok.json',
+      details: 'This is a valid JSON instance for the provided JSON Schema',
+    },
+    {
+      name: 'Invalid instance',
+      default: false,
+      valid: false,
+      file: '/getting-started-examples/instances/default-ko.json',
+      details: 'This is an invalid JSON instance for the provided JSON Schema',
+    },
+  ]);
 
-  // const [selectedInstance, setSelectedInstance] = useState(
-  //   '/getting-started-examples/instances/default-ok.json',
-  // );
-
+  /* eslint-disable */
   useEffect(() => {
     fetchData().then((data) => setOptions(data));
   }, []);
 
-  const handleChange = (e: any) => {
+  const handleChange = async (e: any) => {
     setSelectedSchema(e.target.value);
+    const selectedSchemaObj = options.find(
+      (schema) => schema.file === e.target.value,
+    );
+
+    if (selectedSchemaObj) {
+      setInstances(selectedSchemaObj.instances);
+      const schemaResponse = await fetch(selectedSchema);
+      const schemaData = await schemaResponse.json();
+      setFetchedSchema(schemaData);
+    } else {
+      setInstances([]);
+      setFetchedSchema(null);
+    }
   };
+  /* eslint-enable */
 
   return (
     <SectionContext.Provider value='docs'>
@@ -64,54 +145,37 @@ export default function StyledValidator({ blocks }: { blocks: any[] }) {
             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}
           >
-            {options.map((option: any) => (
-              <option key={option.name} value={option.file}>
+            {options.map((option: any, id: number) => (
+              <option key={id} value={option.file}>
                 {option.name}
               </option>
             ))}
           </select>
         </div>
         <div>{selectedSchema}</div>
-        <JsonEditor initialCode={''} />
+        <JsonEditor
+          initialCode={JSON.stringify(fetchedSchema, null, 2)}
+        ></JsonEditor>
       </div>
 
       <div className='flex flex-col'>
-        <div className='flex items-center flex-row justify-between mb-3 '>
+        <div className='flex items-center flex-row justify-between mt-5 mb-3 '>
           <h2 className='text-h5 font-semibold'>JSON Instance</h2>
           <select
-            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] '
+            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'
-          ></select>
+          >
+            {instances.map((instance: any, id: number) => (
+              <option key={id}>{instance.name}</option>
+            ))}
+          </select>
         </div>
-
-        <JsonEditor initialCode={'instanceData'} />
+        <div></div>
       </div>
 
-      <h2 className='text-h5 font-semibold'>Validation 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) => {
-          return (
-            <>
-              <p key={id}>{data.instances[0].details}</p>
-
-              {data.instances[0].valid ? (
-                <img src='/icons/green-tick.svg' alt='green tick' />
-              ) : (
-                <img src='/icons/red-cross.svg' alt='red cross' />
-              )}
-            </>
-          );
-        })} */}
-      </div>
-      {/* <div className='flex justify-end'>
-        <button className='px-3 py-2 text-white rounded-md mt-5 bg-startBlue hover:bg-startBlue/90'>
-          Download Example
-        </button>
-      </div> */}
       <DocsHelp />
     </SectionContext.Provider>
   );

public/getting-started-examples/schemas/default-extended.json

@@ -26,25 +26,6 @@
       },
       "minItems": 1,
       "uniqueItems": true
-    },
-    "dimensions": {
-      "type": "object",
-      "properties": {
-        "length": {
-          "type": "number"
-        },
-        "width": {
-          "type": "number"
-        },
-        "height": {
-          "type": "number"
-        }
-      },
-      "required": ["length", "width", "height"]
-    },
-    "warehouseLocation": {
-      "description": "Coordinates of the warehouse where the product is located.",
-      "$ref": "https://example.com/geographical-location.schema.json"
     }
   },
   "required": ["productId", "productName", "price"]

public/getting-started-examples/schemas/default.json

@@ -1,52 +1,51 @@
 {
-    "$schema": "https://json-schema.org/draft/2020-12/schema",
-    "$id": "https://example.com/product.schema.json",
-    "title": "Product",
-    "description": "A product from Acme's catalog",
-    "type": "object",
-    "properties": {
-      "productId": {
-        "description": "The unique identifier for a product",
-        "type": "integer"
-      },
-      "productName": {
-        "description": "Name of the product",
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://example.com/product.schema.json",
+  "title": "Product",
+  "description": "A product from Acme's catalog",
+  "type": "object",
+  "properties": {
+    "productId": {
+      "description": "The unique identifier for a product",
+      "type": "integer"
+    },
+    "productName": {
+      "description": "Name of the product",
+      "type": "string"
+    },
+    "price": {
+      "description": "The price of the product",
+      "type": "number",
+      "exclusiveMinimum": 0
+    },
+    "tags": {
+      "description": "Tags for the product",
+      "type": "array",
+      "items": {
         "type": "string"
       },
-      "price": {
-        "description": "The price of the product",
-        "type": "number",
-        "exclusiveMinimum": 0
-      },
-      "tags": {
-        "description": "Tags for the product",
-        "type": "array",
-        "items": {
-          "type": "string"
+      "minItems": 1,
+      "uniqueItems": true
+    },
+    "dimensions": {
+      "type": "object",
+      "properties": {
+        "length": {
+          "type": "number"
         },
-        "minItems": 1,
-        "uniqueItems": true
-      },
-      "dimensions": {
-        "type": "object",
-        "properties": {
-          "length": {
-            "type": "number"
-          },
-          "width": {
-            "type": "number"
-          },
-          "height": {
-            "type": "number"
-          }
+        "width": {
+          "type": "number"
         },
-        "required": [ "length", "width", "height" ]
+        "height": {
+          "type": "number"
+        }
       },
-      "warehouseLocation": {
-        "description": "Coordinates of the warehouse where the product is located.",
-        "$ref": "https://example.com/geographical-location.schema.json"
-      }
+      "required": ["length", "width", "height"]
     },
-    "required": [ "productId", "productName", "price" ]
-  }
-
+    "warehouseLocation": {
+      "description": "Coordinates of the warehouse where the product is located.",
+      "$ref": "https://example.com/geographical-location.schema.json"
+    }
+  },
+  "required": ["productId", "productName", "price"]
+}