From 6aa76f15e11c065225bc2d21ae85e76a5a571296 Mon Sep 17 00:00:00 2001 From: Dennis Wang <66754085+denniwang@users.noreply.github.com> Date: Fri, 7 Feb 2025 21:49:37 -0500 Subject: [PATCH] file upload page --- app/layout.tsx | 29 +------------ app/page.tsx | 7 +--- app/transcript/page.tsx | 10 +++++ components/transcript-upload.tsx | 61 ++++++++++++++++++++++++++++ package-lock.json | 70 +++++++++++++++++++++++++++++++- package.json | 3 +- 6 files changed, 145 insertions(+), 35 deletions(-) create mode 100644 app/transcript/page.tsx create mode 100644 components/transcript-upload.tsx diff --git a/app/layout.tsx b/app/layout.tsx index 8f6dcb7..67191ab 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -31,42 +31,17 @@ export default function RootLayout({ return ( - +
-
{children}

- Powered by{" "} - - Supabase - + Built for HackBeanPot 2025 with 💖

-
diff --git a/app/page.tsx b/app/page.tsx index 9144694..8417a04 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,4 +1,5 @@ import Hero from "@/components/hero"; +import TranscriptUpload from "@/components/transcript-upload"; import ConnectSupabaseSteps from "@/components/tutorial/connect-supabase-steps"; import SignUpUserSteps from "@/components/tutorial/sign-up-user-steps"; import { hasEnvVars } from "@/utils/supabase/check-env-vars"; @@ -6,11 +7,7 @@ import { hasEnvVars } from "@/utils/supabase/check-env-vars"; export default async function Home() { return ( <> - -
-

Next steps

- {hasEnvVars ? : } -
+

Home

); } diff --git a/app/transcript/page.tsx b/app/transcript/page.tsx new file mode 100644 index 0000000..82fe0d1 --- /dev/null +++ b/app/transcript/page.tsx @@ -0,0 +1,10 @@ +import TranscriptUpload from "@/components/transcript-upload"; + +export default function TranscriptPage() { + return ( +
+

Update Transcript

+ +
+ ) +} diff --git a/components/transcript-upload.tsx b/components/transcript-upload.tsx new file mode 100644 index 0000000..ad4e483 --- /dev/null +++ b/components/transcript-upload.tsx @@ -0,0 +1,61 @@ +"use client"; +import { useState, useCallback } from "react"; +import { useDropzone } from "react-dropzone"; + +export default function TranscriptUpload() { + const [files, setFiles] = useState([]); + + const onDrop = useCallback((acceptedFiles: File[]) => { + setFiles(acceptedFiles); + + acceptedFiles.forEach((file) => { + if (file.type === "text/plain") { + const reader = new FileReader(); + reader.onload = () => { + const content = reader.result as string; + console.log(`File: ${file.name}\nContent:\n${content}`); + }; + reader.readAsText(file); + } else { + console.log(`File: ${file.name} is not a valid text file`); + } + }); + }, []); + + const { getRootProps, getInputProps, isDragActive } = useDropzone({ + onDrop, + accept: { + "text/plain": [".txt"], + }, + }); + + return ( +
+ + {isDragActive ? ( +

Drop the files here ...

+ ) : ( +

Drag 'n' drop some text files here, or click to select files

+ )} + {files.length > 0 && ( +
+

Uploaded files:

+
    + {files.map((file) => ( +
  • + {file.name} +
    • + ))} +
+
+ )} +
+ ); +} diff --git a/package-lock.json b/package-lock.json index db5ed3c..a1087ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,8 @@ "next-themes": "^0.4.3", "prettier": "^3.3.3", "react": "19.0.0", - "react-dom": "19.0.0" + "react-dom": "19.0.0", + "react-dropzone": "^14.3.5" }, "devDependencies": { "@types/node": "22.10.2", @@ -1414,6 +1415,14 @@ "node": ">=10" } }, + "node_modules/attr-accept": { + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz", + "integrity": "sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==", + "engines": { + "node": ">=4" + } + }, "node_modules/autoprefixer": { "version": "10.4.20", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz", @@ -1797,6 +1806,17 @@ "reusify": "^1.0.4" } }, + "node_modules/file-selector": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-2.1.2.tgz", + "integrity": "sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==", + "dependencies": { + "tslib": "^2.7.0" + }, + "engines": { + "node": ">= 12" + } + }, "node_modules/fill-range": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", @@ -2014,6 +2034,11 @@ "jiti": "bin/jiti.js" } }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + }, "node_modules/lilconfig": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz", @@ -2032,6 +2057,17 @@ "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", "dev": true }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, "node_modules/lru-cache": { "version": "10.4.3", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", @@ -2235,7 +2271,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -2476,6 +2511,16 @@ "url": "https://github.com/prettier/prettier?sponsor=1" } }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -2515,6 +2560,27 @@ "react": "^19.0.0" } }, + "node_modules/react-dropzone": { + "version": "14.3.5", + "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.3.5.tgz", + "integrity": "sha512-9nDUaEEpqZLOz5v5SUcFA0CjM4vq8YbqO0WRls+EYT7+DvxUdzDPKNCPLqGfj3YL9MsniCLCD4RFA6M95V6KMQ==", + "dependencies": { + "attr-accept": "^2.2.4", + "file-selector": "^2.1.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">= 10.13" + }, + "peerDependencies": { + "react": ">= 16.8 || 18.0.0" + } + }, + "node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/react-remove-scroll": { "version": "2.6.3", "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz", diff --git a/package.json b/package.json index 1e3e912..fb7799f 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,8 @@ "next-themes": "^0.4.3", "prettier": "^3.3.3", "react": "19.0.0", - "react-dom": "19.0.0" + "react-dom": "19.0.0", + "react-dropzone": "^14.3.5" }, "devDependencies": { "@types/node": "22.10.2",