feat: fill form by url

italia · Nov 12, 2024 · fdbf36d · fdbf36d
1 parent 1ed5346
commit fdbf36d
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 20 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "design-react-kit": "^5.0.4",
     "i18next": "^23.2.2",
     "i18next-browser-languagedetector": "^7.2.0",
+    "js-yaml": "^4.1.0",
     "locale-codes": "^1.3.1",
     "lodash": "^4.17.21",
     "react": "^18.3.1",
@@ -67,6 +68,7 @@
     "@swc/jest": "^0.2.26",
     "@testing-library/jest-dom": "^5.16.5",
     "@types/golang-wasm-exec": "^1.15.0",
+    "@types/js-yaml": "^4.0.9",
     "@types/lodash": "^4.14.195",
     "@types/node": "^20.3.1",
     "@types/react": "^18.3.3",

diff --git a/src/app/components/Editor.tsx b/src/app/components/Editor.tsx
@@ -35,6 +35,34 @@ import EditorContractors from "./EditorContractors";
 import linter from "../linter";
 
 import useFormPersist from "react-hook-form-persist";
+import yaml from 'js-yaml'
+
+
+async function readStreamAsText<T extends ArrayBuffer>(readableStream: ReadableStream<T>) {
+  const reader = readableStream.getReader();
+  let result = '';
+  const decoder = new TextDecoder();
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    result += decoder.decode(value, { stream: true });
+  }
+
+  result += decoder.decode(); // Finalize decoding
+  return result;
+}
+
+const serializeYml = (yamlString: string) => {
+  if (!yamlString) {
+    throw new Error('serializeYml: yamlString is a falsy value')
+  }
+  try {
+    return yaml.load(yamlString)
+  } catch {
+    throw new Error('serializeYml: error on load')
+  }
+}
 
 const resolver: Resolver<PublicCode> = async (values) => {
   const res = await validator(JSON.stringify(values), "main");
@@ -80,6 +108,7 @@ export default function Editor() {
   });
   const { t } = useTranslation();
   const { getValues, handleSubmit, watch, setValue, reset } = methods;
+  const [, setImportedValue] = useState<PublicCode | undefined>(undefined)
 
   useFormPersist("form-values", {
     watch,
@@ -104,6 +133,26 @@ export default function Editor() {
     }
   );
 
+  const loadRemoteYamlHandler = async (url: string) => {
+    console.log('loadRemoteYaml', url)
+
+    const publicCode = await fetch(url)
+      .then(res => res.body)
+      .then(res => res ? readStreamAsText(res) : '')
+      .then(res => serializeYml(res) as PublicCode)
+      .then(res => {
+        console.log(res)
+        return res;
+      })
+
+    setImportedValue(publicCode)
+
+    Object.keys(publicCode).forEach((value) => {
+      const key = value as keyof PublicCode
+      setValue(key as keyof PublicCode, publicCode[key as keyof PublicCode])
+    });
+  }
+
   return (
     <Container>
       <Head />
@@ -265,7 +314,7 @@ export default function Editor() {
       <Footer
         reset={() => reset()}
         submit={() => undefined}
-        loadRemoteYaml={() => undefined}
+        loadRemoteYaml={(url) => loadRemoteYamlHandler(url)}
         trigger={() => submit()}
         languages={languages}
         yamlLoaded

diff --git a/src/app/components/Foot.tsx b/src/app/components/Foot.tsx
@@ -20,14 +20,16 @@ export const Footer = (props: Props): JSX.Element => {
   const [uploadOpen, setUploadOpen] = useState(false);
   const [isModalVisible, setModalVisibility] = useState(false);
   const [url, setUrl] = useState("");
-
+//https://raw.githubusercontent.com/italia/design-angular-kit/refs/heads/main/publiccode.yml
   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
+    console.log('handleSubmit', event)
     const {
-      url: { value },
+      [0]: { value },
     } = event.target as typeof event.target & {
-      url: { value?: string };
+      [0]: { value?: string };
     };
+    console.log(value)
     if (!value || !validator.isURL(value)) {
       notify(t("editor.notvalidurl"), { state: "error" });
       return;
@@ -43,6 +45,7 @@ export const Footer = (props: Props): JSX.Element => {
   };
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    console.log(event);
     const { value } = event.target;
     setUrl(value);
   };

diff --git a/src/app/components/UploadModal.tsx b/src/app/components/UploadModal.tsx
@@ -40,21 +40,26 @@ export default function UploadModal({
         Upload an existing publiccode.yml
       </ModalHeader>
       <ModalBody>
-        <Row>
-          <p>{t("editor.browsefile")}</p>
-        </Row>
-        <Input
-          className="d-none"
-          innerRef={inputRef}
-          type="file"
-          accept=".yml, .yaml"
-        />
+        <Form inline onSubmit={onSubmit}>
 
-        <Button color="primary" onClick={() => inputRef.current?.click()}>
-          <Icon color="white" icon="it-upload" />
-          {t("editor.browse")}
-        </Button>
+          <Row>
+            <p>{t("editor.browsefile")}</p>
+          </Row>
+          <Input
+            className="d-none"
+            innerRef={inputRef}
+            type="file"
+            accept=".yml, .yaml"
+          />
 
+          <Button color="primary" onClick={() => inputRef.current?.click()}>
+            <Icon color="white" icon="it-upload" />
+            {t("editor.browse")}
+          </Button>
+          <Button color="primary" size="xs" type="submit">
+            <Icon color="white" icon="it-upload" size="xs" />
+          </Button>
+        </Form>
         <Row className="mt-3">
           <p>{t("editor.pastefile")}</p>
         </Row>