Update eslint config

app/javascript/components/Attachments.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import useAttachments from "./Attachments/useAttachments";
 import List from "./Attachments/List";
 import * as Attachment from "../types/Attachments";

app/javascript/components/Attachments/Attachment.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent } from "react";
+import { MouseEvent } from "react";
 import copyToClipboard from "../../lib/copyToClipboard";
 import AttachmentEditor from "./AttachmentEditor";
 import useModalStore from "../../stores/useModalStore";

app/javascript/components/Attachments/AttachmentEditor.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, MouseEvent, useState } from "react";
+import { ChangeEvent, MouseEvent, useState } from "react";
 import copyToClipboard, { copySupported } from "../../lib/copyToClipboard";
 import useModalStore from "../../stores/useModalStore";
 import useToastStore from "../../stores/useToastStore";

app/javascript/components/Attachments/List.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import Attachment from "./Attachment";
 import Placeholder from "./Placeholder";
 import FileUploadButton from "../FileUploadButton";

app/javascript/components/Attachments/Placeholder.tsx

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

app/javascript/components/DateRangeSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import DateTimeSelect from "./DateTimeSelect";
 

app/javascript/components/DateTimeSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 interface DateTimeSelectProps {
   name: string;

app/javascript/components/EditableImage.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent, useState } from "react";
+import { MouseEvent, useState } from "react";
 
 import useModalStore from "../stores/useModalStore";
 import * as Images from "../types/Images";

app/javascript/components/FileUploadButton.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, MouseEvent, useRef } from "react";
+import { ChangeEvent, MouseEvent, useRef } from "react";
 
 interface Props {
   callback: (files: File[]) => void;

app/javascript/components/ImageCropper.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import { useCallback, useState } from "react";
 
 import * as Crop from "../types/Crop";
 

app/javascript/components/ImageCropper/FocalPoint.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent, TouchEvent, useRef, useState } from "react";
+import { MouseEvent, TouchEvent, useRef, useState } from "react";
 
 import * as Crop from "../../types/Crop";
 

app/javascript/components/ImageCropper/Image.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import ReactCrop from "react-image-crop";
 
 import * as Crop from "../../types/Crop";

app/javascript/components/ImageCropper/Toolbar.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent } from "react";
+import { MouseEvent } from "react";
 
 import * as Crop from "../../types/Crop";
 import * as Images from "../../types/Images";

app/javascript/components/ImageEditor.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent, useState } from "react";
+import { MouseEvent, useState } from "react";
 
 import useModalStore from "../stores/useModalStore";
 import { putJson } from "../lib/request";

app/javascript/components/ImageEditor/Form.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, MouseEvent } from "react";
+import { ChangeEvent, MouseEvent } from "react";
 
 import useModalStore from "../../stores/useModalStore";
 import useToastStore from "../../stores/useToastStore";

app/javascript/components/ImageGrid.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import * as Images from "../types/Images";
 import useImageGrid from "./ImageGrid/useImageGrid";
 import Grid from "./ImageGrid/Grid";

app/javascript/components/ImageGrid/DragElement.tsx

@@ -1,4 +1,4 @@
-import React, { RefObject } from "react";
+import { RefObject } from "react";
 
 import * as Drag from "../../types/Drag";
 import * as Images from "../../types/Images";

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">

app/javascript/components/ImageGrid/Grid.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import { useRef } from "react";
 import FileUploadButton from "../FileUploadButton";
 import DragElement from "./DragElement";
 import FilePlaceholder from "./FilePlaceholder";

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";

app/javascript/components/ImageGrid/Placeholder.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 interface Props {
   src: string;
 }

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";

app/javascript/components/LabelledField.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { Fragment } from "react";
 
 interface LabelledFieldProps {
   label: string;
@@ -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>}

app/javascript/components/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, MouseEvent, useEffect } from "react";
+import { useCallback, MouseEvent, useEffect } from "react";
 
 import useModalStore from "../stores/useModalStore";
 

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";

app/javascript/components/PageForm/Block.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent } from "react";
+import { ChangeEvent } from "react";
 
 import * as Template from "../../types/Template";
 

app/javascript/components/PageForm/Content.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-
+import { Fragment } from "react";
 import * as PageEditor from "../../types/PageEditor";
 import * as Tags from "../../types/Tags";
 import { MaybeLocalizedValue } from "../../types";
