Allow adding schemas

src/pages/issuer/tabs/schemas.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react"
-import { getSchemas } from "../../../utils"
+import { getSchemas, addSchema } from "../../../utils"
 import { DataGrid, GridColDef } from '@mui/x-data-grid';
+import { TextField, Button } from "@mui/material"
 
 
 const columns: GridColDef[] = [
@@ -9,16 +10,26 @@ const columns: GridColDef[] = [
 ];
 
 export function SchemasTab() {
-    const [schemas, setSchemas] = useState<string[]>([])
+    const [schemas, setSchemas] = useState<string[]>([]);
+    const [newSchema, setNewSchema] = useState<string>("");
 
     const fetchData = async () => {
         const res = await getSchemas()
         setSchemas(res.map(x => atob(x)))
     }
 
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setNewSchema(event.target.value);
+    }
+
+    const applyAddSchema = () => {
+        addSchema(btoa(newSchema)).then(() => { fetchData(); })
+    }
+
     useEffect(() => { fetchData() }, [])
 
     return (
+      <>
         <div style={{ width: '100%' }}>
           <DataGrid
             rows={schemas.map((x, i) => ({ id: i, schema: x }))}
@@ -32,5 +43,23 @@ export function SchemasTab() {
             checkboxSelection
           />
         </div>
-      );
+        <br/>
+        <div><h2><b>Add new schema</b></h2></div>
+        <TextField
+            id="toadd"
+            variant="outlined"
+            multiline
+            inputProps={{ style: { resize: "both" } }}
+            label="Schema"
+            value={newSchema}
+            onChange={handleChange}
+        />
+        <Button
+            variant="contained"
+            onClick={applyAddSchema}
+        >
+            Add
+        </Button>
+      </>
+    );
 }

src/utils/api.ts

@@ -26,6 +26,17 @@ export async function getSchemas(): Promise<string[]> {
     return result.filter(x => x.slice(0, 4) != "test")
 }
 
+export async function addSchema(schema: string): Promise<boolean> {
+    return (await fetch(`${getBackendUrl()}/issuer/schemas`, {
+        method: "POST",
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ schema, })
+    })).json()
+}
+
 export async function getCredentials(userId: number): Promise<CredentialInfo[]> {
     return (await fetch(`${getBackendUrl()}/issuer/credentials/${userId}`)).json()
 }