further types frontend

src/admin/components/elements/ReactSelect/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Select from 'react-select';
 import { Props } from './types';
 import Chevron from '../../icons/Chevron';
 

src/admin/components/forms/Form/index.tsx

@@ -5,10 +5,10 @@ import { objectToFormData } from 'object-to-formdata';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { toast } from 'react-toastify';
+import { useAuth } from '@payloadcms/config-provider';
 import { useLocale } from '../../utilities/Locale';
 import { requests } from '../../../api';
 import useThrottledEffect from '../../../hooks/useThrottledEffect';
-import { useAuth } from '@payloadcms/config-provider';
 import fieldReducer from './fieldReducer';
 import initContextState from './initContextState';
 import reduceFieldsToValues from './reduceFieldsToValues';
@@ -24,7 +24,7 @@ import './index.scss';
 
 const baseClass = 'form';
 
-const Form = (props) => {
+const Form: React.FC = (props) => {
   const {
     disabled,
     onSubmit,

src/admin/components/forms/RenderFields/index.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, useEffect, useContext, useState } from 'react';
-import PropTypes from 'prop-types';
 import RenderCustomComponent from '../../utilities/RenderCustomComponent';
 import useIntersect from '../../../hooks/useIntersect';
+import { Props, Context } from './types';
 
 const baseClass = 'render-fields';
 
@@ -9,11 +9,11 @@ const intersectionObserverOptions = {
   rootMargin: '1000px',
 };
 
-const RenderedFieldContext = createContext({});
+const RenderedFieldContext = createContext({} as Context);
 
-export const useRenderedFields = () => useContext(RenderedFieldContext);
+export const useRenderedFields = (): Context => useContext(RenderedFieldContext);
 
-const RenderFields: React.FC = (props) => {
+const RenderFields: React.FC<Props> = (props) => {
   const {
     fieldSchema,
     fieldTypes,
@@ -135,26 +135,4 @@ const RenderFields: React.FC = (props) => {
   return null;
 };
 
-RenderFields.defaultProps = {
-  filter: null,
-  readOnly: false,
-  permissions: {},
-  operation: undefined,
-  className: undefined,
-};
-
-RenderFields.propTypes = {
-  fieldSchema: PropTypes.arrayOf(
-    PropTypes.shape({}),
-  ).isRequired,
-  fieldTypes: PropTypes.shape({
-    hidden: PropTypes.function,
-  }).isRequired,
-  filter: PropTypes.func,
-  permissions: PropTypes.shape({}),
-  readOnly: PropTypes.bool,
-  operation: PropTypes.string,
-  className: PropTypes.string,
-};
-
 export default RenderFields;

src/admin/components/forms/RenderFields/types.ts

@@ -0,0 +1,17 @@
+import { CollectionPermission, GlobalPermission } from '../../../../auth/types';
+import { Field } from '../../../../fields/config/types';
+
+export type Operation = 'create' | 'update'
+
+export type Context = {
+  operation: Operation
+}
+
+export type Props = {
+  className?: string
+  operation: Operation
+  readOnly: boolean
+  permissions: CollectionPermission | GlobalPermission
+  filter: (field: Field) => boolean
+  fieldSchema: Field[]
+}

src/admin/components/forms/field-types/Relationship/index.tsx

@@ -10,6 +10,8 @@ import useFieldType from '../../useFieldType';
 import Label from '../../Label';
 import Error from '../../Error';
 import { relationship } from '../../../../../fields/validations';
+import { PaginatedDocs } from '../../../../../collections/config/types';
+import { RelationshipProps, OptionsPage } from './types';
 
 import './index.scss';
 
@@ -17,7 +19,7 @@ const maxResultsPerRequest = 10;
 
 const baseClass = 'relationship';
 
-class Relationship extends Component {
+class Relationship extends Component<RelationshipProps> {
   constructor(props) {
     super(props);
 
@@ -77,7 +79,7 @@ class Relationship extends Component {
           const fieldToSearch = collection?.admin?.useAsTitle || 'id';
           const searchParam = search ? `&where[${fieldToSearch}][like]=${search}` : '';
           const response = await fetch(`${serverURL}${api}/${relation}?limit=${maxResultsPerRequest}&page=${lastLoadedPage}${searchParam}`);
-          const data = await response.json();
+          const data: PaginatedDocs = await response.json();
 
           if (response.ok) {
             if (data.hasNextPage) {
@@ -87,7 +89,7 @@ class Relationship extends Component {
               });
             }
 
-            return callback({ relation, data });
+            return callback(true, { relation, data });
           }
 
           let error = 'There was a problem loading options for this field.';
@@ -99,7 +101,7 @@ class Relationship extends Component {
           return this.setState({
             errorLoading: error,
           });
-        }, (lastPage, nextPage) => {
+        }, (lastPage: OptionsPage, nextPage: OptionsPage) => {
           if (nextPage) {
             const { data, relation } = nextPage;
             this.addOptions(data, relation);

src/admin/components/forms/field-types/Relationship/types.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { PaginatedDocs } from '../../../../../collections/config/types';
+import { Config } from '../../../../../config/types';
+
+export type OptionsPage = {
+  relation: string
+  data: PaginatedDocs
+}
+
+export type RelationshipProps = {
+  required: boolean
+  errorMessage: string
+  hasMany: boolean
+  showError: boolean
+  value: unknown
+  path: string
+  formProcessing: boolean
+  admin: {
+    readOnly: boolean
+    style: React.CSSProperties
+    width: string
+  }
+  relationTo: string | string[]
+  config: Config
+}

src/collections/config/types.ts

@@ -144,3 +144,16 @@ export type AfterLoginHook = (args?: {
 export type AfterForgotPasswordHook = (args?: {
   args?: any;
 }) => any;
+
+export type PaginatedDocs = {
+  docs: unknown[]
+  totalDocs: number
+  limit: number
+  totalPages: number
+  page: number
+  pagingCounter: number
+  hasPrevPage: boolean
+  hasNextPage: boolean
+  prevPage: number | null
+  nextPage: number | null
+}

src/fields/config/types.ts

@@ -39,7 +39,7 @@ type FieldBase = {
     readOnly?: boolean;
     disabled?: boolean;
     condition?: (...args: any[]) => any | void;
-    components?: { [key: string]: JSX.Element | (() => JSX.Element) };
+    components?: { [key: string]: React.ComponentType };
   };
   access?: {
     create?: Access;

src/utilities/asyncSome.ts

@@ -1,10 +1,56 @@
-const asyncSome = async (arr: unknown[], predicate: (event: unknown) => Promise<unknown>): Promise<boolean> => {
-  // eslint-disable-next-line no-restricted-syntax
-  for (const e of arr) {
-    // eslint-disable-next-line no-await-in-loop
-    if (await predicate(e)) return true;
-  }
-  return false;
-};
+/* eslint-disable no-use-before-define */
+/* eslint-disable consistent-return */
+import wrappy from 'wrappy';
+import asap from 'asap';
 
-export default asyncSome;
+type Reduce = (er: boolean, result: unknown) => void;
+type Callback = (last: unknown, next: unknown) => void;
+
+const ensureFutureTick = wrappy((cb: Callback) => {
+  let sync = true;
+  asap(() => {
+    sync = false;
+  });
+
+  return function safe(...args: unknown[]) {
+    if (sync) {
+      asap(() => {
+        cb.apply(this, args);
+      });
+    } else { cb.apply(this, args); }
+  };
+});
+
+function some(list: unknown[], predicate: (item: unknown, reduce: Reduce) => void, cb: Callback): void {
+  const array = slice(list);
+  let index = 0;
+  const { length } = array;
+  const hecomes = ensureFutureTick(cb);
+
+
+  const reduce: Reduce = (er, result) => {
+    if (er) return hecomes(er, false);
+    if (result) return hecomes(null, result);
+
+    index += 1;
+    map();
+  };
+
+  map();
+
+  function map() {
+    if (index >= length) return hecomes(null, false);
+
+    predicate(array[index], reduce);
+  }
+}
+
+function slice(args: unknown[]) {
+  const l = args.length;
+  const a = [];
+  let i: number;
+  for (i = 0; i < l; i += 1) a[i] = args[i];
+  return a;
+}
+
+export default some;