Started Save implementation

app/javascript/components/PageForm.tsx

@@ -1,7 +1,10 @@
 import React, { useEffect, useState, useRef } from "react";
 
+import { putJson, postJson } from "../lib/request";
 import { Locale, PageResource, TemplateConfig } from "../types";
+import useToastStore from "../stores/useToastStore";
 import usePage, { Author, StatusLabels } from "./PageForm/usePage";
+import pageParams from "./PageForm/pageParams";
 import Content from "./PageForm/Content";
 import Metadata from "./PageForm/Metadata";
 import Form from "./PageForm/Form";
@@ -60,10 +63,10 @@ export default function PageForm(props: PageFormProps) {
   });
 
   const { page, locale, locales, templates, templateConfig } = state;
-
   const tabs = tabsList(templates, templateConfig);
-
   const [tab, setTab] = useState(initialTab(tabs));
+  const errorToast = useToastStore((state) => state.error);
+  const noticeToast = useToastStore((state) => state.notice);
 
   useEffect(() => {
     const pageUrl = `/admin/${locale}/pages/` +
@@ -85,7 +88,20 @@ export default function PageForm(props: PageFormProps) {
 
   const handleSubmit = (evt: Event) => {
     evt.preventDefault();
-    console.log("submit");
+    let method = postJson;
+    let url = `/admin/${locale}/pages.json`;
+    const data = { page: pageParams(page) };
+
+    if (page.id) {
+      method = putJson;
+      url = `/admin/${locale}/pages/${page.id}.json`;
+    }
+
+    method(url, data).then(() => {
+      noticeToast("Your changes were saved");
+    }).catch(() => {
+      errorToast("An error occured while saving your changes.");
+    });
   };
 
   return (

app/javascript/components/PageForm/Options.tsx

@@ -95,6 +95,8 @@ export default function Options(props: OptionsProps) {
         </label>
       </LabelledField>
 
+        TODO: Categories
+
       <LabelledField htmlFor="page_template"
                      label="Template"
                      errors={errorsOn(page, "template")}>

app/javascript/components/PageForm/pageParams.ts

@@ -0,0 +1,24 @@
+import { PageResource } from "../../types";
+
+export default function pageParams(page: PageResource) {
+  // meta_image_id
+  // page_images
+  // page_files
+  return {
+    ...page.blocks,
+    starts_at: page.starts_at,
+    ends_at: page.ends_at,
+    all_day: page.all_day,
+    status: page.status,
+    published_at: page.published_at,
+    pinned: page.pinned,
+    template: page.template,
+    unique_name: page.unique_name,
+    feed_enabled: page.feed_enabled,
+    news_page: page.news_page,
+    user_id: page.user_id,
+    redirect_to: page.redirect_to,
+    serialized_tags: JSON.stringify(page.enabled_tags),
+    path_segment: page.path_segment
+  };
+}