pages_core 3.15.3 → 3.15.5

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

@@ -1,37 +1,38 @@
-import React, { ChangeEvent, MouseEvent } from "react";
-
 import useModalStore from "../../stores/useModalStore";
 import useToastStore from "../../stores/useToastStore";
 import copyToClipboard, { copySupported } from "../../lib/copyToClipboard";
-import * as Images from "../../types/Images";
-import { Locale } from "../../types";
+import useImageEditorContext from "./useImageEditorContext";
 
-interface Props {
-  alternative: Record<string, string>;
-  caption: Record<string, string>;
-  image: Images.Resource;
-  locale: string;
-  locales: Record<string, Locale>;
-  setLocale: (locale: string) => void;
-  save: (evt: MouseEvent) => void;
-  showCaption: boolean;
-  updateLocalization: (name: "alternative" | "caption", value: string) => void;
-}
+type Props = {
+  onSave: (evt: React.MouseEvent) => void;
+};
 
-export default function Form(props: Props) {
-  const { alternative, caption, image, locale, locales } = props;
+export default function Form({ onSave }: Props) {
+  const { state, dispatch, options } = useImageEditorContext();
+  const { alternative, caption, locale } = state;
+  const { image, locales } = options;
 
   const closeModal = useModalStore((state) => state.close);
   const notice = useToastStore((state) => state.notice);
 
-  const copyEmbedCode = (evt: MouseEvent) => {
+  const copyEmbedCode = (evt: React.MouseEvent) => {
     evt.preventDefault();
     copyToClipboard(`[image:${image.id}]`);
     notice("Embed code copied to clipboard");
   };
 
-  const handleChangeLocale = (evt: ChangeEvent<HTMLSelectElement>) => {
-    props.setLocale(evt.target.value);
+  const handleChangeLocale = (evt: React.ChangeEvent<HTMLSelectElement>) => {
+    dispatch({ type: "setLocale", payload: evt.target.value });
+  };
+
+  const handleChangeAlternative = (
+    evt: React.ChangeEvent<HTMLTextAreaElement>
+  ) => {
+    dispatch({ type: "setAlternative", payload: evt.target.value });
+  };
+
+  const handleChangeCaption = (evt: React.ChangeEvent<HTMLTextAreaElement>) => {
+    dispatch({ type: "setCaption", payload: evt.target.value });
   };
 
   const inputDir = (locales && locales[locale] && locales[locale].dir) || "ltr";
@@ -68,27 +69,23 @@ export default function Form(props: Props) {
           lang={locale}
           dir={inputDir}
           value={alternative[locale] || ""}
-          onChange={(e) =>
-            props.updateLocalization("alternative", e.target.value)
-          }
+          onChange={handleChangeAlternative}
         />
       </div>
-      {props.showCaption && (
+      {options.caption && (
         <div className="field">
           <label>Caption</label>
           <textarea
             lang={locale}
             dir={inputDir}
-            onChange={(e) =>
-              props.updateLocalization("caption", e.target.value)
-            }
+            onChange={handleChangeCaption}
             value={caption[locale] || ""}
             className="caption"
           />
         </div>
       )}
       <div className="buttons">
-        <button className="primary" onClick={props.save}>
+        <button className="primary" onClick={onSave}>
           Save
         </button>
         <button onClick={closeModal}>Cancel</button>

data/app/javascript/components/ImageEditor/useImageEditor.ts

@@ -0,0 +1,63 @@
+import { useReducer } from "react";
+import * as Images from "../../types/Images";
+import { Locale, LocalizedValue } from "../../types";
+
+export type Action = {
+  type: "setAlternative" | "setCaption" | "setLocale";
+  payload: string;
+};
+
+export type State = {
+  locale: string;
+  caption: LocalizedValue;
+  alternative: LocalizedValue;
+};
+
+export type Options = {
+  caption: boolean;
+  image: Images.Resource;
+  locales: Record<string, Locale>;
+};
+
+type Props = {
+  caption: boolean;
+  locale: string;
+  locales: Record<string, Locale>;
+  image: Images.Resource;
+};
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case "setAlternative":
+      return {
+        ...state,
+        alternative: { ...state.alternative, [state.locale]: action.payload }
+      };
+    case "setCaption":
+      return {
+        ...state,
+        caption: { ...state.caption, [state.locale]: action.payload }
+      };
+    case "setLocale":
+      return { ...state, locale: action.payload };
+  }
+}
+
+export default function useImageEditor({
+  caption,
+  locale,
+  locales,
+  image
+}: Props): [State, React.Dispatch<Action>, Options] {
+  const [state, dispatch] = useReducer(reducer, {
+    locale: locale,
+    caption: image.caption || {},
+    alternative: image.alternative || {}
+  });
+  const options = {
+    caption: caption,
+    locales: locales,
+    image: image
+  };
+  return [state, dispatch, options];
+}

data/app/javascript/components/ImageEditor/useImageEditorContext.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+import { State, Action, Options } from "./useImageEditor";
+
+type Context = {
+  state: State;
+  dispatch: React.Dispatch<Action>;
+  options: Options;
+};
+
+export const ImageEditorContext = createContext<Context>(null);
+
+export default function useImageEditorContext() {
+  return useContext(ImageEditorContext);
+}

data/app/javascript/components/ImageEditor.tsx

@@ -1,5 +1,3 @@
-import React, { MouseEvent, useState } from "react";
-
 import useModalStore from "../stores/useModalStore";
 import { putJson } from "../lib/request";
 import * as Images from "../types/Images";
@@ -7,8 +5,10 @@ import { Locale } from "../types";
 
 import ImageCropper, { useCrop, cropParams } from "./ImageCropper";
 import Form from "./ImageEditor/Form";
+import useImageEditor from "./ImageEditor/useImageEditor";
+import { ImageEditorContext } from "./ImageEditor/useImageEditorContext";
 
-interface Props {
+type Props = {
   image: Images.Resource;
   caption: boolean;
   locale: string;
@@ -17,34 +17,25 @@ interface Props {
     data: Partial<Images.Resource>,
     croppedImage: string | null
   ) => void;
-}
+};
 
 export default function ImageEditor(props: Props) {
-  const [cropState, dispatch, croppedImage] = useCrop(props.image);
-  const [locale, setLocale] = useState(props.locale);
-  const [localizations, setLocalizations] = useState({
-    caption: props.image.caption || {},
-    alternative: props.image.alternative || {}
-  });
+  const [cropState, cropDispatch, croppedImage] = useCrop(props.image);
 
-  const closeModal = useModalStore((state) => state.close);
+  const [state, dispatch, options] = useImageEditor(props);
 
-  const updateLocalization = (
-    name: "alternative" | "caption",
-    value: string
-  ) => {
-    setLocalizations({
-      ...localizations,
-      [name]: { ...localizations[name], [locale]: value }
-    });
-  };
+  const closeModal = useModalStore((state) => state.close);
 
-  const save = (evt: MouseEvent) => {
+  const handleSave = async (evt: React.MouseEvent) => {
     evt.preventDefault();
     evt.stopPropagation();
 
-    const data = { ...localizations, ...cropParams(cropState) };
-    void putJson(`/admin/images/${props.image.id}`, { image: data });
+    const data = {
+      ...cropParams(cropState),
+      alternative: state.alternative,
+      caption: state.caption
+    };
+    await putJson(`/admin/images/${props.image.id}`, { image: data });
 
     if (props.onUpdate) {
       props.onUpdate(data, croppedImage);
@@ -53,25 +44,20 @@ export default function ImageEditor(props: Props) {
   };
 
   return (
-    <div className="image-editor">
-      <ImageCropper
-        croppedImage={croppedImage}
-        cropState={cropState}
-        dispatch={dispatch}
-      />
-      {!cropState.cropping && (
-        <Form
-          alternative={localizations.alternative}
-          caption={localizations.caption}
-          image={props.image}
-          locale={locale}
-          locales={props.locales}
-          setLocale={setLocale}
-          save={save}
-          showCaption={props.caption}
-          updateLocalization={updateLocalization}
+    <ImageEditorContext.Provider
+      value={{
+        state: state,
+        dispatch: dispatch,
+        options: options
+      }}>
+      <div className="image-editor">
+        <ImageCropper
+          croppedImage={croppedImage}
+          state={cropState}
+          dispatch={cropDispatch}
         />
-      )}
-    </div>
+        {!cropState.cropping && <Form onSave={handleSave} />}
+      </div>
+    </ImageEditorContext.Provider>
   );
 }

data/app/javascript/components/ImageGrid/Deleted.tsx

@@ -0,0 +1,28 @@
+import * as Images from "../../types/Images";
+
+type Props = {
+  attributeName: (record: Images.Record) => string;
+  deleted: Images.Record[];
+};
+
+export default function Deleted({ attributeName, deleted }: Props) {
+  return (
+    <div className="deleted">
+      {deleted.map((r) => (
+        <span className="deleted-image" key={r.id}>
+          <input name={`${attributeName(r)}[id]`} type="hidden" value={r.id} />
+          <input
+            name={`${attributeName(r)}[attachment_id]`}
+            type="hidden"
+            value={(r.image && r.image.id) || ""}
+          />
+          <input
+            name={`${attributeName(r)}[_destroy]`}
+            type="hidden"
+            value={"true"}
+          />
+        </span>
+      ))}
+    </div>
+  );
+}

data/app/javascript/components/ImageGrid/DragElement.tsx

@@ -1,13 +1,13 @@
-import React, { RefObject } from "react";
+import { RefObject } from "react";
 
 import * as Drag from "../../types/Drag";
 import * as Images from "../../types/Images";
 
-interface Props {
+type Props = {
   container: RefObject<HTMLDivElement>;
-  draggable: Drag.Item<Images.Record>;
-  dragState: Drag.State;
-}
+  draggable: Drag.DraggableOrFiles<Images.Record>;
+  dragState: Drag.State<Images.Record>;
+};
 
 export default function DragElement(props: Props) {
   const { draggable, dragState, container } = props;

data/app/javascript/components/ImageGrid/FilePlaceholder.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 export default function FilePlaceholder() {
   return (
     <div className="grid-image" key="file-placeholder">

data/app/javascript/components/ImageGrid/Grid.tsx

@@ -1,5 +1,6 @@
-import React, { useRef } from "react";
+import { useRef } from "react";
 import FileUploadButton from "../FileUploadButton";
+import Deleted from "./Deleted";
 import DragElement from "./DragElement";
 import FilePlaceholder from "./FilePlaceholder";
 import GridImage from "./GridImage";
@@ -10,9 +11,9 @@ import * as Images from "../../types/Images";
 
 import { createDraggable, collectionOrder, useDragUploader } from "../drag";
 
-interface Props extends Images.GridOptions {
+type Props = Images.GridOptions & {
   state: Images.GridState;
-}
+};
 
 function filterFiles(files: File[]): File[] {
   const validMimeTypes = [
@@ -29,7 +30,10 @@ function draggedImageOrder(
   primaryCollection: Drag.Collection<Images.Record>,
   imagesCollection: Drag.Collection<Images.Record>,
   dragState: Drag.State<Images.Record>
-): [Drag.Item<Images.Record>, Drag.Item<Images.Record>[]] {
+): [
+  Drag.DraggableOrFiles<Images.Record>,
+  Drag.DraggableOrFiles<Images.Record>[]
+] {
   const [primary, ...rest] = collectionOrder(primaryCollection, dragState);
   let images = [...rest, ...collectionOrder(imagesCollection, dragState)];
 
@@ -79,7 +83,7 @@ export default function Grid(props: Props) {
     }
   };
 
-  const [dragState, dragStart, listeners] = useDragUploader<Images.Record>(
+  const [dragState, dragStart, listeners] = useDragUploader(
     [primary, images],
     dragEnd
   );
@@ -116,7 +120,10 @@ export default function Grid(props: Props) {
       } else {
         dispatchAll({
           type: "update",
-          payload: { ...draggable, record: { image: json } } as Drag.Draggable
+          payload: {
+            ...draggable,
+            record: { image: json }
+          } as Drag.Draggable<Images.Record>
         });
       }
     });
@@ -145,7 +152,7 @@ export default function Grid(props: Props) {
   };
 
   const renderImage = (
-    draggable: Drag.Item<Images.Record>,
+    draggable: Drag.DraggableOrFiles<Images.Record>,
     isPrimary: boolean
   ) => {
     const { dragging } = dragState;
@@ -256,23 +263,7 @@ export default function Grid(props: Props) {
           {draggedImages.map((r) => renderImage(r, false))}
         </div>
       </div>
-      <div className="deleted">
-        {deleted.map((r) => (
-          <span className="deleted-image" key={r.id}>
-            <input name={`${attrName(r)}[id]`} type="hidden" value={r.id} />
-            <input
-              name={`${attrName(r)}[attachment_id]`}
-              type="hidden"
-              value={(r.image && r.image.id) || ""}
-            />
-            <input
-              name={`${attrName(r)}[_destroy]`}
-              type="hidden"
-              value={"true"}
-            />
-          </span>
-        ))}
-      </div>
+      <Deleted attributeName={attrName} deleted={deleted} />
     </div>
   );
 }

data/app/javascript/components/ImageGrid/GridImage.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent, useEffect, useState } from "react";
+import { MouseEvent, useEffect, useState } from "react";
 
 import copyToClipboard from "../../lib/copyToClipboard";
 import useToastStore from "../../stores/useToastStore";
@@ -10,7 +10,7 @@ import { useDraggable } from "../drag";
 import EditableImage from "../EditableImage";
 import Placeholder from "./Placeholder";
 
-interface Props {
+type Props = {
   draggable: Drag.Draggable<Images.Record>;
   attributeName: string;
   locale: string;
@@ -26,7 +26,7 @@ interface Props {
     draggable: Drag.Draggable<Images.Record>
   ) => void;
   onUpdate: (newImage: Images.Resource, src: string) => void;
-}
+};
 
 export default function GridImage(props: Props) {
   const { attributeName, draggable } = props;
@@ -45,7 +45,7 @@ export default function GridImage(props: Props) {
       reader.onload = () => setSrc(reader.result as string);
       reader.readAsDataURL(record.file);
     }
-  }, []);
+  }, [record]);
 
   const copyEmbed = (evt: MouseEvent) => {
     evt.preventDefault();

data/app/javascript/components/ImageGrid/Placeholder.tsx

@@ -1,8 +1,6 @@
-import React from "react";
-
-interface Props {
+type Props = {
   src: string;
-}
+};
 
 export default function Placeholder(props: Props) {
   if (props.src) {

data/app/javascript/components/ImageGrid.tsx

@@ -1,12 +1,10 @@
-import React from "react";
-
 import * as Images from "../types/Images";
 import useImageGrid from "./ImageGrid/useImageGrid";
 import Grid from "./ImageGrid/Grid";
 
-interface Props extends Images.GridOptions {
+type Props = Images.GridOptions & {
   records: Images.Record[];
-}
+};
 
 export default function ImageGrid(props: Props) {
   const state = useImageGrid(props.records, props.showEmbed);

data/app/javascript/components/ImageUploader.tsx

@@ -1,4 +1,4 @@
-import React, { DragEvent, MouseEvent, useState } from "react";
+import { DragEvent, MouseEvent, useState } from "react";
 
 import useToastStore from "../stores/useToastStore";
 import { post } from "../lib/request";
@@ -8,7 +8,7 @@ import { Locale } from "../types";
 import EditableImage from "./EditableImage";
 import FileUploadButton from "./FileUploadButton";
 
-interface Props {
+type Props = {
   locale: string;
   locales: { [index: string]: Locale };
   image: Images.Resource;
@@ -18,12 +18,12 @@ interface Props {
   attr: string;
   alternative?: string;
   onChange?: (state: State) => void;
-}
+};
 
-interface State {
+type State = {
   image?: Images.Resource;
   src?: string;
-}
+};
 
 function getFiles(dt: DataTransfer): File[] {
   const files: File[] = [];

data/app/javascript/components/LabelledField.tsx

@@ -1,14 +1,14 @@
-import React from "react";
+import { Fragment } from "react";
 
-interface LabelledFieldProps {
+type Props = {
   label: string;
   children: React.ReactNode;
   htmlFor?: string;
   description?: string;
   errors?: string[];
-}
+};
 
-export default function LabelledField(props: LabelledFieldProps) {
+export default function LabelledField(props: Props) {
   const { htmlFor, description, label, errors, children } = props;
 
   const classNames = ["field"];
@@ -21,10 +21,10 @@ export default function LabelledField(props: LabelledFieldProps) {
       <label htmlFor={htmlFor}>
         {label}
         {errors && (
-          <React.Fragment>
+          <Fragment>
             {" "}
             <span className="error">{errors[errors.length - 1]}</span>
-          </React.Fragment>
+          </Fragment>
         )}
       </label>
       {description && <p className="description">{description}</p>}

data/app/javascript/components/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent, useEffect } from "react";
+import { useCallback, MouseEvent, useEffect } from "react";
 
 import useModalStore from "../stores/useModalStore";
 
@@ -6,17 +6,14 @@ export default function Modal() {
   const component = useModalStore((state) => state.component);
   const close = useModalStore((state) => state.close);
 
-  const handleClose = (evt: KeyboardEvent | MouseEvent) => {
-    evt.stopPropagation();
-    evt.preventDefault();
-    close();
-  };
-
-  const handleKeypress = (evt: KeyboardEvent) => {
-    if (component && (evt.key == "Escape" || evt.keyCode === 27)) {
-      handleClose(evt);
-    }
-  };
+  const handleClose = useCallback(
+    (evt: KeyboardEvent | MouseEvent) => {
+      evt.stopPropagation();
+      evt.preventDefault();
+      close();
+    },
+    [close]
+  );
 
   useEffect(() => {
     if (component) {
@@ -27,11 +24,17 @@ export default function Modal() {
   }, [component]);
 
   useEffect(() => {
+    const handleKeypress = (evt: KeyboardEvent) => {
+      if (component && (evt.key == "Escape" || evt.keyCode === 27)) {
+        handleClose(evt);
+      }
+    };
+
     window.addEventListener("keypress", handleKeypress);
     return () => {
       window.removeEventListener("keypress", handleKeypress);
     };
-  }, []);
+  }, [component, handleClose]);
 
   if (component) {
     return (

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

@@ -1,18 +1,18 @@
-import React, { ChangeEvent } from "react";
+import { ChangeEvent } from "react";
 
 import * as Template from "../../types/Template";
 
 import LabelledField from "../LabelledField";
 import RichTextArea from "../RichTextArea";
 
-interface Props {
+type Props = {
   block: Template.Block;
   errors: string[];
   onChange: (value: string) => void;
   lang: string;
   dir: string;
   value: string;
-}
+};
 
 export default function Block(props: Props) {
   const { block, errors, onChange, lang, dir, value } = props;

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

@@ -1,25 +1,21 @@
-import React from "react";
-
-import * as PageEditor from "../../types/PageEditor";
+import { Fragment } from "react";
 import * as Tags from "../../types/Tags";
 import { MaybeLocalizedValue } from "../../types";
 
-import { blockValue, errorsOn } from "./usePage";
+import { blockValue, errorsOn } from "./utils";
+import usePageFormContext from "./usePageFormContext";
 import LabelledField from "../LabelledField";
 import { default as TagEditor } from "../TagEditor/Editor";
 import Block from "./Block";
 import Dates from "./Dates";
 
-interface Props {
-  state: PageEditor.State;
-  dispatch: (action: PageEditor.Action) => void;
+type Props = {
   tagsState: Tags.State;
-  tagsDispatch: (action: Tags.Action) => void;
-}
-
-export default function Content(props: Props) {
-  const { state, dispatch, tagsState, tagsDispatch } = props;
+  tagsDispatch: React.Dispatch<Tags.Action>;
+};
 
+export default function Content({ tagsState, tagsDispatch }: Props) {
+  const { state, dispatch } = usePageFormContext();
   const { page, locale, inputDir, templateConfig } = state;
 
   const handleChange = (attr: string) => (value: MaybeLocalizedValue) => {
@@ -27,7 +23,7 @@ export default function Content(props: Props) {
   };
 
   return (
-    <React.Fragment>
+    <Fragment>
       {templateConfig.blocks.map((b) => (
         <Block
           key={b.name}
@@ -39,7 +35,7 @@ export default function Content(props: Props) {
           value={blockValue(state, b)}
         />
       ))}
-      {templateConfig.dates && <Dates state={state} dispatch={dispatch} />}
+      {templateConfig.dates && <Dates />}
       {templateConfig.tags && (
         <LabelledField label="Tags">
           <TagEditor
@@ -49,6 +45,6 @@ export default function Content(props: Props) {
           />
         </LabelledField>
       )}
-    </React.Fragment>
+    </Fragment>
   );
 }