Add kinds of improvements to event create page

src/models/Event.ts

@@ -19,3 +19,13 @@ export async function getEvents(): Promise<Event[]> {
     throw err;
   }
 }
+
+export async function createEvent(data): Promise<void> {
+  try {
+    const resp = await axios.post(url, data);
+    return resp.data["results"];
+  } catch (err) {
+    console.error(err);
+    throw err;
+  }
+}

src/models/Tag.ts

@@ -0,0 +1,20 @@
+import axios from "axios";
+
+const url = `${process.env.API_URL}/tags/`;
+
+export interface Tag {
+  id: number;
+  name: string;
+  slug: string;
+  icon: string;
+}
+
+export async function getTags(): Promise<Tag[]> {
+  try {
+    const resp = await axios.get(url);
+    return resp.data["results"];
+  } catch (err) {
+    console.error(err);
+    throw err;
+  }
+}

src/pages/EventCreatePage/EventCreatePage.scss

@@ -1,3 +1,5 @@
+@import "../../assets/scss/globals";
+
 .event-create-page {
   width: 100%;
 
@@ -21,4 +23,13 @@
     font-weight: bold;
     margin: 0.5rem 0;
   }
+
+  button {
+    background-color: $blue;
+    color: $white;
+    padding: 0.5rem 1rem;
+    border: none;
+    outline: none;
+    cursor: pointer;
+  }
 }

src/pages/EventCreatePage/EventCreatePage.tsx

@@ -3,14 +3,68 @@ import Helmet from "react-helmet";
 import "./EventCreatePage.scss";
 import { isAuthenticated } from "../../auth";
 import Form from "react-jsonschema-form";
+import { Tag, getTags } from "../../models/Tag";
+import { createEvent } from "../../models/Event";
 
-export interface EventCreatePageProps {}
+export interface EventCreatePageProps {
+  history: {
+    push: (to: string) => void;
+  };
+}
 export interface EventCreatePageState {
+  tags: Tag[];
+  error?: string;
 }
 
 class EventCreatePage extends React.Component<EventCreatePageProps, EventCreatePageState> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      tags: [],
+    };
+
+    this.fetchTags();
+  }
+
+  fetchTags = async () => {
+    const getTagsPromise = getTags();
+    try {
+      const tags = await getTagsPromise;
+      this.setState({
+        tags,
+      });
+      return getTagsPromise;
+    } catch (err) {
+      this.setState({
+        error: String(err),
+      });
+    }
+  }
+
+  onSubmit = async (data) => {
+    console.log("submitted, data:");
+    console.log(data);
+
+    const { history } = this.props;
+
+    try {
+      const payload = data.formData;
+      await createEvent(payload);
+      history.push("/admin/events");
+    } catch (err) {
+      this.setState({
+        error: String(err),
+      });
+    }
+  }
+
+  onError = (data) => {
+    console.error("error, data:");
+    console.log(data);
+  }
 
   render() {
+    const { tags, error } = this.state;
     const schema = {
       title: "New Event",
       type: "object",
@@ -18,7 +72,7 @@ class EventCreatePage extends React.Component<EventCreatePageProps, EventCreateP
       properties: {
         title: {
           type: "string",
-          title: "Name",
+          title: "Title",
           default: ""
         },
         location: {
@@ -26,17 +80,13 @@ class EventCreatePage extends React.Component<EventCreatePageProps, EventCreateP
           title: "Location",
           default: "",
         },
-        multipleChoicesList: {
+        tags: {
           type: "array",
-          title: "Event type",
+          title: "Event tags",
           items: {
-            type: "string",
-            enum: [
-              "Virallinen",
-              "Fuksit",
-              "Opinnot",
-              "Urheilu"
-            ]
+            type: "number",
+            enum: tags.map(t => t.id),
+            enumNames: tags.map(t => t.name),
           },
           uniqueItems: true
         },
@@ -51,8 +101,9 @@ class EventCreatePage extends React.Component<EventCreatePageProps, EventCreateP
         <Form schema={schema}
               idPrefix="rjsf"
               onChange={() => console.log("changed")}
-              onSubmit={() => console.log("submitted")}
-              onError={() => console.log("error")} />
+              onSubmit={this.onSubmit}
+              onError={this.onError} />
+        { error && <div className="error">{error}</div> }
       </div>
     );
   }