Skip to content

Commit b4563dc

Browse files
glass-shipsglass-ships
committedNov 25, 2024
few more frontend updates, can't edit events
1 parent 73b5ae4 commit b4563dc

File tree

7 files changed

+379
-281
lines changed

7 files changed

+379
-281
lines changed
 

‎backend/src/main.rs

+273-166
Large diffs are not rendered by default.

‎frontend/src/api/event.ts

+22-8
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,15 @@ import { Event, EventResponse } from "@/api/model";
22
import { request } from "@/utils/request";
33
// import { host } from "@/api/index";
44

5+
const POSTHEADERS = {
6+
"Access-Control-Allow-Origin": "*",
7+
// "Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
8+
// "Access-Control-Request-Methods": "POST",
9+
"Access-Control-Allow-Headers": "*",
10+
"Content-Type": "application/json",
11+
Accept: "application/json",
12+
};
13+
514
export const getEvent = async (eventID: string) => {
615
const response = await request<Event>(`/${eventID}`);
716
return response;
@@ -10,18 +19,23 @@ export const getEvent = async (eventID: string) => {
1019
export const createEvent = async (event: Event) => {
1120
const options: RequestInit = {
1221
method: "POST",
13-
headers: {
14-
"Access-Control-Allow-Origin": "*",
15-
// "Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
16-
// "Access-Control-Request-Methods": "POST",
17-
"Access-Control-Allow-Headers": "*",
18-
"Content-Type": "application/json",
19-
Accept: "application/json",
20-
},
22+
headers: POSTHEADERS,
2123
body: JSON.stringify(event),
2224
mode: "cors",
2325
};
2426

2527
const response = await request<EventResponse>("/new", {}, options);
2628
return response;
2729
};
30+
31+
export const editEvent = async (key: string, event: Event) => {
32+
const options: RequestInit = {
33+
method: "POST",
34+
headers: POSTHEADERS,
35+
body: JSON.stringify(event),
36+
mode: "cors",
37+
};
38+
39+
const response = await request<EventResponse>(`/${key}/edit`, {}, options);
40+
return response;
41+
};

‎frontend/src/api/model.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ export type UserUsername = string;
33
export interface Event {
44
/** The name of the event */
55
name: string;
6-
/** A description of the event */
7-
desc?: string;
86
/** The date the event was created */
97
creation_date: number;
8+
/** A description of the event */
9+
desc?: string;
1010
/** The dates of the event */
1111
dates?: Date[];
1212
/** The users of the event */

‎frontend/src/components/EventForm.tsx

-28
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,6 @@
1-
// First pass at an event creation form
2-
// Basic implementation, no library usage yet
3-
import { FormEvent, useState } from "react";
4-
import classes from "./EventForm.module.css";
5-
import Textbox from "@/components/Textbox";
6-
import { Event, DateType, User } from "@/api/model";
7-
import { createEvent } from "@/api/event";
81
import { Link } from "react-router";
9-
// import Button from "@/components/Button";
102

113
export default function EventForm() {
12-
const [name, setName] = useState("");
13-
const [desc, setDesc] = useState("");
14-
const [dates, setDates] = useState("");
15-
16-
const onSubmit = (event: any) => {
17-
event.preventDefault();
18-
const dt = new Date().valueOf();
19-
const data: Event = {
20-
name: name,
21-
desc: desc,
22-
creation_date: dt,
23-
dates: [],
24-
// users: {},
25-
users: [],
26-
};
27-
console.log("Input data: ", data);
28-
const eventResponse = createEvent(data);
29-
console.log("Response: ", eventResponse);
30-
};
31-
324
return (
335
<div>
346
<h1>We're still working on it.</h1>

‎frontend/src/pages/Testbed.tsx

+82-41
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,18 @@ import {
1010
// DateType,
1111
// User
1212
} from "@/api/model";
13-
import { createEvent, getEvent } from "@/api/event";
13+
import { createEvent, getEvent, editEvent } from "@/api/event";
1414
// import Button from "@/components/Button";
15-
// import AppSection from "@/components/AppSection";
15+
import AppGrid from "@/components/AppGrid";
1616

1717
export default function Testbed() {
1818
const [name, setName] = useState("");
1919
const [desc, setDesc] = useState("");
2020
const [eventId, setEventId] = useState("");
21-
const [event, setEvent] = useState<Event>();
21+
const [eventKey, setEventKey] = useState("");
22+
const [foundEvent, setFoundEvent] = useState<Event>({ name: "", creation_date: 0 });
2223
const [eventResponse, setEventResponse] = useState<EventResponse>();
24+
const [editResponse, setEditResponse] = useState<EventResponse>();
2325
// const [dates, setDates] = useState<DateType[]>([]);
2426

2527
const onSubmit = async (event: React.FormEvent) => {
@@ -37,51 +39,90 @@ export default function Testbed() {
3739
};
3840

3941
const getEventById = async (event: React.FormEvent) => {
40-
// event.preventDefault();
41-
setEvent(await getEvent(eventId));
42+
event.preventDefault();
43+
// setFoundEvent(await getEvent(eventId));
44+
const response = await getEvent(eventId);
45+
console.debug({ response });
46+
47+
setFoundEvent(response);
4248
};
4349

50+
const updateEvent = async (event: React.FormEvent) => {
51+
event.preventDefault();
52+
const dt = Math.floor(new Date().valueOf() / 1000);
53+
const data: Event = {
54+
name: name,
55+
desc: desc,
56+
creation_date: dt,
57+
dates: [],
58+
users: [],
59+
};
60+
setEditResponse(await editEvent(eventKey, data));
61+
}
62+
4463
return (
4564
<main>
4665
<h1>WhenWorks Testbed</h1>
4766

48-
<div style={{ padding: "2rem" }}>
49-
<h2> Create a New Event </h2>
50-
<form className={classes.form} onSubmit={onSubmit}>
51-
<Textbox value={name} onChange={setName} placeholder="Event Name" />
52-
<Textbox type="textarea" value={desc} onChange={setDesc} placeholder="Event Description" />
53-
{/* DATE SELECTION GOES HERE */}
54-
<button className={classes.button} type="submit" onSubmit={(e) => onSubmit(e)}>
55-
Create event
56-
</button>
57-
</form>
58-
{eventResponse && (
59-
<div>
60-
<h3>Event created!</h3>
61-
<p>Key: {eventResponse.key}</p>
62-
<p>UID: {eventResponse.uid}</p>
63-
</div>
64-
)}
65-
</div>
67+
<AppGrid>
68+
<div style={{ padding: "2rem" }}>
69+
<h2> Create a New Event </h2>
70+
<form className={classes.form} onSubmit={onSubmit}>
71+
<Textbox value={name} onChange={setName} placeholder="Event Name" />
72+
<Textbox type="textarea" value={desc} onChange={setDesc} placeholder="Event Description" />
73+
{/* DATE SELECTION GOES HERE */}
74+
<button className={classes.button} type="submit" onSubmit={onSubmit}>
75+
Create event
76+
</button>
77+
</form>
78+
{eventResponse && (
79+
<div>
80+
<h3>Event created!</h3>
81+
<p>Key: {eventResponse.key}</p>
82+
<p>UID: {eventResponse.uid}</p>
83+
</div>
84+
)}
85+
</div>
86+
87+
<div style={{ padding: "2rem" }}>
88+
<h2>Get Event</h2>
89+
<form className={classes.form} onSubmit={getEventById}>
90+
<Textbox value={eventId} onChange={setEventId} placeholder="Event ID" />
91+
<button className={classes.button} type="submit">
92+
Get event
93+
</button>
94+
</form>
95+
{foundEvent.name && (
96+
<div>
97+
<h3>Event found!</h3>
98+
<p>Event: {foundEvent.name}</p>
99+
<p>Creation Date: {foundEvent.creation_date}</p>
100+
<p>Description: {foundEvent.desc}</p>
101+
<p>Dates: {foundEvent.dates?.map((date) => date.toString())}</p>
102+
<p>Users: {foundEvent.users?.map((user) => user.username)}</p>
103+
</div>
104+
)}
105+
</div>
66106

67-
<div style={{ padding: "2rem" }}>
68-
<h2>Get Event</h2>
69-
<form className={classes.form}>
70-
<Textbox value={eventId} onChange={setEventId} placeholder="Event ID" />
71-
<button className={classes.button} type="submit" onSubmit={getEventById}>
72-
Get event
73-
</button>
74-
</form>
75-
{event && (
76-
<div>
77-
<h3>Event: {event.name}</h3>
78-
<p>Creation Date: {event.creation_date}</p>
79-
<p>Description: {event.desc}</p>
80-
<p>Dates: {event.dates?.map((date) => date.toString())}</p>
81-
<p>Users: {event.users?.map((user) => user.username)}</p>
82-
</div>
83-
)}
84-
</div>
107+
<div style={{ padding: "2rem" }}>
108+
<h2>Edit Event</h2>
109+
<form className={classes.form} onSubmit={updateEvent}>
110+
<Textbox value={eventKey} onChange={setEventKey} placeholder="Event Key" />
111+
<Textbox value={name} onChange={setName} placeholder="New Event Name" />
112+
<Textbox type="textarea" value={desc} onChange={setDesc} placeholder="New Event Description" />
113+
<button className={classes.button} type="submit">
114+
Edit event
115+
</button>
116+
</form>
117+
{editResponse && (
118+
<div>
119+
<h3>Event edited!</h3>
120+
<p>Key: {editResponse.key}</p>
121+
<p>UID: {editResponse.uid}</p>
122+
</div>
123+
)}
124+
</div>
125+
</AppGrid>
85126
</main>
86127
);
87128
}

‎frontend/src/utils/db_utils.ts

-33
This file was deleted.

‎frontend/src/utils/request.ts

-3
Original file line numberDiff line numberDiff line change
@@ -58,15 +58,12 @@ export const request = async <Response>(
5858

5959
/** sort params for consistency */
6060
paramsObject.sort();
61-
console.debug({ paramsObject });
6261

6362
/** assemble url to query */
6463
// const url = api + path;
6564
const paramsString = paramsObject.toString() ? "?" + paramsObject.toString() : "";
66-
console.log({ paramsString });
6765

6866
const url = api + suffix + path + paramsString;
69-
console.log({ url });
7067

7168
if (newTab) window.open(url);
7269

0 commit comments

Comments
 (0)
Please sign in to comment.