andreiduca / use-async-resource Goto Github PK

export class ForgeService extends AuthorizedApiBase {
    private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
    private baseUrl: string;
    protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;

    constructor(configuration: IConfig, baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) {
        super(configuration);
        this.http = http ? http : <any>window;
        this.baseUrl = baseUrl !== undefined && baseUrl !== null ? baseUrl : "";
    }

    /**
     * Gets all Forge Accounts
     * @return A list of Forge Accounts
     */
    getAllAccounts(signal?: AbortSignal | undefined): Promise<ForgeAccountDTO[]> {
        let url_ = this.baseUrl + "/api/Forge/GetAllAccounts";
        url_ = url_.replace(/[?&]$/, "");

        let options_ = <RequestInit>{
            method: "GET",
            signal,
            headers: {
                "Accept": "application/json"
            }
        };

        return this.transformOptions(options_).then(transformedOptions_ => {
            return this.http.fetch(url_, transformedOptions_);
        }).then((_response: Response) => {
            return this.processGetAllAccounts(_response);
        });
    }

    protected processGetAllAccounts(response: Response): Promise<ForgeAccountDTO[]> {
        const status = response.status;
        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
        if (status === 200) {
            return response.text().then((_responseText) => {
            let result200: any = null;
            result200 = _responseText === "" ? null : <ForgeAccountDTO[]>JSON.parse(_responseText, this.jsonParseReviver);
            return result200;
            });
        } else if (status !== 200 && status !== 204) {
            return response.text().then((_responseText) => {
            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
            });
        }
        return Promise.resolve<ForgeAccountDTO[]>(<any>null);
    }
}

export const forgeService = new ForgeService(APIConfig);

const [accountsReader, getAccounts] = useAsyncResource(forgeService.getAllAccounts, []);

let url_ = this.baseUrl + "/api/Forge/GetAllAccounts";

const [accountsReader, getAccounts] = useAsyncResource(() => forgeService.getAllAccounts(), []);

export default class Demo extends React.Component {
  constructor(props) {
    super(props)

    const [categoriesReader, getNewCategories] = useAsyncResource(fetchCategories, this.props.categoryId)
    this.categoriesReader = categoriesReader
    this.getNewCategories = getNewCategories
  }
}

const [collectionsReader, getCollections] = useAsyncResource(fetchDataSourceCollections);

node_modules/use-async-resource/src/useAsyncResource.ts:69:15 - error TS7011: Function expression, which lacks return-type annotation, implicitly has an 'any' return type.

69       return (() => undefined) as LazyDataOrModifiedFn<ResponseType>;
                 ~~~~~~~~~~~~~~~
Found 1 error.

{
	"compilerOptions": {
		/* Basic Options */
		//		 "incremental": true,                   /* Enable incremental compilation */
		"target": "es2015",
		/* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
		"module": "es2015",
		/* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
		// "lib": [],                             /* Specify library files to be included in the compilation. */
		// "allowJs": true,                       /* Allow javascript files to be compiled. */
		// "checkJs": true,                       /* Report errors in .js files. */
		"jsx": "react",
		/* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
		"declaration": true,
		/* Generates corresponding '.d.ts' file. */
		//		"declarationMap": true,
		/* Generates a sourcemap for each corresponding '.d.ts' file. */
		//		"sourceMap": true,
		/* Generates corresponding '.map' file. */
		// "outFile": "./",                       /* Concatenate and emit output to single file. */
		"outDir": "./lib",
		/* Redirect output structure to the directory. */
		//    "rootDir": "./src",
		/* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
		// "composite": true,                     /* Enable project compilation */
		// "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
		"removeComments": true,
		/* Do not emit comments to output. */
		// "noEmit": true,                        /* Do not emit outputs. */
		// "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
		"downlevelIteration": true,
		/* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
		"isolatedModules": false,
		/* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
		/* Strict Type-Checking Options */
		"strict": false,
		/* Enable all strict type-checking options. */
		"noImplicitAny": true,
		/* Raise error on expressions and declarations with an implied 'any' type. */
		// "strictNullChecks": true,
		/* Enable strict null checks. */
		// "strictFunctionTypes": true,
		/* Enable strict checking of function types. */
		// "strictBindCallApply": true,
		/* Enable strict 'bind', 'call', and 'apply' methods on functions. */
		// "strictPropertyInitialization": true,
		/* Enable strict checking of property initialization in classes. */
		// "noImplicitThis": true,
		/* Raise error on 'this' expressions with an implied 'any' type. */
		"alwaysStrict": false,
		/* Parse in strict mode and emit "use strict" for each source file. */
		/* Additional Checks */
		"noUnusedLocals": true,
		/* Report errors on unused locals. */
		"noUnusedParameters": true,
		/* Report errors on unused parameters. */
		"noImplicitReturns": true,
		/* Report error when not all code paths in function return a value. */
		"noFallthroughCasesInSwitch": true,
		/* Report errors for fallthrough cases in switch statement. */
		/* Module Resolution Options */
		"moduleResolution": "node",
		/* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
		// "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
		// "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
		// "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
		// "typeRoots": [],                       /* List of folders to include type definitions from. */
		// "types": [],                           /* Type declaration files to be included in compilation. */
		// "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
		"esModuleInterop": true,
		/* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
		// "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
		// "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
		/* Source Map Options */
		// "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
		// "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
		"inlineSourceMap": true,
		/* Emit a single file with source maps instead of having a separate file. */
		"inlineSources": true,
		/* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
		/* Experimental Options */
		// "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
		// "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
		/* Advanced Options */
		"forceConsistentCasingInFileNames": true,
		"skipLibCheck": true
		/* Disallow inconsistently-cased references to the same file. */
	},
	"exclude": [
		"./node_modules/*",
		"lib/**/*",
		"node_modules/**/*",
		"test/**/*",
		"**/__test__/*",
		"**/*.spec.ts",
		"src/**/*.test.*",
		"src/**/*.spec.*"
	],
	"include": [
		"src/**/*",
		"index.ts"
	]
}

