refactor: prepare react 18 upgrade - batch #9 [no ci] (#3749)

webiny · Dec 8, 2023 · 8ca7a02 · 8ca7a02
1 parent 8388d1d
commit 8ca7a02
Show file tree

Hide file tree

Showing 46 changed files with 85 additions and 79 deletions.
diff --git a/packages/app-apw/src/components/ContentReviewEditor/CenterPanel.tsx b/packages/app-apw/src/components/ContentReviewEditor/CenterPanel.tsx
@@ -42,7 +42,7 @@ interface CreateChangeRequestProps {
     disabled: boolean;
 }
 
-const CreateChangeRequest: React.FC<CreateChangeRequestProps> = ({ create, disabled }) => {
+const CreateChangeRequest = ({ create, disabled }: CreateChangeRequestProps) => {
     if (disabled) {
         return (
             <CreateChangeRequestBox paddingX={5} paddingY={5}>

diff --git a/...-apw/src/components/ContentReviewEditor/ChangeContentStatus/ChangeContentStatusButton.tsx b/...-apw/src/components/ContentReviewEditor/ChangeContentStatus/ChangeContentStatusButton.tsx
@@ -31,7 +31,7 @@ const PublishContentBox = styled(Box)`
 const defaultButtonStyles = { width: "217px" };
 const activeButtonStyles = { backgroundColor: "var(--mdc-theme-secondary)" };
 
-export const ChangeContentStatusButton: React.FC = () => {
+export const ChangeContentStatusButton = () => {
     const { contentReview } = useCurrentContentReview();
     const { loading, deleteScheduledAction } = usePublishContent();
     const { setAction, setOpenPublishNowDialog } = useScheduleActionDialog();
@@ -132,7 +132,7 @@ const AuthorName = styled(TypographySecondary)`
 
 export type ContentStatusProps = Pick<ApwContentReview, "content">;
 
-export const ContentStatus: React.FC<ContentStatusProps> = ({ content }) => {
+export const ContentStatus = ({ content }: ContentStatusProps) => {
     const label = content.scheduledOn ? t`Content Scheduled On:` : t`Content Published On:`;
     const name = content.scheduledOn
         ? content.scheduledBy?.displayName

diff --git a/...-apw/src/components/ContentReviewEditor/ChangeContentStatus/ChangeContentStatusDialog.tsx b/...-apw/src/components/ContentReviewEditor/ChangeContentStatus/ChangeContentStatusDialog.tsx
@@ -26,11 +26,7 @@ interface PublishContentMessageProps {
     action: ScheduleActionType;
 }
 
-const PublishContentMessage: React.FC<PublishContentMessageProps> = ({
-    publishNow,
-    setSchedule,
-    action
-}) => {
+const PublishContentMessage = ({ publishNow, setSchedule, action }: PublishContentMessageProps) => {
     const label = action === "publish" ? t`Publish` : t`Unpublish`;
 
     return (
@@ -86,7 +82,7 @@ const dialogContainerStyles = css`
     }
 `;
 
-export const ChangeContentStatusDialog: React.FC = () => {
+export const ChangeContentStatusDialog = () => {
     const { action, openPublishNowDialog, setOpenPublishNowDialog, setOpenPublishLaterDialog } =
         useScheduleActionDialog();
     const useContentReviewIdResult = useContentReviewId();

diff --git a/...s/app-apw/src/components/ContentReviewEditor/ChangeContentStatus/ScheduleActionDialog.tsx b/...s/app-apw/src/components/ContentReviewEditor/ChangeContentStatus/ScheduleActionDialog.tsx
@@ -71,7 +71,7 @@ const getTimeGte = (date: string | undefined): string => {
     return "";
 };
 
-const ScheduleActionMessage: React.FC<ScheduleActionMessageProps> = ({ Bind, data }) => {
+const ScheduleActionMessage = ({ Bind, data }: ScheduleActionMessageProps) => {
     const dateGte = getTodayDate();
     const timeGte = getTimeGte(data?.date);
 
@@ -133,7 +133,7 @@ const dialogContainerStyles = css`
     }
 `;
 
-export const ScheduleActionDialog: React.FC = () => {
+export const ScheduleActionDialog = () => {
     const { action, openPublishLaterDialog, setOpenPublishLaterDialog } = useScheduleActionDialog();
     const useContentReviewIdResult = useContentReviewId();
     if (!useContentReviewIdResult) {

diff --git a/...pp-apw/src/components/ContentReviewEditor/ChangeContentStatus/useScheduleActionDialog.tsx b/...pp-apw/src/components/ContentReviewEditor/ChangeContentStatus/useScheduleActionDialog.tsx
@@ -19,7 +19,11 @@ export const useScheduleActionDialog = (): ScheduleActionDialogContextValue => {
     return useContext(ScheduleActionDialogContext);
 };
 
-export const ScheduleActionDialogProvider: React.FC = ({ children }) => {
+interface ScheduleActionDialogProviderProps {
+    children: React.ReactNode;
+}
+
+export const ScheduleActionDialogProvider = ({ children }: ScheduleActionDialogProviderProps) => {
     const [action, setAction] = useState<ScheduleActionType>("publish");
     const [openPublishNowDialog, setOpenPublishNowDialog] = useState<boolean>(false);
     const [openPublishLaterDialog, setOpenPublishLaterDialog] = useState<boolean>(false);

diff --git a/packages/app-apw/src/components/ContentReviewEditor/ChangeRequest/ApwFile.tsx b/packages/app-apw/src/components/ContentReviewEditor/ChangeRequest/ApwFile.tsx
@@ -32,7 +32,7 @@ export const DefaultRenderImagePreview = (renderImageProps: any) => (
     <Image {...renderImageProps} {...changeRequestImagePreviewProps} />
 );
 
-export const ApwFile: React.FC<ApwFileProps> = props => {
+export const ApwFile = (props: ApwFileProps) => {
     const { value, onChange, showFileManager } = props;
 
     const removeImage = () => onChange(null);
@@ -74,7 +74,7 @@ const commentFilePreviewProps = {
     style: { width: "100%", height: 140, objectFit: "contain" }
 };
 
-export const CommentFile: React.FC<CommentFileProps> = props => {
+export const CommentFile = (props: CommentFileProps) => {
     const { value } = props;
 
     const isImage = React.useCallback(url => {

diff --git a/packages/app-apw/src/components/ContentReviewEditor/ChangeRequest/ChangeRequest.tsx b/packages/app-apw/src/components/ContentReviewEditor/ChangeRequest/ChangeRequest.tsx
@@ -77,7 +77,7 @@ interface ChangeRequestProps {
     id: string;
 }
 
-export const ChangeRequest: React.FC<ChangeRequestProps> = props => {
+export const ChangeRequest = (props: ChangeRequestProps) => {
     const { id } = props;
     const { deleteChangeRequest, changeRequest, markResolved, loading } = useChangeRequest({ id });
     const { setOpen, setChangeRequestId } = useChangeRequestDialog();

diff --git a/packages/app-apw/src/components/ContentReviewEditor/ChangeRequest/ChangeRequestDialog.tsx b/packages/app-apw/src/components/ContentReviewEditor/ChangeRequest/ChangeRequestDialog.tsx
@@ -42,7 +42,7 @@ interface ChangeRequestMessageProps {
     Bind: BindComponent;
 }
 
-const ChangeRequestMessage: React.FC<ChangeRequestMessageProps> = ({ Bind }) => {
+const ChangeRequestMessage = ({ Bind }: ChangeRequestMessageProps) => {
     return (
         <ChangeRequestColumns space={1}>
             <LeftBox padding={6}>
@@ -125,7 +125,7 @@ const isValidId = (id: string | null) => {
     return id.split("#").length === 2;
 };
 
-export const ChangeRequestDialog: React.FC = () => {
+export const ChangeRequestDialog = () => {
     const { open, setOpen, changeRequestId, setChangeRequestId } = useChangeRequestDialog();
     const { id: stepId } = useCurrentStepId();
     const useContentReviewIdResult = useContentReviewId();

diff --git a/packages/app-apw/src/components/ContentReviewEditor/ChangeRequest/ChangeRequestListItem.tsx b/packages/app-apw/src/components/ContentReviewEditor/ChangeRequest/ChangeRequestListItem.tsx
@@ -32,7 +32,7 @@ const getRandomIndex = () => Math.round(Math.random() * 100) % 3;
 
 type ChangeRequestItemProps = ApwChangeRequest;
 
-export const ChangeRequestListItem: React.FC<ChangeRequestItemProps> = props => {
+export const ChangeRequestListItem = (props: ChangeRequestItemProps) => {
     const { createdOn, createdBy, title, id, body, resolved } = props;
     const location = useLocation();
     const navigate = useNavigate();

diff --git a/packages/app-apw/src/components/ContentReviewEditor/ChangeRequest/ChangeRequestMedia.tsx b/packages/app-apw/src/components/ContentReviewEditor/ChangeRequest/ChangeRequestMedia.tsx
@@ -51,9 +51,10 @@ export const Media = styled.div<{ fullWidth?: boolean }>`
 interface FileWithOverlayProps {
     media: ApwMediaFile;
     fullWidth: boolean;
+    children: React.ReactNode;
 }
 
-export const FileWithOverlay: React.FC<FileWithOverlayProps> = ({ media, children, fullWidth }) => {
+export const FileWithOverlay = ({ media, children, fullWidth }: FileWithOverlayProps) => {
     return (
         <Media fullWidth={fullWidth}>
             {children}

diff --git a/packages/app-apw/src/components/ContentReviewEditor/ChangeRequest/ProvideSignOff.tsx b/packages/app-apw/src/components/ContentReviewEditor/ChangeRequest/ProvideSignOff.tsx
@@ -26,10 +26,7 @@ interface ProvideSignOffProps {
     changeRequestsPending: boolean;
 }
 
-export const ProvideSignOff: React.FC<ProvideSignOffProps> = ({
-    currentStep,
-    changeRequestsPending
-}) => {
+export const ProvideSignOff = ({ currentStep, changeRequestsPending }: ProvideSignOffProps) => {
     const { provideSignOff, retractSignOff, loading } = useStepSignOff();
 
     if (loading) {

diff --git a/packages/app-apw/src/components/ContentReviewEditor/ChangeRequest/useChangeRequestDialog.tsx b/packages/app-apw/src/components/ContentReviewEditor/ChangeRequest/useChangeRequestDialog.tsx
@@ -15,7 +15,11 @@ export const useChangeRequestDialog = (): ChangeRequestDialogContextValue => {
     return useContext(ChangeRequestDialogContext);
 };
 
-export const ChangeRequestDialogProvider: React.FC = ({ children }) => {
+interface ChangeRequestDialogProviderProps {
+    children: React.ReactNode;
+}
+
+export const ChangeRequestDialogProvider = ({ children }: ChangeRequestDialogProviderProps) => {
     const [open, setOpen] = useState<boolean>(false);
     const [changeRequestId, setChangeRequestId] = useState<string | null>(null);
 

diff --git a/packages/app-apw/src/components/ContentReviewEditor/Comment/CommentBox.tsx b/packages/app-apw/src/components/ContentReviewEditor/Comment/CommentBox.tsx
@@ -81,7 +81,7 @@ interface CommentBoxProps {
     scrollToLatestComment: () => void;
 }
 
-export const CommentBox: React.FC<CommentBoxProps> = ({ scrollToLatestComment }) => {
+export const CommentBox = ({ scrollToLatestComment }: CommentBoxProps) => {
     const [loading, setLoading] = useState<boolean>(false);
     const { createComment } = useComment();
     const changeRequestId = useCurrentChangeRequestId();

diff --git a/packages/app-apw/src/components/ContentReviewEditor/Comment/Comments.tsx b/packages/app-apw/src/components/ContentReviewEditor/Comment/Comments.tsx
@@ -32,7 +32,7 @@ interface CommentProps {
     width?: string;
 }
 
-const Comment: React.FC<CommentProps> = props => {
+const Comment = (props: CommentProps) => {
     const { comment, ...restProps } = props;
     return (
         <Stack marginBottom={6} space={2} {...restProps}>

diff --git a/packages/app-apw/src/components/ContentReviewEditor/ContentReviewStep/index.tsx b/packages/app-apw/src/components/ContentReviewEditor/ContentReviewStep/index.tsx
@@ -20,10 +20,10 @@ interface CircleProps {
     innerFillColor?: string;
 }
 
-const ConcentricCircle: React.FC<CircleProps> = ({
+const ConcentricCircle = ({
     innerFillColor = "var(--mdc-theme-surface)",
     outerFillColor
-}) => {
+}: CircleProps) => {
     return (
         <svg
             width="16"
@@ -48,7 +48,7 @@ const fillColor = {
     [ApwContentReviewStepStatus.INACTIVE]: "var(--mdc-theme-text-secondary-on-background)"
 };
 
-const StepStatusIcon: React.FC<StepStatusIconProps> = ({ status }) => {
+const StepStatusIcon = ({ status }: StepStatusIconProps) => {
     return <ConcentricCircle outerFillColor={fillColor[status]} />;
 };
 
@@ -61,7 +61,7 @@ interface ContentReviewStepProps {
     disabled?: boolean;
 }
 
-export const ContentReviewStep: React.FC<ContentReviewStepProps> = props => {
+export const ContentReviewStep = (props: ContentReviewStepProps) => {
     const { step, createdOn, createdBy, disabled } = props;
     const navigate = useNavigate();
     const activeStepId = useActiveStepId();

diff --git a/packages/app-apw/src/components/ContentReviewEditor/LeftPanel.tsx b/packages/app-apw/src/components/ContentReviewEditor/LeftPanel.tsx
@@ -36,11 +36,7 @@ interface LeftPanelProps {
     status: ApwContentReviewStatus;
 }
 
-export const LeftPanel: React.FC<LeftPanelProps> = ({
-    steps,
-    reviewRequestedBy,
-    reviewRequestedOn
-}) => {
+export const LeftPanel = ({ steps, reviewRequestedBy, reviewRequestedOn }: LeftPanelProps) => {
     return (
         <PanelBox flex={"1 1 26%"} display={"flex"} style={{ flexDirection: "column" }}>
             <ContentReviewStepList>

diff --git a/packages/app-apw/src/components/ContentReviewEditor/PlaceholderBox.tsx b/packages/app-apw/src/components/ContentReviewEditor/PlaceholderBox.tsx
@@ -8,7 +8,11 @@ const EmptyBox = styled(Box)`
     background-color: var(--mdc-theme-on-background);
 `;
 
-export const PlaceholderBox: React.FC<{ text: string }> = ({ text }) => {
+interface PlaceholderBoxProps {
+    text: string;
+}
+
+export const PlaceholderBox = ({ text }: PlaceholderBoxProps) => {
     return (
         <EmptyBox>
             <EmptyView title={text} action={null} />

diff --git a/packages/app-apw/src/components/ContentReviewEditor/RightPanel.tsx b/packages/app-apw/src/components/ContentReviewEditor/RightPanel.tsx
@@ -17,7 +17,7 @@ const CommentStack = styled(Stack)`
     flex-direction: column;
 `;
 
-export const RightPanel: React.FC = () => {
+export const RightPanel = () => {
     const changeRequestId = useCurrentChangeRequestId();
     const ref = useRef<HTMLDivElement>(null);
 

diff --git a/packages/app-apw/src/components/ContentReviewEditor/index.tsx b/packages/app-apw/src/components/ContentReviewEditor/index.tsx
@@ -21,7 +21,7 @@ const EditorColumns = styled(Columns)`
     padding: 65px 0 0;
 `;
 
-export const ContentReviewEditor: React.FC = () => {
+export const ContentReviewEditor = () => {
     const { loading, contentReview } = useCurrentContentReview();
 
     if (loading) {

diff --git a/packages/app-apw/src/components/Layout.tsx b/packages/app-apw/src/components/Layout.tsx
@@ -139,7 +139,7 @@ interface ColumnsProps extends StyledBoxProps {
     className?: string;
 }
 
-export const Columns: React.FC<ColumnsProps> = ({ children, space, ...props }) => {
+export const Columns = ({ children, space, ...props }: ColumnsProps) => {
     return (
         <Box display="flex" {...props}>
             {React.Children.map(children, (child, index) => {
@@ -167,7 +167,7 @@ interface StackProps extends StyledBoxProps {
     className?: string;
 }
 
-export const Stack: React.FC<StackProps> = ({ children, space, ...props }) => {
+export const Stack = ({ children, space, ...props }: StackProps) => {
     return (
         <Box {...props}>
             {React.Children.map(children, (child, index) => {

diff --git a/packages/app-apw/src/index.tsx b/packages/app-apw/src/index.tsx
@@ -40,7 +40,7 @@ import { DefaultBar } from "~/plugins/editor/defaultBar";
 import { MenuGroupRenderer } from "~/plugins/cms/MenuGroupRenderer";
 import { ApwPermissions } from "~/plugins/permissionRenderer";
 
-export const AdvancedPublishingWorkflow: React.FC = () => {
+export const AdvancedPublishingWorkflow = () => {
     const { canUseFeature } = useWcp();
     if (!canUseFeature("advancedPublishingWorkflow")) {
         return null;

diff --git a/packages/app-apw/src/plugins/Module.tsx b/packages/app-apw/src/plugins/Module.tsx
@@ -16,11 +16,11 @@ const ContentReviewEditor = lazy(
 interface LoaderProps {
     children: React.ReactElement;
 }
-const Loader: React.FC<LoaderProps> = ({ children, ...props }) => (
+const Loader = ({ children, ...props }: LoaderProps) => (
     <Suspense fallback={<CircularProgress />}>{React.cloneElement(children, props)}</Suspense>
 );
 
-export const Module: React.FC = () => {
+export const Module = () => {
     const { canManageWorkflows } = usePermission();
 
     const manageWorkflows = canManageWorkflows();

diff --git a/packages/app-apw/src/plugins/cms/ApwOnEntryDelete.tsx b/packages/app-apw/src/plugins/cms/ApwOnEntryDelete.tsx
@@ -15,7 +15,7 @@ import { useApolloClient } from "@apollo/react-hooks";
 
 const t = i18n.ns("app-apw/cms/dialog");
 
-export const ApwOnEntryDelete: React.FC = () => {
+export const ApwOnEntryDelete = () => {
     const client = useApolloClient();
     const { onEntryDelete } = useCms();
     const { showSnackbar } = useSnackbar();

diff --git a/packages/app-apw/src/plugins/cms/ApwOnEntryPublish.tsx b/packages/app-apw/src/plugins/cms/ApwOnEntryPublish.tsx
@@ -22,7 +22,7 @@ interface Resolve {
 
 type CreateContentReviewInput = Pick<ApwContentReviewContent, "id" | "type">;
 
-export const ApwOnEntryPublish: React.FC = () => {
+export const ApwOnEntryPublish = () => {
     const { onEntryRevisionPublish } = useCms();
     const client = useApolloClient();
     const { showSnackbar } = useSnackbar();

diff --git a/packages/app-apw/src/plugins/cms/MenuGroupRenderer.tsx b/packages/app-apw/src/plugins/cms/MenuGroupRenderer.tsx
@@ -1,7 +1,7 @@
 import { useMenuItem } from "@webiny/app-admin";
 import React from "react";
 
-export const MenuGroupRenderer = (PrevMenuItem: React.FC): React.FC => {
+export const MenuGroupRenderer = (PrevMenuItem: React.FC) => {
     return function MenuGroup() {
         const { menuItem } = useMenuItem();
 

diff --git a/packages/app-apw/src/plugins/editor/defaultBar/Name.tsx b/packages/app-apw/src/plugins/editor/defaultBar/Name.tsx
@@ -31,7 +31,7 @@ const getContentUrl = (content: ApwContentReviewContent): string => {
     return ``;
 };
 
-export const Name: React.FC = () => {
+export const Name = () => {
     const { contentReview } = useCurrentContentReview();
     const url = getContentUrl(contentReview.content);
 

diff --git a/packages/app-apw/src/plugins/editor/defaultBar/index.tsx b/packages/app-apw/src/plugins/editor/defaultBar/index.tsx
@@ -43,7 +43,7 @@ const defaultBaPlugins = [
     }
 ];
 
-export const DefaultBar: React.FC = () => {
+export const DefaultBar = () => {
     useEffect(() => {
         plugins.register(defaultBaPlugins);
     }, []);

diff --git a/packages/app-apw/src/plugins/pageBuilder/ApwOnDelete.tsx b/packages/app-apw/src/plugins/pageBuilder/ApwOnDelete.tsx
@@ -10,7 +10,7 @@ import { IS_REVIEW_REQUIRED_QUERY } from "../graphql";
 
 const t = i18n.ns("app-apw/page-builder/dialog");
 
-export const ApwOnPageDelete: React.FC = () => {
+export const ApwOnPageDelete = () => {
     const pageBuilder = useAdminPageBuilder();
     const client = useApolloClient();
     const { showSnackbar } = useSnackbar();

diff --git a/packages/app-apw/src/plugins/pageBuilder/ApwOnPublish.tsx b/packages/app-apw/src/plugins/pageBuilder/ApwOnPublish.tsx
@@ -18,7 +18,7 @@ const t = i18n.ns("app-apw/page-builder/dialog");
 
 type CreateContentReviewInput = Pick<ApwContentReviewContent, "id" | "type">;
 
-export const ApwOnPublish: React.FC = () => {
+export const ApwOnPublish = () => {
     const pageBuilder = useAdminPageBuilder();
     const [input, setInput] = useState<CreateContentReviewInput | null>(null);
     const client = useApolloClient();

diff --git a/packages/app-apw/src/plugins/permissionRenderer/ApwPermissions.tsx b/packages/app-apw/src/plugins/permissionRenderer/ApwPermissions.tsx
@@ -18,7 +18,7 @@ export interface ApwPermissionsProps {
     value: ApwSecurityPermission[];
     onChange: (value: ApwSecurityPermission[]) => void;
 }
-export const ApwPermissions: React.FC<ApwPermissionsProps> = ({ value, onChange }) => {
+export const ApwPermissions = ({ value, onChange }: ApwPermissionsProps) => {
     const onFormChange = useCallback(
         (data: ApwSecurityPermission) => {
             const initialPermissions = value.filter(

diff --git a/packages/app-apw/src/plugins/permissionRenderer/index.tsx b/packages/app-apw/src/plugins/permissionRenderer/index.tsx
@@ -24,7 +24,7 @@ const createPermissions = (): AdminAppPermissionRendererPlugin => {
     };
 };
 
-export const ApwPermissions: React.FC = () => {
+export const ApwPermissions = () => {
     useEffect(() => {
         plugins.register(createPermissions());
     }, []);

diff --git a/packages/app-apw/src/views/contentReviewDashboard/ContentReviewDataList.tsx b/packages/app-apw/src/views/contentReviewDashboard/ContentReviewDataList.tsx
@@ -54,7 +54,7 @@ const InlineLoaderWrapper = styled("div")({
 
 const CONTENT_REVIEW_LIST_REFRESH_INTERVAL = 10000;
 
-export const ContentReviewDataList: React.FC = () => {
+export const ContentReviewDataList = () => {
     const {
         contentReviews,
         loading,