From abe17d38bcac30bb826cae01b7754e1c3c17c02a Mon Sep 17 00:00:00 2001 From: Mihovil Ilakovac Date: Mon, 15 Jul 2024 16:25:55 +0200 Subject: [PATCH] Updates Hackathon example app to 0.14.0 (#2156) --- examples/hackathon-submissions/main.wasp | 18 +-------------- examples/hackathon-submissions/schema.prisma | 21 +++++++++++++++++ .../src/components/Navbar.tsx | 4 ++-- .../src/components/Projects.tsx | 4 ++-- .../src/components/SubmissionForm.tsx | 23 ++++++++++--------- .../hackathon-submissions/src/projects.js | 2 +- examples/hackathon-submissions/tsconfig.json | 5 ++++ 7 files changed, 44 insertions(+), 33 deletions(-) create mode 100644 examples/hackathon-submissions/schema.prisma diff --git a/examples/hackathon-submissions/main.wasp b/examples/hackathon-submissions/main.wasp index dd9c82219..d3aa9a08e 100644 --- a/examples/hackathon-submissions/main.wasp +++ b/examples/hackathon-submissions/main.wasp @@ -1,26 +1,10 @@ app hackathonBetaSubmissions { wasp: { - version: "^0.13.0" - }, - db: { - system: PostgreSQL + version: "^0.14.0" }, title: "Hackathon Submissions" } -entity Submission {=psl - name String @id @unique - email String @unique - github String - description String - twitter String? - country String? - website String? - image String? - approved Boolean @default(false) - createdAt DateTime @default(now()) -psl=} - route RootRoute { path: "/", to: MainPage } page MainPage { component: import Main from "@src/MainPage.tsx" diff --git a/examples/hackathon-submissions/schema.prisma b/examples/hackathon-submissions/schema.prisma new file mode 100644 index 000000000..c944b0f93 --- /dev/null +++ b/examples/hackathon-submissions/schema.prisma @@ -0,0 +1,21 @@ +datasource db { + provider = "postgresql" + url = env("DATABASE_URL") +} + +generator client { + provider = "prisma-client-js" +} + +model Submission { + name String @id @unique + email String @unique + github String + description String + twitter String? + country String? + website String? + image String? + approved Boolean @default(false) + createdAt DateTime @default(now()) +} diff --git a/examples/hackathon-submissions/src/components/Navbar.tsx b/examples/hackathon-submissions/src/components/Navbar.tsx index 1f83467fb..e11530547 100644 --- a/examples/hackathon-submissions/src/components/Navbar.tsx +++ b/examples/hackathon-submissions/src/components/Navbar.tsx @@ -21,7 +21,7 @@ const Navbar = () => { function scrollToTargetAdjusted() { var element = document.getElementById('submission'); var headerOffset = 75; - var elementPosition = element.getBoundingClientRect().top; + var elementPosition = element!.getBoundingClientRect().top; var offsetPosition = elementPosition + window.pageYOffset - headerOffset; window.scrollTo({ @@ -42,7 +42,7 @@ const Navbar = () => { ); - const SocialIcon = ({ Icon, url }) => ( + const SocialIcon = ({ Icon, url }: any) => ( {
{status === 'success' && projects.length ? ( - projects.map((project) => ( + projects.map((project: any) => (
{ />

- + {project.name} diff --git a/examples/hackathon-submissions/src/components/SubmissionForm.tsx b/examples/hackathon-submissions/src/components/SubmissionForm.tsx index bfb6771cb..7767043db 100644 --- a/examples/hackathon-submissions/src/components/SubmissionForm.tsx +++ b/examples/hackathon-submissions/src/components/SubmissionForm.tsx @@ -1,5 +1,5 @@ import { submitProject } from "wasp/client/operations"; -import React, { useState } from 'react'; +import React, { ChangeEvent, FormEvent, useState } from 'react'; export type Submission = { name: string; @@ -17,13 +17,14 @@ const SubmissionForm = () => { const [isUploading, setIsUploading] = useState(false); const [imageLink, setImageLink] = useState(''); - const onFileUpload = async (event) => { + const onFileUpload = async (event: ChangeEvent) => { setIsUploading(true); const clientId = 'd4ecb4220cf055b' const auth = 'Client-ID ' + clientId; const formData = new FormData(); - formData.append('image', event.target?.files[0]); + const files = event.target?.files![0] + formData.append('image', files); try { const imgur = await fetch('https://api.imgur.com/3/upload', { @@ -40,7 +41,7 @@ const SubmissionForm = () => { if (!json.success) { throw new Error('Image upload failed'); } - setFile(event.target.files[0].name); + setFile(files.name); setImageLink(json.data.link); } catch (error) { console.error('error uploading image'); @@ -48,17 +49,18 @@ const SubmissionForm = () => { setIsUploading(false); }; - const handleSubmit = async (event) => { + const handleSubmit = async (event: FormEvent) => { event.preventDefault(); - const data = new FormData(event.target); + const target = event.target as HTMLFormElement + const data = new FormData(target); const value = Object.fromEntries(data.entries()); delete value['file-upload']; value.image = imageLink; try { - await submitProject(value as Submission); + await submitProject(value) alert('Project submitted successfully! It will be visible once it is approved.'); - event.target.reset(); + target.reset(); } catch (e) { console.error('Error while submitting project', e); alert('Error while submitting project'); @@ -190,9 +192,8 @@ const SubmissionForm = () => {
{ return newProject; }; -export const getProjects = async (args, context) => { +export const getProjects = async (_args, context) => { return context.entities.Submission.findMany({ where: { approved: true, diff --git a/examples/hackathon-submissions/tsconfig.json b/examples/hackathon-submissions/tsconfig.json index b9b9412d9..4932b229a 100644 --- a/examples/hackathon-submissions/tsconfig.json +++ b/examples/hackathon-submissions/tsconfig.json @@ -5,6 +5,11 @@ // compiler. Proper TS compiler configuration in Wasp is coming soon :) { "compilerOptions": { + "module": "esnext", + "target": "esnext", + // We're bundling all code in the end so this is the most appropriate option, + // it's also important for autocomplete to work properly. + "moduleResolution": "bundler", // JSX support "jsx": "preserve", "strict": true,