Proceed with TS migration, decrease to 692 files (#4522)

* Decrease to 700 * Decrease to 692 * Decrease to 692
saleor · Dec 7, 2023 · f0e4f59 · f0e4f59
1 parent d9927a0
commit f0e4f59
Show file tree

Hide file tree

Showing 46 changed files with 232 additions and 212 deletions.
diff --git a/.changeset/lemon-pots-sparkle.md b/.changeset/lemon-pots-sparkle.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Proceed with TS migration, decrease to 692
diff --git a/src/auth/components/SectionRoute.tsx b/src/auth/components/SectionRoute.tsx
@@ -33,10 +33,10 @@ export const SectionRoute: React.FC<SectionRouteProps> = ({
     }
 
     if (matchAll(matchPermission)) {
-      return hasAllPermissions(permissions, user);
+      return hasAllPermissions(permissions, user!);
     }
 
-    return hasAnyPermissions(permissions, user);
+    return hasAnyPermissions(permissions, user!);
   };
 
   return hasSectionPermissions() ? <Route {...props} /> : <NotFound />;

diff --git a/src/auth/hooks/useAuthParameters.ts b/src/auth/hooks/useAuthParameters.ts
@@ -4,8 +4,8 @@ import { loginCallbackPath } from "../urls";
 
 export const useAuthParameters = () => {
   const [requestedExternalPluginId, setRequestedExternalPluginId] =
-    useLocalStorage("requestedExternalPluginId", null);
-  const [fallbackUri, setFallbackUri] = useLocalStorage(
+    useLocalStorage<string | null>("requestedExternalPluginId", null);
+  const [fallbackUri, setFallbackUri] = useLocalStorage<string | null>(
     "externalLoginFallbackUri",
     null,
   );

diff --git a/src/auth/hooks/useAuthProvider.ts b/src/auth/hooks/useAuthProvider.ts
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { ApolloClient, ApolloError } from "@apollo/client";
 import { IMessageContext } from "@dashboard/components/messages";
 import { DEMO_MODE } from "@dashboard/config";
@@ -144,24 +143,24 @@ export function useAuthProvider({
         includeDetails: false,
       });
 
-      if (isEmpty(result.data?.tokenCreate.user.userPermissions)) {
+      if (isEmpty(result.data?.tokenCreate?.user?.userPermissions)) {
         setErrors(["noPermissionsError"]);
         await handleLogout();
       }
 
-      if (result && !result.data.tokenCreate.errors.length) {
+      if (result && !result.data?.tokenCreate?.errors.length) {
         if (DEMO_MODE) {
           displayDemoMessage(intl, notify);
         }
 
-        saveCredentials(result.data.tokenCreate.user, password);
+        saveCredentials(result.data?.tokenCreate?.user!, password);
       } else {
         setErrors(["loginError"]);
       }
 
-      await logoutNonStaffUser(result.data.tokenCreate);
+      await logoutNonStaffUser(result.data?.tokenCreate!);
 
-      return result.data.tokenCreate;
+      return result.data?.tokenCreate;
     } catch (error) {
       if (error instanceof ApolloError) {
         handleLoginError(error);
@@ -184,7 +183,7 @@ export function useAuthProvider({
   };
 
   const handleExternalLogin = async (
-    pluginId: string | undefined,
+    pluginId: string | null,
     input: ExternalLoginInput,
   ) => {
     if (!pluginId) {
@@ -197,13 +196,13 @@ export function useAuthProvider({
       });
 
       if (
-        isEmpty(result.data?.externalObtainAccessTokens.user.userPermissions)
+        isEmpty(result.data?.externalObtainAccessTokens?.user?.userPermissions)
       ) {
         setErrors(["noPermissionsError"]);
         await handleLogout();
       }
 
-      if (result && !result.data?.externalObtainAccessTokens.errors.length) {
+      if (result && !result.data?.externalObtainAccessTokens?.errors.length) {
         if (DEMO_MODE) {
           displayDemoMessage(intl, notify);
         }
@@ -212,7 +211,7 @@ export function useAuthProvider({
         await handleLogout();
       }
 
-      await logoutNonStaffUser(result.data.externalObtainAccessTokens);
+      await logoutNonStaffUser(result.data?.externalObtainAccessTokens!);
 
       return result?.data?.externalObtainAccessTokens;
     } catch (error) {
@@ -227,7 +226,7 @@ export function useAuthProvider({
   const logoutNonStaffUser = async (
     data: LoginData | GetExternalAccessTokenData,
   ) => {
-    if (data.user && !data.user.isStaff) {
+    if (data?.user && !data.user.isStaff) {
       notify({
         status: "error",
         text: intl.formatMessage(commonMessages.unauthorizedDashboardAccess),

diff --git a/src/auth/hooks/useAuthRedirection.ts b/src/auth/hooks/useAuthRedirection.ts
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { getAppMountUriForRedirect } from "@dashboard/utils/urls";
 import { useEffect } from "react";
 import urlJoin from "url-join";
@@ -28,7 +27,7 @@ export const useAuthRedirection = () => {
       loginCallbackPath,
     );
 
-    const response = await requestLoginByExternalPlugin(pluginId, {
+    const response = await requestLoginByExternalPlugin!(pluginId!, {
       redirectUri,
     });
     const data = JSON.parse(response?.authenticationData || "");

diff --git a/src/auth/types.ts b/src/auth/types.ts
@@ -31,17 +31,20 @@ export type UserContextError =
   (typeof UserContextError)[keyof typeof UserContextError];
 
 export interface UserContext {
-  login?: (username: string, password: string) => Promise<LoginData>;
+  login?: (
+    username: string,
+    password: string,
+  ) => Promise<LoginData | undefined>;
   loginByExternalPlugin?: (
-    pluginId: string,
+    pluginId: string | null,
     input: ExternalLoginInput,
-  ) => Promise<GetExternalAccessTokenData>;
+  ) => Promise<GetExternalAccessTokenData | undefined>;
   logout?: () => Promise<void>;
   requestLoginByExternalPlugin?: (
     pluginId: string,
     input: RequestExternalLoginInput,
-  ) => Promise<GetExternalAuthUrlData>;
-  user?: UserFragment;
+  ) => Promise<GetExternalAuthUrlData | undefined>;
+  user?: UserFragment | null;
   authenticating: boolean;
   authenticated: boolean;
   errors: UserContextError[];

diff --git a/src/auth/views/Login.tsx b/src/auth/views/Login.tsx
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { useAvailableExternalAuthenticationsLazyQuery } from "@dashboard/graphql";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { getAppMountUriForRedirect } from "@dashboard/utils/urls";
@@ -39,7 +38,7 @@ const LoginView: React.FC<LoginViewProps> = ({ params }) => {
   } = useAuthParameters();
 
   const handleSubmit = async (data: LoginFormData) => {
-    const result = await login(data.email, data.password);
+    const result = await login!(data.email, data.password);
     const errors = result?.errors || [];
 
     return errors;
@@ -48,7 +47,7 @@ const LoginView: React.FC<LoginViewProps> = ({ params }) => {
   const handleRequestExternalAuthentication = async (pluginId: string) => {
     setFallbackUri(location.pathname);
 
-    const result = await requestLoginByExternalPlugin(pluginId, {
+    const result = await requestLoginByExternalPlugin!(pluginId, {
       redirectUri: urlJoin(
         window.location.origin,
         getAppMountUriForRedirect(),
@@ -63,7 +62,7 @@ const LoginView: React.FC<LoginViewProps> = ({ params }) => {
   };
 
   const handleExternalAuthentication = async (code: string, state: string) => {
-    await loginByExternalPlugin(requestedExternalPluginId, {
+    await loginByExternalPlugin!(requestedExternalPluginId, {
       code,
       state,
     });

diff --git a/src/auth/views/ResetPassword.tsx b/src/auth/views/ResetPassword.tsx
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { useRequestPasswordResetMutation } from "@dashboard/graphql";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { commonMessages } from "@dashboard/intl";
@@ -21,11 +20,13 @@ const ResetPasswordView: React.FC = () => {
   const [requestPasswordReset, requestPasswordResetOpts] =
     useRequestPasswordResetMutation({
       onCompleted: data => {
-        if (data.requestPasswordReset.errors.length === 0) {
+        if (data?.requestPasswordReset?.errors.length === 0) {
           navigate(passwordResetSuccessUrl);
         } else {
           if (
-            data.requestPasswordReset.errors.find(err => err.field === "email")
+            data?.requestPasswordReset?.errors.find(
+              err => err.field === "email",
+            )
           ) {
             setError(
               intl.formatMessage({
@@ -58,7 +59,7 @@ const ResetPasswordView: React.FC = () => {
   return (
     <ResetPasswordPage
       disabled={requestPasswordResetOpts.loading}
-      error={error}
+      error={error as string}
       onSubmit={handleSubmit}
     />
   );

diff --git a/src/categories/components/CategoryBackground/CategoryBackground.tsx b/src/categories/components/CategoryBackground/CategoryBackground.tsx
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { Button } from "@dashboard/components/Button";
 import CardTitle from "@dashboard/components/CardTitle";
 import Hr from "@dashboard/components/Hr";
@@ -46,17 +45,17 @@ export interface CategoryBackgroundProps {
   image: CategoryDetailsFragment["backgroundImage"];
   onChange: (event: React.ChangeEvent<any>) => void;
   onImageDelete: () => void;
-  onImageUpload: (file: File) => void;
+  onImageUpload: (file: File | null) => void;
 }
 
 const CategoryBackground: React.FC<CategoryBackgroundProps> = props => {
   const classes = useStyles(props);
   const intl = useIntl();
-  const anchor = React.useRef<HTMLInputElement>();
+  const anchor = React.useRef<HTMLInputElement>(null);
 
   const { data, onImageUpload, image, onChange, onImageDelete } = props;
 
-  const handleImageUploadButtonClick = () => anchor.current.click();
+  const handleImageUploadButtonClick = () => anchor.current?.click();
 
   return (
     <Card>
@@ -74,7 +73,9 @@ const CategoryBackground: React.FC<CategoryBackgroundProps> = props => {
             <input
               className={classes.fileField}
               id="fileUpload"
-              onChange={event => onImageUpload(event.target.files[0])}
+              onChange={({ target: { files } }) =>
+                onImageUpload(files && files[0])
+              }
               type="file"
               ref={anchor}
               accept="image/*"

diff --git a/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx b/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import BackButton from "@dashboard/components/BackButton";
 import { Button } from "@dashboard/components/Button";
 import { buttonMessages } from "@dashboard/intl";

diff --git a/src/categories/components/CategoryDetailsForm/CategoryDetailsForm.tsx b/src/categories/components/CategoryDetailsForm/CategoryDetailsForm.tsx
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import CardTitle from "@dashboard/components/CardTitle";
 import FormSpacer from "@dashboard/components/FormSpacer";
 import RichTextEditor from "@dashboard/components/RichTextEditor";

diff --git a/src/categories/components/CategoryListPage/CategoryListPage.stories.tsx b/src/categories/components/CategoryListPage/CategoryListPage.stories.tsx
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { categories } from "@dashboard/categories/fixtures";
 import { CategoryListUrlSortField } from "@dashboard/categories/urls";
 import {
@@ -15,7 +14,6 @@ import CategoryListPage, { CategoryTableProps } from "./CategoryListPage";
 
 const categoryTableProps: CategoryTableProps = {
   categories,
-  onAdd: undefined,
   ...listActionsProps,
   ...tabPageProps,
   ...pageListProps.default,

diff --git a/src/categories/components/CategoryProductListDatagrid/CategoryProductListDatagrid.tsx b/src/categories/components/CategoryProductListDatagrid/CategoryProductListDatagrid.tsx
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { useColumns } from "@dashboard/components/Datagrid/ColumnPicker/useColumns";
 import Datagrid from "@dashboard/components/Datagrid/Datagrid";
 import {
@@ -17,7 +16,9 @@ import { useIntl } from "react-intl";
 import { createGetCellContent, getColumns } from "./datagrid";
 
 interface CategoryListDatagridProps extends PageListProps {
-  products?: RelayToFlat<CategoryDetailsQuery["category"]["products"]>;
+  products?: RelayToFlat<
+    NonNullable<CategoryDetailsQuery["category"]>["products"]
+  >;
   disabled: boolean;
   selectionActionButton?: ReactNode | null;
   onSelectProductsIds: (ids: number[], clearSelection: () => void) => void;
@@ -36,7 +37,7 @@ export const CategoryProductListDatagrid = ({
   const availableColumns = useMemo(() => getColumns(intl), [intl]);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const getCellContent = useCallback(
-    createGetCellContent(products, availableColumns),
+    createGetCellContent(products!, availableColumns),
     [products, availableColumns],
   );
 
@@ -47,7 +48,7 @@ export const CategoryProductListDatagrid = ({
   });
 
   const handleRowAnchor = useCallback(
-    ([, row]: Item) => productUrl(products[row].id),
+    ([, row]: Item) => productUrl(products![row].id),
     [products],
   );
 

diff --git a/src/categories/components/CategoryProductListDatagrid/datagrid.ts b/src/categories/components/CategoryProductListDatagrid/datagrid.ts
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import {
   readonlyTextCell,
   thumbnailCell,
@@ -21,7 +20,9 @@ export const getColumns = (intl: IntlShape): AvailableColumn[] => [
 
 export const createGetCellContent =
   (
-    products: RelayToFlat<CategoryDetailsQuery["category"]["products"]>,
+    products: RelayToFlat<
+      NonNullable<CategoryDetailsQuery["category"]>["products"]
+    >,
     columns: AvailableColumn[],
   ) =>
   ([column, row]: Item): GridCell => {
@@ -31,7 +32,7 @@ export const createGetCellContent =
       return readonlyTextCell("");
     }
 
-    const rowData = products[row];
+    const rowData = products![row];
 
     switch (columnId) {
       case "name":

diff --git a/src/categories/components/CategoryProducts/CategoryProducts.tsx b/src/categories/components/CategoryProducts/CategoryProducts.tsx
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { BulkDeleteButton } from "@dashboard/components/BulkDeleteButton";
 import { DashboardCard } from "@dashboard/components/Card";
 import { InternalLink } from "@dashboard/components/InternalLink";
@@ -14,7 +13,9 @@ import { CategoryProductListDatagrid } from "../CategoryProductListDatagrid";
 interface CategoryProductsProps {
   category: CategoryDetailsQuery["category"];
   categoryId: string;
-  products: RelayToFlat<CategoryDetailsQuery["category"]["products"]>;
+  products: RelayToFlat<
+    NonNullable<CategoryDetailsQuery["category"]>["products"]
+  >;
   disabled: boolean;
   onProductsDelete: () => void;
   onSelectProductsIds: (ids: number[], clearSelection: () => void) => void;

diff --git a/src/categories/components/CategorySubcategories/CategorySubcategories.tsx b/src/categories/components/CategorySubcategories/CategorySubcategories.tsx
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { categoryAddUrl } from "@dashboard/categories/urls";
 import { BulkDeleteButton } from "@dashboard/components/BulkDeleteButton";
 import { DashboardCard } from "@dashboard/components/Card";
@@ -18,7 +17,9 @@ interface CategorySubcategoriesProps
   > {
   categoryId: string;
   disabled: boolean;
-  subcategories: RelayToFlat<CategoryDetailsQuery["category"]["children"]>;
+  subcategories: RelayToFlat<
+    NonNullable<CategoryDetailsQuery["category"]>["children"]
+  >;
   onCategoriesDelete: () => void;
   onSelectCategoriesIds: (ids: number[], clearSelection: () => void) => void;
 }
@@ -56,7 +57,7 @@ export const CategorySubcategories = ({
       <CategoryListDatagrid
         settings={settings}
         onUpdateListSettings={onUpdateListSettings}
-        categories={subcategories}
+        categories={subcategories || []}
         disabled={disabled}
         onSelectCategoriesIds={onSelectCategoriesIds}
         selectionActionButton={