@@ -27,7 +26,7 @@ export default function Content(props: Props) {
   };
 
   return (
-    <React.Fragment>
+    <Fragment>
       {templateConfig.blocks.map((b) => (
         <Block
           key={b.name}
@@ -49,6 +48,6 @@ export default function Content(props: Props) {
           />
         </LabelledField>
       )}
-    </React.Fragment>
+    </Fragment>
   );
 }

app/javascript/components/PageForm/Dates.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import * as PageEditor from "../../types/PageEditor";
 
 import DateRangeSelect from "../DateRangeSelect";

app/javascript/components/PageForm/Files.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import * as Attachments from "../../types/Attachments";
 import { Locale } from "../../types";
 

app/javascript/components/PageForm/Form.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { csrfToken } from "../../lib/request";
 import * as PageEditor from "../../types/PageEditor";
 

app/javascript/components/PageForm/Images.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { GridState } from "../../types/Images";
 import { Locale } from "../../types";
 

app/javascript/components/PageForm/LocaleLinks.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import * as PageEditor from "../../types/PageEditor";
 
 interface Props {

app/javascript/components/PageForm/Metadata.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { Fragment } from "react";
 
 import * as PageEditor from "../../types/PageEditor";
 import * as Pages from "../../types/Pages";
@@ -29,7 +29,7 @@ export default function Metadata(props: Props) {
   };
 
   return (
-    <React.Fragment>
+    <Fragment>
       <PathSegment state={state} dispatch={dispatch} />
       <LabelledField
         htmlFor="page_meta_image_id"
@@ -62,6 +62,6 @@ export default function Metadata(props: Props) {
           value={blockValue(state, b)}
         />
       ))}
-    </React.Fragment>
+    </Fragment>
   );
 }

app/javascript/components/PageForm/Options.tsx

@@ -1,4 +1,4 @@
-import React, { useState, ChangeEvent } from "react";
+import { Fragment, useState, ChangeEvent } from "react";
 
 import * as PageEditor from "../../types/PageEditor";
 import * as Pages from "../../types/Pages";
@@ -127,7 +127,7 @@ export default function Options(props: OptionsProps) {
         </a>
       </p>
       {showAdvanced && (
-        <React.Fragment>
+        <Fragment>
           <LabelledField label="Subpages">
             <label className="check-box">
               <input
@@ -187,7 +187,7 @@ export default function Options(props: OptionsProps) {
               onChange={handleChange("redirect_to")}
             />
           </LabelledField>
-        </React.Fragment>
+        </Fragment>
       )}
       {url && (
         <LabelledField label="Page link">

app/javascript/components/PageForm/PageDescription.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-
+import { Fragment } from "react";
 import * as PageEditor from "../../types/PageEditor";
 import * as Pages from "../../types/Pages";
 
@@ -35,10 +34,10 @@ export default function PageDescription(props: PageDescriptionProps) {
       <LocaleLinks state={state} dispatch={dispatch} />
       <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>

app/javascript/components/PageForm/PathSegment.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent } from "react";
+import { ChangeEvent } from "react";
 
 import * as PageEditor from "../../types/PageEditor";
 import * as Pages from "../../types/Pages";

app/javascript/components/PageForm/TabPanel.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 interface TabPanelProps {
   active: boolean;
   children: React.ReactNode;

app/javascript/components/PageForm/Tabs.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import * as PageEditor from "../../types/PageEditor";
 
 interface Props {

app/javascript/components/PageForm/UnconfiguredContent.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { Fragment } from "react";
 
 import * as PageEditor from "../../types/PageEditor";
 import { MaybeLocalizedValue } from "../../types";
@@ -21,7 +21,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 +37,6 @@ export default function UnconfiguredContent(props: Props) {
           value={blockValue(state, b)}
         />
       ))}
-    </React.Fragment>
+    </Fragment>
   );
 }

app/javascript/components/PageImages.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import * as Images from "../types/Images";
 import { Locale } from "../types";
 

app/javascript/components/PageTree.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import * as Pages from "../types/Pages";
 import * as Tree from "./PageTree/tree";

app/javascript/components/PageTree/Button.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 type Props = {
   label: string;
   icon: string;

app/javascript/components/PageTree/CollapseArrow.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import * as Tree from "./tree";
 import { State, Action, visibleChildNodes } from "./usePageTree";
 

app/javascript/components/PageTree/CollapsedLabel.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import * as Tree from "./tree";
 import { State, visibleChildNodes } from "./usePageTree";
 

app/javascript/components/PageTree/EditPageName.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 
 import * as Tree from "./tree";
 import { State, Action, updatePage } from "./usePageTree";