componentised timeout applied to logged in pages

components/newappeal/createCase.js

@@ -10,6 +10,7 @@ import {
     setAppealTypeTitle,
 } from "../../store/appealType/action";
 import { getFormCollectionByID } from "../utils";
+import FileUpload from "./fileupload";
 
 let CreateCase = (props) => {
     // useEffect(() => {
@@ -238,7 +239,6 @@ let CreateCase = (props) => {
                 label={t("newappeal:select-lpa-label")}
                 errorMsg={t("newappeal:select-lpa-label-error-msg")}
             />
-
             <Field
                 name="appealTypes"
                 component={RenderAppealTypeList}
@@ -247,7 +247,7 @@ let CreateCase = (props) => {
                 label={t("newappeal:select-appeal-type-label")}
                 errorMsg={t("newappeal:select-appeal-type-label-error-msg")}
             />
-
+            <FileUpload />
             <button
                 type="submit"
                 className="govuk-button"

components/newappeal/fileupload.js

@@ -0,0 +1,42 @@
+import { useDropzone } from "react-dropzone";
+import Link from "next/link";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import jsonpath from "jsonpath";
+import _ from "lodash";
+
+const FileUpload = () => {
+    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
+    const files = acceptedFiles.map((file) => (
+        <li key={file.path}>
+            {file.path} - {file.size} bytes
+        </li>
+    ));
+    return (
+        <div className="govuk-grid-column-full">
+            <div className="govuk-grid-row">
+                <div className="govuk-form-group">
+                    <section className="container">
+                        <div
+                            {...getRootProps({
+                                className: "dropzone",
+                            })}
+                        >
+                            <input {...getInputProps()} />
+                            <p>
+                                Drag and drop files here or click to select
+                                files
+                            </p>
+                        </div>
+                        <aside>
+                            <h4>Files</h4>
+                            <ul>{files}</ul>
+                        </aside>
+                    </section>
+                </div>
+            </div>
+        </div>
+    );
+};
+export default FileUpload;