pages_core 3.15.4 → 3.15.5

data/app/javascript/components/PageForm/Dates.tsx

@@ -1,16 +1,8 @@
-import React from "react";
-
-import * as PageEditor from "../../types/PageEditor";
-
 import DateRangeSelect from "../DateRangeSelect";
+import usePageFormContext from "./usePageFormContext";
 
-interface Props {
-  state: PageEditor.State;
-  dispatch: (action: PageEditor.Action) => void;
-}
-
-export default function Dates(props: Props) {
-  const { state, dispatch } = props;
+export default function Dates() {
+  const { state, dispatch } = usePageFormContext();
   const { datesEnabled, page } = state;
 
   const toggleAllDay = () => {

data/app/javascript/components/PageForm/Files.tsx

@@ -1,15 +1,13 @@
-import React from "react";
-
 import * as Attachments from "../../types/Attachments";
 import { Locale } from "../../types";
 
 import List from "../Attachments/List";
 
-interface Props {
+type Props = {
   locale: string;
   locales: { [index: string]: Locale };
   state: Attachments.State;
-}
+};
 
 export default function Files(props: Props) {
   const { locale, locales, state } = props;

data/app/javascript/components/PageForm/Form.tsx

@@ -1,12 +1,6 @@
-import React from "react";
-
 import { csrfToken } from "../../lib/request";
 import * as PageEditor from "../../types/PageEditor";
-
-interface FormProps {
-  state: PageEditor.State;
-  children: React.ReactNode;
-}
+import usePageFormContext from "./usePageFormContext";
 
 function pageUrl(state: PageEditor.State): string {
   if (state.page.id) {
@@ -16,8 +10,8 @@ function pageUrl(state: PageEditor.State): string {
   }
 }
 
-export default function Form(props: FormProps) {
-  const { state, children } = props;
+export default function Form({ children }: React.PropsWithChildren) {
+  const { state } = usePageFormContext();
   const { page } = state;
 
   return (

data/app/javascript/components/PageForm/Images.tsx

@@ -1,15 +1,13 @@
-import React from "react";
-
 import { GridState } from "../../types/Images";
 import { Locale } from "../../types";
 
 import Grid from "../ImageGrid/Grid";
 
-interface Props {
+type Props = {
   locale: string;
   locales: { [index: string]: Locale };
   state: GridState;
-}
+};
 
 export default function Images(props: Props) {
   return (

data/app/javascript/components/PageForm/LocaleLinks.tsx

@@ -1,14 +1,7 @@
-import React from "react";
+import usePageFormContext from "./usePageFormContext";
 
-import * as PageEditor from "../../types/PageEditor";
-
-interface Props {
-  state: PageEditor.State;
-  dispatch: (action: PageEditor.Action) => void;
-}
-
-export default function LocaleLinks(props: Props) {
-  const { state, dispatch } = props;
+export default function LocaleLinks() {
+  const { state, dispatch } = usePageFormContext();
   const { locale, locales } = state;
 
   const handleClick = (newLocale: string) => (evt: React.MouseEvent) => {
@@ -17,7 +10,7 @@ export default function LocaleLinks(props: Props) {
   };
 
   if (!locales) {
-    return "";
+    return;
   }
 
   return (

data/app/javascript/components/PageForm/Metadata.tsx

@@ -1,22 +1,17 @@
-import React from "react";
+import { Fragment } from "react";
 
-import * as PageEditor from "../../types/PageEditor";
 import * as Pages from "../../types/Pages";
 import { MaybeLocalizedValue } from "../../types";
 
-import { blockValue, errorsOn } from "./usePage";
+import { blockValue, errorsOn } from "./utils";
+import usePageFormContext from "./usePageFormContext";
 import Block from "./Block";
 import PathSegment from "./PathSegment";
 import LabelledField from "../LabelledField";
 import ImageUploader from "../ImageUploader";
 
-interface Props {
-  state: PageEditor.State;
-  dispatch: (action: PageEditor.Action) => void;
-}
-
-export default function Metadata(props: Props) {
-  const { state, dispatch } = props;
+export default function Metadata() {
+  const { state, dispatch } = usePageFormContext();
 
   const { page, locale, locales, inputDir, templateConfig } = state;
 
@@ -29,8 +24,8 @@ export default function Metadata(props: Props) {
   };
 
   return (
-    <React.Fragment>
-      <PathSegment state={state} dispatch={dispatch} />
+    <Fragment>
+      <PathSegment />
       <LabelledField
         htmlFor="page_meta_image_id"
         label="Image"
@@ -62,6 +57,6 @@ export default function Metadata(props: Props) {
           value={blockValue(state, b)}
         />
       ))}
-    </React.Fragment>
+    </Fragment>
   );
 }

data/app/javascript/components/PageForm/Options.tsx

@@ -1,20 +1,18 @@
-import React, { useState, ChangeEvent } from "react";
+import { Fragment, useState, ChangeEvent } from "react";
 
-import * as PageEditor from "../../types/PageEditor";
 import * as Pages from "../../types/Pages";
 import LabelledField from "../LabelledField";
 import DateTimeSelect from "../DateTimeSelect";
-import { errorsOn } from "./usePage";
+import { errorsOn } from "./utils";
+import usePageFormContext from "./usePageFormContext";
 
-interface OptionsProps {
-  state: PageEditor.State;
-  dispatch: (action: PageEditor.Action) => void;
+type Props = {
   authors: Pages.Author[];
   statuses: Pages.StatusLabels;
-}
+};
 
-export default function Options(props: OptionsProps) {
-  const { state, dispatch, authors, statuses } = props;
+export default function Options({ authors, statuses }: Props) {
+  const { state, dispatch } = usePageFormContext();
 
   const { page, locale, templates } = state;
 
@@ -44,6 +42,10 @@ export default function Options(props: OptionsProps) {
     setShowAdvanced(!showAdvanced);
   };
 
+  const toggleSkipIndex = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    dispatch({ type: "update", payload: { skip_index: evt.target.checked } });
+  };
+
   return (
     <div className="page-options">
       <LabelledField
@@ -123,7 +125,7 @@ export default function Options(props: OptionsProps) {
         </a>
       </p>
       {showAdvanced && (
-        <React.Fragment>
+        <Fragment>
           <LabelledField label="Subpages">
             <label className="check-box">
               <input
@@ -144,6 +146,21 @@ export default function Options(props: OptionsProps) {
               Show in news
             </label>
           </LabelledField>
+          <LabelledField
+            htmlFor="page_skip_index"
+            label="Search"
+            errors={errorsOn(page, "skip_index")}>
+            <label className="check-box">
+              <input
+                id="page_skip_index"
+                name="page[skip_index]"
+                type="checkbox"
+                checked={page.skip_index}
+                onChange={toggleSkipIndex}
+              />{" "}
+              Disable search indexing
+            </label>
+          </LabelledField>
           <LabelledField
             htmlFor="page_unique_name"
             label="Unique name"
@@ -168,7 +185,7 @@ export default function Options(props: OptionsProps) {
               onChange={handleChange("redirect_to")}
             />
           </LabelledField>
-        </React.Fragment>
+        </Fragment>
       )}
       {url && (
         <LabelledField label="Page link">

data/app/javascript/components/PageForm/PageDescription.tsx

@@ -1,16 +1,9 @@
-import React from "react";
-
-import * as PageEditor from "../../types/PageEditor";
+import { Fragment } from "react";
 import * as Pages from "../../types/Pages";
+import usePageFormContext from "./usePageFormContext";
 
 import LocaleLinks from "./LocaleLinks";
 
-interface PageDescriptionProps {
-  state: PageEditor.State;
-  dispatch: (action: PageEditor.Action) => void;
-  children: React.ReactNode;
-}
-
 function editLink(locale: string, page: Pages.Ancestor | Pages.Resource) {
   return (
     <a href={`/admin/${locale}/pages/${page.id}/edit`}>
@@ -26,19 +19,19 @@ function pageName(locale: string, page: Pages.Ancestor | Pages.Resource) {
   return page.blocks.name[locale] || <i>Untitled</i>;
 }
 
-export default function PageDescription(props: PageDescriptionProps) {
-  const { state, dispatch, children } = props;
+export default function PageDescription({ children }: React.PropsWithChildren) {
+  const { state } = usePageFormContext();
   const { locale, page } = state;
 
   return (
     <div className="page-description with_content_tabs">
-      <LocaleLinks state={state} dispatch={dispatch} />
+      <LocaleLinks />
       <h3>
         {page.ancestors.map((p) => (
-          <React.Fragment key={p.id}>
+          <Fragment key={p.id}>
             {editLink(locale, p)}
             {" » "}
-          </React.Fragment>
+          </Fragment>
         ))}
         {page.id ? editLink(locale, page) : "New Page"}
       </h3>

data/app/javascript/components/PageForm/PathSegment.tsx

@@ -1,17 +1,12 @@
-import React, { ChangeEvent } from "react";
+import { ChangeEvent } from "react";
 
-import * as PageEditor from "../../types/PageEditor";
 import * as Pages from "../../types/Pages";
 import { LocalizedValue } from "../../types";
 
-import { errorsOn } from "./usePage";
+import { errorsOn } from "./utils";
+import usePageFormContext from "./usePageFormContext";
 import LabelledField from "../LabelledField";
 
-interface Props {
-  state: PageEditor.State;
-  dispatch: (action: PageEditor.Action) => void;
-}
-
 function missingPathSegment(ancestors: Pages.Ancestor[], locale: string) {
   for (let i = 0; i < ancestors.length; i++) {
     if (!ancestors[i].path_segment[locale]) {
@@ -21,8 +16,8 @@ function missingPathSegment(ancestors: Pages.Ancestor[], locale: string) {
   return null;
 }
 
-export default function PathSegment(props: Props) {
-  const { state, dispatch } = props;
+export default function PathSegment() {
+  const { state, dispatch } = usePageFormContext();
   const { page, locale } = state;
 
   const value = (page.path_segment as LocalizedValue)[locale];

data/app/javascript/components/PageForm/TabPanel.tsx

@@ -1,11 +1,8 @@
-import React from "react";
-
-interface TabPanelProps {
+type Props = {
   active: boolean;
-  children: React.ReactNode;
-}
+};
 
-export default function TabPanel(props: TabPanelProps) {
+export default function TabPanel(props: React.PropsWithChildren<Props>) {
   const { active, children } = props;
 
   const classNames = ["content-tab"];

data/app/javascript/components/PageForm/Tabs.tsx

@@ -1,12 +1,10 @@
-import React from "react";
-
 import * as PageEditor from "../../types/PageEditor";
 
-interface Props {
+type Props = {
   tab: string;
   tabs: PageEditor.Tab[];
   setTab: (tab: string) => void;
-}
+};
 
 export default function Tabs(props: Props) {
   const { tab, tabs, setTab } = props;

data/app/javascript/components/PageForm/UnconfiguredContent.tsx

@@ -1,18 +1,13 @@
-import React from "react";
+import { Fragment } from "react";
 
-import * as PageEditor from "../../types/PageEditor";
 import { MaybeLocalizedValue } from "../../types";
-import { blockValue, errorsOn, unconfiguredBlocks } from "./usePage";
+import { blockValue, errorsOn, unconfiguredBlocks } from "./utils";
+import usePageFormContext from "./usePageFormContext";
 
 import Block from "./Block";
 
-interface Props {
-  state: PageEditor.State;
-  dispatch: (action: PageEditor.Action) => void;
-}
-
-export default function UnconfiguredContent(props: Props) {
-  const { state, dispatch } = props;
+export default function UnconfiguredContent() {
+  const { state, dispatch } = usePageFormContext();
 
   const { page, locale, inputDir } = state;
 
@@ -21,7 +16,7 @@ export default function UnconfiguredContent(props: Props) {
   };
 
   return (
-    <React.Fragment>
+    <Fragment>
       <p>
         This page has additional content fields not enabled by the selected
         template.
@@ -37,6 +32,6 @@ export default function UnconfiguredContent(props: Props) {
           value={blockValue(state, b)}
         />
       ))}
-    </React.Fragment>
+    </Fragment>
   );
 }

data/app/javascript/components/PageForm/pageParams.ts

@@ -4,11 +4,11 @@ import * as PageEditor from "../../types/PageEditor";
 import * as Images from "../../types/Images";
 import * as Tags from "../../types/Tags";
 
-interface Options {
+type Options = {
   files: Attachments.State;
   images: Images.GridState;
   tags: Tags.State;
-}
+};
 
 function dates(state: PageEditor.State) {
   if (state.datesEnabled) {
@@ -89,6 +89,7 @@ export default function pageParams(state: PageEditor.State, options: Options) {
     path_segment: page.path_segment,
     meta_image_id: page.meta_image.image && page.meta_image.image.id,
     parent_page_id: page.parent_page_id,
+    skip_index: page.skip_index,
     page_files_attributes: pageFiles(files),
     page_images_attributes: pageImages(images)
   };

data/app/javascript/components/PageForm/usePage.ts

@@ -5,51 +5,6 @@ import * as Pages from "../../types/Pages";
 import * as Template from "../../types/Template";
 import { LocalizedValue, MaybeLocalizedValue } from "../../types";
 
-export function blockValue(
-  state: PageEditor.State,
-  block: Template.Block
-): string {
-  if (block.localized) {
-    const value: LocalizedValue =
-      (state.page.blocks[block.name] as LocalizedValue) || {};
-
-    return value[state.locale] || "";
-  } else {
-    return (state.page.blocks[block.name] as string) || "";
-  }
-}
-
-export function errorsOn(page: Pages.Resource, attribute: string): string[] {
-  return page.errors
-    .filter((e) => e.attribute === attribute)
-    .map((e) => e.message);
-}
-
-export function unconfiguredBlocks(state: PageEditor.State): Template.Block[] {
-  const allBlocks: Record<string, Template.Block> = state.templates
-    .flatMap((t) => t.blocks)
-    .reduce((bs, b) => ({ [b.name]: b, ...bs }), {});
-
-  const anyValue = (v: MaybeLocalizedValue) => {
-    if (typeof v === "string") {
-      return v ? true : false;
-    } else {
-      return Object.values(v).filter((v) => v).length > 0;
-    }
-  };
-
-  const hasValue = Object.keys(allBlocks).filter((k) => {
-    const value = state.page.blocks[k] || "";
-    return anyValue(value);
-  });
-
-  const enabled = state.templateConfig.blocks.map((b) => b.name);
-
-  return hasValue
-    .filter((b) => enabled.indexOf(b) === -1)
-    .map((n) => allBlocks[n]);
-}
-
 function parseDate(str: string): Date | null {
   if (!str) {
     return null;
@@ -163,7 +118,7 @@ function updatePage(
 
 export default function usePage(
   initialState: PageEditor.State<Pages.SerializedResource>
-): [PageEditor.State, (action: PageEditor.Action) => void] {
+): PageEditor.Return {
   const [state, dispatch] = useReducer(reducer, prepare(initialState));
   return [derivedState(state), dispatch];
 }

data/app/javascript/components/PageForm/usePageFormContext.ts

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+import * as PageEditor from "../../types/PageEditor";
+
+export const PageFormContext = createContext<PageEditor.Context>(null);
+
+export default function usePageFormContext() {
+  return useContext(PageFormContext);
+}

data/app/javascript/components/PageForm/useTabs.ts

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import * as PageEditor from "../../types/PageEditor";
-import { unconfiguredBlocks } from "./usePage";
+import { unconfiguredBlocks } from "./utils";
 
 function tabsList(state: PageEditor.State): PageEditor.Tab[] {
   const { templates, templateConfig } = state;

data/app/javascript/components/PageForm/utils.ts

@@ -0,0 +1,49 @@
+import * as PageEditor from "../../types/PageEditor";
+import * as Pages from "../../types/Pages";
+import * as Template from "../../types/Template";
+import { LocalizedValue, MaybeLocalizedValue } from "../../types";
+
+export function blockValue(
+  state: PageEditor.State,
+  block: Template.Block
+): string {
+  if (block.localized) {
+    const value: LocalizedValue =
+      (state.page.blocks[block.name] as LocalizedValue) || {};
+
+    return value[state.locale] || "";
+  } else {
+    return (state.page.blocks[block.name] as string) || "";
+  }
+}
+
+export function errorsOn(page: Pages.Resource, attribute: string): string[] {
+  return page.errors
+    .filter((e) => e.attribute === attribute)
+    .map((e) => e.message);
+}
+
+export function unconfiguredBlocks(state: PageEditor.State): Template.Block[] {
+  const allBlocks: Record<string, Template.Block> = state.templates
+    .flatMap((t) => t.blocks)
+    .reduce((bs, b) => ({ [b.name]: b, ...bs }), {});
+
+  const anyValue = (v: MaybeLocalizedValue) => {
+    if (typeof v === "string") {
+      return v ? true : false;
+    } else {
+      return Object.values(v).filter((v) => v).length > 0;
+    }
+  };
+
+  const hasValue = Object.keys(allBlocks).filter((k) => {
+    const value = state.page.blocks[k] || "";
+    return anyValue(value);
+  });
+
+  const enabled = state.templateConfig.blocks.map((b) => b.name);
+
+  return hasValue
+    .filter((b) => enabled.indexOf(b) === -1)
+    .map((n) => allBlocks[n]);
+}

data/app/javascript/components/PageForm.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 
 import { putJson, postJson } from "../lib/request";
 import useToastStore from "../stores/useToastStore";
@@ -11,6 +11,7 @@ import useAttachments from "./Attachments/useAttachments";
 import useImageGrid from "./ImageGrid/useImageGrid";
 import useTags from "./TagEditor/useTags";
 import usePage from "./PageForm/usePage";
+import { PageFormContext } from "./PageForm/usePageFormContext";
 import useTabs from "./PageForm/useTabs";
 import pageParams from "./PageForm/pageParams";
 import Content from "./PageForm/Content";
@@ -24,14 +25,14 @@ import TabPanel from "./PageForm/TabPanel";
 import Files from "./PageForm/Files";
 import Images from "./PageForm/Images";
 
-interface Props {
+type Props = {
   locale: string;
   locales: { [index: string]: Locale };
   page: Pages.SerializedResource;
   templates: Template.Config[];
   authors: Pages.Author[];
   statuses: Pages.StatusLabels;
-}
+};
 
 export default function PageForm(props: Props) {
   const [state, dispatch] = usePage({
@@ -72,7 +73,7 @@ export default function PageForm(props: Props) {
     if (history) {
       history.replaceState(null, "", pageUrl);
     }
-  }, [page.id, locale, tab]);
+  }, [page.id, page.parent_page_id, locale, tab]);
 
   const handlePreview = (evt: React.MouseEvent) => {
     evt.preventDefault();
@@ -123,50 +124,46 @@ export default function PageForm(props: Props) {
   };
 
   return (
-    <Form state={state}>
-      <main>
-        <PageDescription state={state} dispatch={dispatch}>
-          <Tabs tabs={tabs} tab={tab} setTab={setTab} />
-        </PageDescription>
-        <div className="content">
-          <TabPanel active={tab == "content"}>
-            <Content
-              state={state}
-              dispatch={dispatch}
-              tagsState={tagsState}
-              tagsDispatch={tagsDispatch}
-            />
-          </TabPanel>
-          <TabPanel active={tab == "unconfigured-content"}>
-            <UnconfiguredContent state={state} dispatch={dispatch} />
-          </TabPanel>
-          <TabPanel active={tab == "images"}>
-            <Images locale={locale} locales={locales} state={imagesState} />
-          </TabPanel>
-          <TabPanel active={tab == "files"}>
-            <Files locale={locale} locales={locales} state={filesState} />
-          </TabPanel>
-          <TabPanel active={tab == "metadata"}>
-            <Metadata state={state} dispatch={dispatch} />
-          </TabPanel>
-          <div className="buttons">
-            <button type="button" onClick={handlePreview}>
-              Preview
-            </button>
-            <button type="submit" onClick={handleSubmit}>
-              Save
-            </button>
+    <PageFormContext.Provider
+      value={{
+        state: state,
+        dispatch: dispatch
+      }}>
+      <Form>
+        <main>
+          <PageDescription>
+            <Tabs tabs={tabs} tab={tab} setTab={setTab} />
+          </PageDescription>
+          <div className="content">
+            <TabPanel active={tab == "content"}>
+              <Content tagsState={tagsState} tagsDispatch={tagsDispatch} />
+            </TabPanel>
+            <TabPanel active={tab == "unconfigured-content"}>
+              <UnconfiguredContent />
+            </TabPanel>
+            <TabPanel active={tab == "images"}>
+              <Images locale={locale} locales={locales} state={imagesState} />
+            </TabPanel>
+            <TabPanel active={tab == "files"}>
+              <Files locale={locale} locales={locales} state={filesState} />
+            </TabPanel>
+            <TabPanel active={tab == "metadata"}>
+              <Metadata />
+            </TabPanel>
+            <div className="buttons">
+              <button type="button" onClick={handlePreview}>
+                Preview
+              </button>
+              <button type="submit" onClick={handleSubmit}>
+                Save
+              </button>
+            </div>
           </div>
-        </div>
-      </main>
-      <aside className="sidebar">
-        <Options
-          state={state}
-          dispatch={dispatch}
-          authors={props.authors}
-          statuses={props.statuses}
-        />
-      </aside>
-    </Form>
+        </main>
+        <aside className="sidebar">
+          <Options authors={props.authors} statuses={props.statuses} />
+        </aside>
+      </Form>
+    </PageFormContext.Provider>
   );
 }