feat: toggle hardcoded schema versions (#5)

api/useQuerySchemas.ts

@@ -1,19 +1,27 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
 import axios from "axios";
 
 const DIGITAL_PLANNING_DATA_SCHEMAS_JSON_URL =
-  "https://theopensystemslab.github.io/digital-planning-data-schemas/v0.7.0/schema.json";
+  "https://theopensystemslab.github.io/digital-planning-data-schemas";
 
-const useQuerySchemas = () => {
+// TODO: type the version more strictly
+const useQuerySchemas = (
+  version: string,
+  options?: Readonly<Omit<UseQueryOptions<unknown>, "queryKey" | "queryFn">>
+) => {
   const fetchFn = async (url: string) => {
     const response = await axios.get(url);
     return response.data;
   };
 
   return useQuery({
-    queryKey: ["schemas"],
-    queryFn: () => fetchFn(DIGITAL_PLANNING_DATA_SCHEMAS_JSON_URL),
+    queryKey: ["schemas", version],
+    queryFn: () =>
+      fetchFn(
+        `${DIGITAL_PLANNING_DATA_SCHEMAS_JSON_URL}/${version}/schema.json`
+      ),
     staleTime: 1000 * 60 * 10, // cache for 10 minutes
+    ...options,
   });
 };
 

package.json

@@ -19,6 +19,7 @@
     "@tanstack/react-query": "^5.59.15",
     "@types/prismjs": "^1.26.4",
     "axios": "^1.7.7",
+    "formik": "^2.4.6",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

src/App.tsx

@@ -1,58 +1,98 @@
-import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
+import { useQueryClient } from "@tanstack/react-query";
 
 import { JsonSchemaViewer } from "@stoplight/json-schema-viewer";
-import { Provider as MosaicProvider, injectStyles } from "@stoplight/mosaic";
+import { injectStyles } from "@stoplight/mosaic";
+import { useFormik } from "formik";
 import useQuerySchemas from "./../api/useQuerySchemas";
 
+import InputLabel from "@mui/material/InputLabel";
+import MenuItem from "@mui/material/MenuItem";
+import Select from "@mui/material/Select";
+import { useState } from "react";
+import Header from "./components/Header";
+
+// TODO: grab this programatically instead of hard-coding
+const LATEST_WORKING_VERSION = "v0.7.0";
+
 const App = () => {
   injectStyles();
+  const queryClient = useQueryClient();
+  const [selectedVersion, setSelectedVersion] = useState(
+    LATEST_WORKING_VERSION
+  );
 
-  const { data: schema, isLoading, isError } = useQuerySchemas();
+  const {
+    data: schema,
+    isLoading,
+    isError,
+  } = useQuerySchemas(selectedVersion, { retry: false });
+
+  const formik = useFormik({
+    initialValues: {
+      version: selectedVersion,
+    },
+    onSubmit: (values) => setSelectedVersion(values.version),
+  });
 
   return (
-    <Box py={2} style={{ maxWidth: 1000 }} mx="auto">
-      <Typography textAlign="center" variant="h2">
-        Digital planning data schemas
-      </Typography>
-      <Typography pt={4} maxWidth={800} mx='auto'>
-        Digital Planning Data schemas aim to encourage more interoperability and
-        consistency between systems by offering a central, version controlled
-        specification for documenting and validating planning data.
-      </Typography>
-      <MosaicProvider>
-        <Box
-          p={6}
-          my={4}
-          maxWidth={800}
-          style={{
-            borderRadius: 2,
-            backgroundColor: "#fff5ef",
-          }}
-          mx="auto"
-        >
-          {isLoading ? (
-            <Typography>Loading...</Typography>
-          ) : (
-            <>
-              <Typography pb={2}>{schema.$id}</Typography>
-              <JsonSchemaViewer
-                name="Digital planning data schemas"
-                schema={schema}
-                hideTopBar={false}
-                emptyText="No schema defined"
-                expanded={true}
-                defaultExpandedDepth={0}
-                renderRootTreeLines={true}
-              />
-            </>
-          )}
-          {isError && (
-            <Typography pt={4}>Sorry, please try again later.</Typography>
+    <Header>
+      {isLoading ? (
+        <Typography>Loading...</Typography>
+      ) : (
+        <>
+          <form onSubmit={formik.handleSubmit}>
+            <InputLabel shrink id="select-version-label">
+              Version
+            </InputLabel>
+            <Select
+              sx={{ marginBottom: 4 }}
+              labelId="select-version-label"
+              defaultValue={selectedVersion}
+              id="select-version"
+              onChange={(e) => {
+                queryClient.invalidateQueries({
+                  queryKey: ["schemas", selectedVersion],
+                });
+                formik.setFieldValue("version", e.target.value, false);
+                formik.submitForm();
+              }}
+              value={formik.values.version}
+            >
+              // TODO: add query to populate with a list of possible versions
+              <MenuItem value={"v0.7.1"}>v0.7.1</MenuItem>
+              <MenuItem value={"v0.7.0"}>v0.7.0</MenuItem>
+              <MenuItem value={"v0.6.0"}>v0.6.0</MenuItem>
+              <MenuItem value={"v0.5.0"}>v0.5.0</MenuItem>
+              <MenuItem value={"v0.4.0"}>v0.4.0</MenuItem>
+              <MenuItem value={"v0.4.1"}>v0.4.1</MenuItem>
+              <MenuItem value={"v0.3.0"}>v0.3.0</MenuItem>
+              <MenuItem value={"v0.2.3"}>v0.2.3</MenuItem>
+              <MenuItem value={"v0.2.2"}>v0.2.2</MenuItem>
+              <MenuItem value={"v0.2.1"}>v0.2.1</MenuItem>
+              <MenuItem value={"v0.2.0"}>v0.2.0</MenuItem>
+              <MenuItem value={"v0.1.2"}>v0.1.2</MenuItem>
+              <MenuItem value={"v0.1.1"}>v0.1.1</MenuItem>
+              <MenuItem value={"v0.1.0"}>v0.1.0</MenuItem>
+            </Select>
+          </form>
+          {!isError && (
+            <JsonSchemaViewer
+              name="Digital planning data schemas"
+              schema={schema}
+              hideTopBar={false}
+              emptyText="No schema defined"
+              expanded={true}
+              defaultExpandedDepth={0}
+              renderRootTreeLines={true}
+            />
           )}
-        </Box>
-      </MosaicProvider>
-    </Box>
+        </>
+      )}
+      {isError && (
+        <Typography pt={4}>Sorry, please try again later.</Typography>
+      )}
+    </Header>
   );
 };
 

src/components/Header.tsx

@@ -0,0 +1,39 @@
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+
+import { Provider as MosaicProvider, injectStyles } from "@stoplight/mosaic";
+
+import { ComponentProps } from "react";
+
+const Header = ({ children }: ComponentProps<"header">)  => {
+  injectStyles();
+
+  return (
+    <Box p={2} style={{ maxWidth: 1000 }} mx="auto">
+      <Typography textAlign="center" variant="h2">
+        Digital planning data schemas
+      </Typography>
+      <Typography pt={4} maxWidth={800} mx="auto">
+        Digital Planning Data schemas aim to encourage more interoperability and
+        consistency between systems by offering a central, version controlled
+        specification for documenting and validating planning data.
+      </Typography>
+      <MosaicProvider>
+        <Box
+          p={6}
+          my={4}
+          maxWidth={800}
+          style={{
+            borderRadius: 2,
+            backgroundColor: "#fff5ef",
+          }}
+          mx="auto"
+        >
+          {children}
+        </Box>
+      </MosaicProvider>
+    </Box>
+  );
+};
+
+export default Header;