Skip to content

Commit 016251e

Browse files
DhairyaMajmudarDhairyaMajmudar
committed
feat: enabling instnaces and moving to new component
1 parent 43f6ba3 commit 016251e

File tree

2 files changed

+230
-174
lines changed

2 files changed

+230
-174
lines changed

‎components/GettingStarted.tsx

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
import React, { useState, useEffect } from 'react';
2+
import { atomOneDark } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
3+
import Highlight from 'react-syntax-highlighter';
4+
5+
async function fetchData() {
6+
const response = await fetch('/getting-started-examples.json');
7+
const data = await response.json();
8+
return data;
9+
}
10+
11+
const GettingStarted = () => {
12+
const intitalSchemaData = {
13+
$schema: 'https://json-schema.org/draft/2020-12/schema',
14+
$id: 'https://example.com/product.schema.json',
15+
title: 'Product',
16+
description: 'A product from Acmes catalog',
17+
type: 'object',
18+
properties: {
19+
productId: {
20+
description: 'The unique identifier for a product',
21+
type: 'integer',
22+
},
23+
productName: {
24+
description: 'Name of the product',
25+
type: 'string',
26+
},
27+
price: {
28+
description: 'The price of the product',
29+
type: 'number',
30+
exclusiveMinimum: 0,
31+
},
32+
tags: {
33+
description: 'Tags for the product',
34+
type: 'array',
35+
items: {
36+
type: 'string',
37+
},
38+
minItems: 1,
39+
uniqueItems: true,
40+
},
41+
dimensions: {
42+
type: 'object',
43+
properties: {
44+
length: {
45+
type: 'number',
46+
},
47+
width: {
48+
type: 'number',
49+
},
50+
height: {
51+
type: 'number',
52+
},
53+
},
54+
required: ['length', 'width', 'height'],
55+
},
56+
warehouseLocation: {
57+
description:
58+
'Coordinates of the warehouse where the product is located.',
59+
$ref: 'https://example.com/geographical-location.schema.json',
60+
},
61+
},
62+
required: ['productId', 'productName', 'price'],
63+
};
64+
65+
const [options, setOptions] = useState([]);
66+
const [fetchedSchema, setFetchedSchema] = useState(intitalSchemaData);
67+
const [selectedSchema, setSelectedSchema] = useState(
68+
'/getting-started-examples/schemas/default.json',
69+
);
70+
const [instances, setInstances] = useState([
71+
{
72+
name: 'Valid instance',
73+
default: true,
74+
valid: true,
75+
file: '/getting-started-examples/instances/default-ok.json',
76+
details: 'This is a valid JSON instance for the provided JSON Schema',
77+
},
78+
{
79+
name: 'Invalid instance',
80+
default: false,
81+
valid: false,
82+
file: '/getting-started-examples/instances/default-ko.json',
83+
details: 'This is an invalid JSON instance for the provided JSON Schema',
84+
},
85+
]);
86+
87+
const [selectedInstance, setSelectedInstance] = useState(
88+
'/getting-started-examples/instances/default-ok.json',
89+
);
90+
const [fetchedInstance, setFetchedInstance] = useState({});
91+
92+
useEffect(() => {
93+
fetchData().then((data) => setOptions(data));
94+
}, []);
95+
96+
const handleChange = async (e: any) => {
97+
setSelectedSchema(e.target.value);
98+
const selectedSchemaObj = options.find(
99+
// @ts-ignore
100+
(schema) => schema.file === e.target.value,
101+
);
102+
103+
if (selectedSchemaObj) {
104+
// @ts-ignore
105+
setInstances(selectedSchemaObj.instances);
106+
const schemaResponse = await fetch(selectedSchema);
107+
const schemaData = await schemaResponse.json();
108+
setFetchedSchema(schemaData);
109+
} else {
110+
setInstances([]);
111+
setFetchedSchema(null!);
112+
}
113+
};
114+
115+
const handleInstanceChange = async (e: any) => {
116+
setSelectedInstance(e.target.value);
117+
118+
const instanceResponse = await fetch(selectedInstance);
119+
const instanceData = await instanceResponse.json();
120+
setFetchedInstance(instanceData);
121+
};
122+
123+
return (
124+
<>
125+
<div className='flex flex-col'>
126+
<div className='flex items-center flex-row justify-between mt-5 mb-3 '>
127+
<h2 className='text-h5 font-semibold'>JSON Schema</h2>
128+
<select
129+
name='Select a JSON Schema Validator'
130+
className='p-2 border dark:border-slate-300 border-slate-800 dark:bg-slate-900 rounded-md max-sm:text-[12px]'
131+
id='Examples'
132+
onChange={handleChange}
133+
>
134+
{options.map((option: any, id: number) => (
135+
<option key={id} value={option.file}>
136+
{option.name}
137+
</option>
138+
))}
139+
</select>
140+
</div>
141+
142+
<div className='overflow-x-auto flex-basis-0 max-w-full min-w-0 shrink lg:max-w-[800px] xl:max-w-[900px]'>
143+
<Highlight
144+
wrapLines={true}
145+
wrapLongLines={true}
146+
customStyle={{
147+
borderRadius: 10,
148+
paddingTop: 15,
149+
paddingBottom: 10,
150+
paddingLeft: 10,
151+
marginBottom: 20,
152+
maxWidth: '100%',
153+
}}
154+
lineNumberStyle={{
155+
marginRight: 10,
156+
}}
157+
style={atomOneDark}
158+
showLineNumbers
159+
startingLineNumber={1}
160+
lineProps={() => {
161+
const isHighlighted = false;
162+
return {
163+
className: `${isHighlighted ? 'bg-code-editor-dark-highlight block ml-10 w-full' : ''} pr-8`,
164+
};
165+
}}
166+
codeTagProps={{
167+
className: 'mr-8',
168+
}}
169+
>
170+
{JSON.stringify(fetchedSchema, null, 2)}
171+
</Highlight>
172+
</div>
173+
</div>
174+
175+
<div className='flex flex-col'>
176+
<div className='flex items-center flex-row justify-between mt-5 mb-3 '>
177+
<h2 className='text-h5 font-semibold'>JSON Instance</h2>
178+
<select
179+
name='Select a JSON Schema Validator'
180+
className='p-2 border dark:border-slate-300 border-slate-800 dark:bg-slate-900 rounded-md max-sm:text-[12px]'
181+
id='Examples'
182+
onChange={handleInstanceChange}
183+
>
184+
{instances.map((instance: any, id: number) => (
185+
<option key={id} value={instance.file}>
186+
{instance.name}
187+
</option>
188+
))}
189+
</select>
190+
</div>
191+
<div className='overflow-x-auto flex-basis-0 max-w-full min-w-0 shrink lg:max-w-[800px] xl:max-w-[900px]'>
192+
<Highlight
193+
wrapLines={true}
194+
wrapLongLines={true}
195+
customStyle={{
196+
borderRadius: 10,
197+
paddingTop: 15,
198+
paddingBottom: 10,
199+
paddingLeft: 10,
200+
marginBottom: 20,
201+
maxWidth: '100%',
202+
}}
203+
lineNumberStyle={{
204+
marginRight: 10,
205+
}}
206+
style={atomOneDark}
207+
showLineNumbers
208+
startingLineNumber={1}
209+
lineProps={() => {
210+
const isHighlighted = false;
211+
return {
212+
className: `${isHighlighted ? 'bg-code-editor-dark-highlight block ml-10 w-full' : ''} pr-8`,
213+
};
214+
}}
215+
codeTagProps={{
216+
className: 'mr-8',
217+
}}
218+
>
219+
{JSON.stringify(fetchedInstance, null, 2)}{' '}
220+
</Highlight>
221+
</div>
222+
</div>
223+
</>
224+
);
225+
};
226+
227+
export default GettingStarted;

0 commit comments

Comments
 (0)