// initial render
const [userReader] = useAsyncResource(fetchUser, 1);
userReader(); // => { id: 1, name: 'Alice' }

// second render: updated the id param to 2
const [userReader] = useAsyncResource(fetchUser, 2);
userReader(); // => { id: 2, name: 'Bob' }
// --> data reader should already be updated to be in sync with the params passed

// initial render
const [userReader] = useAsyncResource(fetchUser, 1);
userReader(); // => { id: 1, name: 'Alice' }

// second render: updated the id param to 2
const [userReader] = useAsyncResource(fetchUser, 2);
userReader(); // => { id: 1, name: 'Alice' }
// --> the hook still returns the old user object, as the update for the dataReader happens in a useEffect

// useEffect happens, updating the dataReader, causing a third render
const [userReader] = useAsyncResource(fetchUser, 2);
userReader(); // => { id: 2, name: 'Bob' }
// --> only now the data reader is in sync with the passed params

...
const Categories = React.lazy(() => import(/* webpackChunkName: "categories" */ './components/categories'));
...
const fetchCategories = () =>
  fetch('https://api.chucknorris.io/jokes/categories').then(r => r.json());

const App = () => {
  const [categoriesReader, getCategories] = useAsyncResource(fetchCategories);

  const preloadCategories = React.useCallback(() => {
    getCategories();
  }, []);

  return (
    <Suspense fallback={<Fallback />}>
      <Router>
        <Routes>
          {/*...*/}
          <Route
            path="categories"
            element={<Categories reader={categoriesReader} />}
            preload={preloadCategories}
          />
          {/*...*/}
        </Routes>
      </Router>
    </Suspense>
  );

import React from 'react'

const Categories = ({ reader }) => {
  const data = reader();

  if (data === undefined) return null;

  return (
    <ul>
      {
        data.map(item => <li key={item}>{item}</li>)
      }
    </ul>
  )
}

export default Categories;

function fetchPanels() {
    return new Promise((resolve) => {
        setTimeout(() => {
            return [
                {name: 'panel_1'},
                {name: 'panel_2'},
            ]
        })
    });
}

function Panels(props) {
    const panels = props.panelsReader();
    function addPanel() {
        // how to add item to panels that avoids api calls or being lost in re-render?
        // some code here...
    }

    function savePanels() { /* ... sync with the server ... */ }
    return (
        <>
            <button onClick={addPanel}>Add Panel</button>
            <button onClick={savePanels}>Save</button>
            {panels.map((panel) => (
                <div>{panel.name}</div>
            ))}
        </>
    )
}

function Dashboard() {
    const [panelsReader, updatePanelsReader] = useAsyncResource(fetchPanels, []);
    return (
        <Suspense fallback="loading...">
            <Panels panelsReader={panelsReader} />
        </Suspense>
    )
}

const [refreshing, startTransition] = useTransition();
const refresh = useCallback(() => {
  resourceCache(stuffLoader).clear();
  startTransition(() => {
    getStuff();
  });
}, []);