refinedev · omeraplak · Jan 23, 2023 · Jan 12, 2023 · Jan 13, 2023 · Jan 13, 2023
diff --git a/examples/infinity-list/.gitignore b/examples/infinity-list/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/infinity-list/README.md b/examples/infinity-list/README.md
@@ -0,0 +1,45 @@
+
+<div align="center" style="margin: 30px;">
+<a href="https://refine.dev/">
+  <img src="https://raw.githubusercontent.com/refinedev/refine/master/logo.png"   style="width:250px;" align="center" />
+</a>
+<br />
+<br />
+
+<div align="center">
+    <a href="https://refine.dev">Home Page</a> |
+    <a href="https://discord.gg/refine">Discord</a> |
+    <a href="https://refine.dev/examples/">Examples</a> | 
+    <a href="https://refine.dev/blog/">Blog</a> | 
+    <a href="https://refine.dev/docs/">Documentation</a> | 
+    <a href="https://github.com/refinedev/refine/projects/1">Roadmap</a>
+</div>
+</div>
+
+<br />
+
+<div align="center"><strong>Build your <a href="https://reactjs.org/">React</a>-based CRUD applications, without constraints.</strong><br>An open source, headless web application framework developed with flexibility in mind.
+
+<br />
+<br />
+
+
+[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/refine)
+[![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)](https://twitter.com/refine_dev)
+
+<a href="https://www.producthunt.com/posts/refine-3?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-refine&#0045;3" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=362220&theme=light&period=daily" alt="refine - 100&#0037;&#0032;open&#0032;source&#0032;React&#0032;framework&#0032;to&#0032;build&#0032;web&#0032;apps&#0032;3x&#0032;faster | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+
+</div>
+
+## Try it out on your local
+
+```bash
+npm create refine-app@latest -- --example base-headless
+```
+
+## Try it out on StackBlitz
+
+<br/>
+
+[![Open base-headless example from refine](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/refinedev/refine/tree/master/examples/base-headless?terminal=start&preset=node)
+
diff --git a/examples/infinity-list/package.json b/examples/infinity-list/package.json
@@ -0,0 +1,39 @@
+{
+    "name": "infinity-list",
+    "version": "3.25.0",
+    "private": true,
+    "dependencies": {
+        "@pankod/refine-core": "^3.94.2",
+        "@pankod/refine-cli": "^1.17.0",
+        "@pankod/refine-react-hook-form": "^3.37.2",
+        "@pankod/refine-react-router-v6": "^3.38.0",
+        "@pankod/refine-react-table": "^4.9.0",
+        "@pankod/refine-simple-rest": "^3.37.4",
+        "@types/node": "^12.20.11",
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "react-scripts": "^5.0.0",
+        "cross-env": "^7.0.3",
+        "typescript": "^4.7.4"
+    },
+    "scripts": {
+        "start": "cross-env DISABLE_ESLINT_PLUGIN=true react-scripts start",
+        "build": "cross-env DISABLE_ESLINT_PLUGIN=true react-scripts build",
+        "eject": "react-scripts eject",
+        "refine": "refine"
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    }
+}
diff --git a/examples/infinity-list/public/favicon.ico b/examples/infinity-list/public/favicon.ico
diff --git a/examples/infinity-list/public/index.html b/examples/infinity-list/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using refine" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+  <title>refine base headless example</title>
+  <!-- <script src="https://cdn.tailwindcss.com"></script> -->
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/examples/infinity-list/public/manifest.json b/examples/infinity-list/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "refine base infinity list example",
+  "name": "refine base infinity list example",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/examples/infinity-list/src/App.css b/examples/infinity-list/src/App.css
@@ -0,0 +1,29 @@
+table {
+    border-spacing: 0;
+    border: 1px solid black;
+}
+
+table th,
+td {
+    margin: 0;
+    padding: 0.5rem;
+    border-bottom: 1px solid black;
+    border-right: 1px solid black;
+}
+
+table tr:last-child td {
+    border-bottom: 0;
+}
+
+table th,
+td {
+    margin: 0;
+    padding: 0.5rem;
+    border-bottom: 1px solid black;
+    border-right: 1px solid black;
+}
+
+table th:last-child,
+td:last-child {
+    border-right: 0;
+}
diff --git a/examples/infinity-list/src/App.tsx b/examples/infinity-list/src/App.tsx
@@ -0,0 +1,23 @@
+import { Refine } from "@pankod/refine-core";
+import routerProvider from "@pankod/refine-react-router-v6";
+import dataProvider from "@pankod/refine-simple-rest";
+
+import { PostList } from "pages/posts/list";
+import "./App.css";
+
+const App: React.FC = () => {
+    return (
+        <Refine
+            dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+            routerProvider={routerProvider}
+            resources={[
+                {
+                    name: "posts",
+                    list: PostList,
+                },
+            ]}
+        />
+    );
+};
+
+export default App;
diff --git a/examples/infinity-list/src/index.tsx b/examples/infinity-list/src/index.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+
+import App from "./App";
+
+const container = document.getElementById("root");
+// eslint-disable-next-line
+const root = createRoot(container!);
+root.render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>,
+);
diff --git a/examples/infinity-list/src/interfaces/index.d.ts b/examples/infinity-list/src/interfaces/index.d.ts
@@ -0,0 +1,6 @@
+export interface IProduct {
+    id: number;
+    name: string;
+    material: string;
+    description: string;
+}
diff --git a/examples/infinity-list/src/pages/posts/list.tsx b/examples/infinity-list/src/pages/posts/list.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { useInfinityGetList } from "@pankod/refine-core";
+
+import { IProduct } from "interfaces";
+
+export const PostList: React.FC = () => {
+    const {
+        data,
+        error,
+        hasNextPage,
+        isLoading,
+        fetchNextPage,
+        isFetchingNextPage,
+    } = useInfinityGetList<IProduct>({
+        resource: "products",
+    });
+
+    if (isLoading) {
+        return <p>Loading</p>;
+    }
+    if (error) {
+        return <p>ERROR</p>;
+    }
+
+    return (
+        <div>
+            {data?.pages.map((page) =>
+                page.data.map((product) => (
+                    <li key={product.id}>
+                        {product.id}-{product.name}
+                    </li>
+                )),
+            )}
+
+            <button
+                onClick={() => fetchNextPage()}
+                disabled={!hasNextPage || isFetchingNextPage}
+            >
+                {isFetchingNextPage
+                    ? "Loading more..."
+                    : hasNextPage
+                    ? "Load More"
+                    : "Nothing more to load"}
+            </button>
+        </div>
+    );
+};
diff --git a/examples/infinity-list/src/react-app-env.d.ts b/examples/infinity-list/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/examples/infinity-list/tsconfig.json b/examples/infinity-list/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src",
+  ]
+}
@@ -89,6 +89,11 @@ export interface GetListResponse<TData = BaseRecord> {
     total: number;
 }
 
+export interface GetInfinityListResponse<TData = BaseRecord>
+    extends GetListResponse<TData> {
+    pagination?: Pagination;
+}
+
 export interface CreateResponse<TData = BaseRecord> {
     data: TData;
 }

@@ -15,3 +15,4 @@ export { useCustom } from "./useCustom";
 export { useCustomMutation } from "./useCustomMutation";
 
 export { useDataProvider } from "./useDataProvider";
+export { useInfinityGetList } from "./useInfinityGetList";
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,3 +15,4 @@ export { useCustom } from "./useCustom";
		export { useCustomMutation } from "./useCustomMutation";

		export { useDataProvider } from "./useDataProvider";
		export { useInfinityGetList } from "./useInfinityGetList";