mirror of
https://github.com/wasp-lang/wasp.git
synced 2024-12-25 01:52:00 +03:00
Updates Hackathon example app to 0.14.0 (#2156)
This commit is contained in:
Mihovil Ilakovac
GitHub
parent
5a92e37345
commit
abe17d38bc
@ -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"
|
||||
|
||||
21
examples/hackathon-submissions/schema.prisma
Normal file
21
examples/hackathon-submissions/schema.prisma
Normal file
@ -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())
|
||||
}
|
||||
@ -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 = () => {
|
||||
</div>
|
||||
);
|
||||
|
||||
const SocialIcon = ({ Icon, url }) => (
|
||||
const SocialIcon = ({ Icon, url }: any) => (
|
||||
<a
|
||||
href={url}
|
||||
target='_blank'
|
||||
|
||||
@ -15,7 +15,7 @@ const Projects = () => {
|
||||
</h2>
|
||||
<div className='mt-12 gap-6 lg:grid lg:grid-cols-3'>
|
||||
{status === 'success' && projects.length ? (
|
||||
projects.map((project) => (
|
||||
projects.map((project: any) => (
|
||||
<div key={project.name} className='group relative'>
|
||||
<div className='relative h-80 w-full overflow-hidden rounded-lg bg-white group-hover:opacity-75 sm:aspect-w-2 sm:aspect-h-1 sm:h-64 lg:aspect-w-1 lg:aspect-h-1'>
|
||||
<img
|
||||
@ -25,7 +25,7 @@ const Projects = () => {
|
||||
/>
|
||||
</div>
|
||||
<h3 className='mt-6 text-base font-semibold text-neutral-700'>
|
||||
<a href={!!project.website ? '//' + project.website : null} target='_blank' rel='noreferrer'>
|
||||
<a href={!!project.website ? '//' + project.website : undefined} target='_blank' rel='noreferrer'>
|
||||
<span className='absolute inset-0' />
|
||||
{project.name}
|
||||
</a>
|
||||
|
||||
@ -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<HTMLInputElement>) => {
|
||||
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 = () => {
|
||||
<div className='col-span-6'>
|
||||
<label className='block text-sm font-medium text-gray-700'>Cover photo</label>
|
||||
<div
|
||||
className={`${
|
||||
isUploading && 'pointer-events-none opacity-35'
|
||||
} mt-1 flex justify-center rounded-md border-2 border-dashed border-gray-300 px-6 pt-5 pb-6`}
|
||||
className={`${isUploading && 'pointer-events-none opacity-35'
|
||||
} mt-1 flex justify-center rounded-md border-2 border-dashed border-gray-300 px-6 pt-5 pb-6`}
|
||||
>
|
||||
<div className={`${isUploading && 'animate-pulse'} space-y-1 text-center`}>
|
||||
<svg
|
||||
|
||||
@ -6,7 +6,7 @@ export const submitProject = async (project, context) => {
|
||||
return newProject;
|
||||
};
|
||||
|
||||
export const getProjects = async (args, context) => {
|
||||
export const getProjects = async (_args, context) => {
|
||||
return context.entities.Submission.findMany({
|
||||
where: {
|
||||
approved: true,
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user