Optimise bundle size - remove odata and ramda

Add requestOptions prop
jamerst · Feb 14, 2022 · 36d5b5e · 36d5b5e
1 parent 6bd9b22
commit 36d5b5e
Show file tree

Hide file tree

Showing 16 changed files with 135 additions and 238 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # ODataGrid
 ODataGrid is an extension to the [MUI DataGrid](https://github.com/mui-org/material-ui-x) React component which implements features such as sorting, pagination, column selection, and filtering using the [OData Standard](https://www.odata.org/). This allows you to quickly create a powerful interface for browsing data with minimal back-end code.
 
-![ODataGrid in action](images/o-data-grid.png)
+![ODataGrid in action](https://raw.githubusercontent.com/jamerst/o-data-grid/main/images/o-data-grid.png)
 
 ## Features
 - Supports DataGrid and DataGridPro
@@ -81,6 +81,7 @@ _* = required property_
 | `disableHistory` | `boolean` | | Disable the browser history integration for sorting and pagination if set to `true`. <br/> **Note: this does not disable history integration for the filter builder.** |
 | `$filter` | `string` | | Static value to use for the `$filter` clause of the query.<br/><br/>**Note: this also has the effect of setting `disableFilterBuilder` to `true`**. |
 | `filterBuilderProps` | [`FilterBuilderProps`](#FilterBuilderProps) | | Props to be passed to the FilterBuilder. |
+| `requestOptions` | `RequestInit` | | Options to use in `fetch()` call to OData endpoint. |
 
 ### <a id="ODataGridColDef">ODataGridColDef</a>
 The column definition is again similar to the standard [GridColDef](https://mui.com/components/data-grid/columns/).

diff --git a/packages/.eslintrc.json b/packages/.eslintrc.json
@@ -28,5 +28,10 @@
         "react/prop-types": "off",
         "@typescript-eslint/no-non-null-assertion": "off",
         "@typescript-eslint/no-explicit-any": "off"
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
     }
 }
diff --git a/packages/base/components/ODataGridBase.tsx b/packages/base/components/ODataGridBase.tsx
@@ -1,6 +1,5 @@
 import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { Box } from "@mui/system";
-import { o, OdataQuery } from "odata"
 
 import { ResponsiveValues, useResponsive } from "../hooks";
 
@@ -86,40 +85,37 @@ const ODataGridBase = <ComponentProps extends IGridProps,
       });
     });
 
-    const $select = Array.from(fields).join(",");
-    const $expand = expands.map(e => ExpandToQuery(e)).join(",");
-    const $top = pageSize;
-    const $skip = pageNumber * pageSize;
-
-    const query: OdataQuery = {
-      $select,
-      $expand,
-      $top,
-      $skip,
-      $count: fetchCount.current,
-      ...queryString
+    const query = new URLSearchParams();
+    query.append("$select", Array.from(fields).join(","));
+    query.append("$expand", expands.map(e => ExpandToQuery(e)).join(","));
+    query.append("$top", pageSize.toString());
+    query.append("$skip", (pageNumber * pageSize).toString());
+
+    if (fetchCount.current) {
+      query.append("$count", "true");
+    }
+
+    if (queryString) {
+      for (const key in queryString) {
+        query.append(key, queryString[key]);
+      }
     }
 
     if (filter) {
-      query.$filter = filter;
+      query.append("$filter", filter);
     } else if (props.$filter) {
-      query.$filter = props.$filter;
+      query.append("$filter", props.$filter);
     }
 
     if (sortModel && sortModel.length > 0) {
-      query.$orderby = sortModel.map(s => {
+      query.append("$orderby", sortModel.map(s => {
         const sortCol = props.columns.find(c => c.field === s.field);
         return `${sortCol!.sortField ?? sortCol!.field}${s.sort === "desc" ? " desc" : ""}`;
-      }).join(",");
+      }).join(","));
     }
 
-    const rawResponse = await o(props.url)
-      .get()
-      .fetch(query);
-
-    const response = rawResponse as Response;
-
-    if (response?.ok ?? false) {
+    const response = await fetch(props.url + "?" + query.toString(), props.requestOptions);
+    if (response.ok) {
       const data = await response.json() as ODataResponse;
 
       // flatten object so that the DataGrid can access all the properties
@@ -151,7 +147,8 @@ const ODataGridBase = <ComponentProps extends IGridProps,
       props.columns,
       props.$filter,
       props.disableFilterBuilder,
-      props.filterBuilderProps?.disableHistory
+      props.filterBuilderProps?.disableHistory,
+      props.requestOptions
     ]
   );
 

diff --git a/packages/base/hooks.ts b/packages/base/hooks.ts
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react"
 import { useTheme, Breakpoint, Theme } from "@mui/material/styles"
-import { findLast } from "ramda"
 
 export type ResponsiveValues<P> = Partial<Record<Breakpoint, P>>
 
@@ -10,11 +9,12 @@ export const useResponsive = () => {
   const matches = useBreakpoints();
 
   return function <P>(responsiveValues: ResponsiveValues<P>) {
-    const match = findLast(
-      (breakpoint) =>
-        matches[breakpoint]! && responsiveValues[breakpoint] != null,
-      theme.breakpoints.keys
-    )
+    let match: Breakpoint | undefined;
+    theme.breakpoints.keys.forEach((breakpoint) => {
+      if (matches[breakpoint] && responsiveValues[breakpoint] != null) {
+        match = breakpoint;
+      }
+    })
 
     return match && responsiveValues[match]
   }

diff --git a/packages/base/types.ts b/packages/base/types.ts
@@ -21,7 +21,8 @@ export type ODataGridBaseProps<
     disableFilterBuilder?: boolean,
     disableHistory?: boolean,
     $filter?: string,
-    filterBuilderProps?: ExternalBuilderProps
+    filterBuilderProps?: ExternalBuilderProps,
+    requestOptions?: RequestInit
   };
 
 // remove properties which should not be used - these are handled internally or overridden

diff --git a/packages/o-data-grid-pro/README.md b/packages/o-data-grid-pro/README.md
@@ -1,7 +1,7 @@
 # ODataGridPro
 ODataGrid is an extension to the [MUI DataGrid](https://github.com/mui-org/material-ui-x) React component which implements features such as sorting, pagination, column selection, and filtering using the [OData Standard](https://www.odata.org/). This allows you to quickly create a powerful interface for browsing data with minimal back-end code.
 
-![ODataGrid in action](../../images/o-data-grid.png)
+![ODataGrid in action](https://raw.githubusercontent.com/jamerst/o-data-grid/main/images/o-data-grid.png)
 
 ## Features
 - Supports DataGrid and DataGridPro
@@ -81,6 +81,7 @@ _* = required property_
 | `disableHistory` | `boolean` | | Disable the browser history integration for sorting and pagination if set to `true`. <br/> **Note: this does not disable history integration for the filter builder.** |
 | `$filter` | `string` | | Static value to use for the `$filter` clause of the query.<br/><br/>**Note: this also has the effect of setting `disableFilterBuilder` to `true`**. |
 | `filterBuilderProps` | [`FilterBuilderProps`](#FilterBuilderProps) | | Props to be passed to the FilterBuilder. |
+| `requestOptions` | `RequestInit` | | Options to use in `fetch()` call to OData endpoint. |
 
 ### <a id="ODataGridColDef">ODataGridColDef</a>
 The column definition is again similar to the standard [GridColDef](https://mui.com/components/data-grid/columns/).

diff --git a/packages/o-data-grid-pro/dev/App.tsx b/packages/o-data-grid-pro/dev/App.tsx
@@ -24,7 +24,7 @@ const App = () => {
       <ThemeProvider theme={theme}>
         <CssBaseline />
         <ODataGridPro
-          url="/api/odata/job"
+          url="http://0.0.0.0:5000/api/odata/job"
           columns={columns}
           columnVisibilityModel={columnVisibility}
           getRowId={(row) => row.Id}
@@ -87,7 +87,7 @@ const columns: ODataGridColDef[] = [
     ),
     getCustomQueryString: (_, v) => {
       const filter = v as LocationFilter;
-      let result: QueryStringCollection = {};
+      const result: QueryStringCollection = {};
       if (filter.location) {
         result["location"] = filter.location!;
         result["distance"] = (filter.distance ?? 15).toString();
@@ -210,7 +210,7 @@ const columns: ODataGridColDef[] = [
 const columnVisibility: ODataColumnVisibilityModel = {
   "Company/Name": { xs: false, md: true },
   "Salary": { xs: false, lg: true },
-  "Status": true,
+  "Status": false,
   "JobCategories": { xs: false, xl: true },
   "Source/DisplayName": true,
   "Posted": { xs: false, sm: true },

diff --git a/packages/o-data-grid-pro/package.json b/packages/o-data-grid-pro/package.json
@@ -1,10 +1,11 @@
 {
   "name": "o-data-grid-pro",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A React Data Grid and Query Builder for OData APIs. Based on the Material-UI DataGridPro.",
   "main": "build/o-data-grid-pro-cjs.js",
   "module": "build/o-data-grid-pro-esm.js",
   "types": "build/o-data-grid-pro.d.ts",
+  "sideEffects": false,
   "scripts": {
     "build": "cd ../ && node_modules/.bin/rollup -c ./rollup.o-data-grid-pro.config.js",
     "start": "cd ../ && node_modules/.bin/webpack-dev-server --mode development --open --hot -c ./webpack.o-data-grid-pro.config.js",
@@ -45,8 +46,6 @@
   },
   "dependencies": {
     "immutable": "^4.0.0",
-    "odata": "^1.3.1",
-    "ramda": "^0.27.1",
     "recoil": "^0.5.2",
     "tss-react": "^3.2.4",
     "uuid": "^8.3.2"

diff --git a/packages/o-data-grid-pro/pnpm-lock.yaml b/packages/o-data-grid-pro/pnpm-lock.yaml
diff --git a/packages/o-data-grid/README.md b/packages/o-data-grid/README.md
@@ -1,7 +1,7 @@
 # ODataGrid
 ODataGrid is an extension to the [MUI DataGrid](https://github.com/mui-org/material-ui-x) React component which implements features such as sorting, pagination, column selection, and filtering using the [OData Standard](https://www.odata.org/). This allows you to quickly create a powerful interface for browsing data with minimal back-end code.
 
-![ODataGrid in action](../../images/o-data-grid.png)
+![ODataGrid in action](https://raw.githubusercontent.com/jamerst/o-data-grid/main/images/o-data-grid.png)
 
 ## Features
 - Supports DataGrid and DataGridPro
@@ -81,6 +81,7 @@ _* = required property_
 | `disableHistory` | `boolean` | | Disable the browser history integration for sorting and pagination if set to `true`. <br/> **Note: this does not disable history integration for the filter builder.** |
 | `$filter` | `string` | | Static value to use for the `$filter` clause of the query.<br/><br/>**Note: this also has the effect of setting `disableFilterBuilder` to `true`**. |
 | `filterBuilderProps` | [`FilterBuilderProps`](#FilterBuilderProps) | | Props to be passed to the FilterBuilder. |
+| `requestOptions` | `RequestInit` | | Options to use in `fetch()` call to OData endpoint. |
 
 ### <a id="ODataGridColDef">ODataGridColDef</a>
 The column definition is again similar to the standard [GridColDef](https://mui.com/components/data-grid/columns/).

diff --git a/packages/o-data-grid/dev/App.tsx b/packages/o-data-grid/dev/App.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { CssBaseline, Typography, Grid, TextField, Slider, Chip } from "@mui/material";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
-import { GridSortModel, GridOverlay } from "@mui/x-data-grid"
+import { GridSortModel } from "@mui/x-data-grid"
 import { ODataGridColDef, QueryStringCollection, ODataColumnVisibilityModel } from "../src/index";
 import ODataGrid from "../src/ODataGrid";
 import { CacheProvider } from "@emotion/react";
@@ -87,7 +87,7 @@ const columns: ODataGridColDef[] = [
     ),
     getCustomQueryString: (_, v) => {
       const filter = v as LocationFilter;
-      let result: QueryStringCollection = {};
+      const result: QueryStringCollection = {};
       if (filter.location) {
         result["location"] = filter.location!;
         result["distance"] = (filter.distance ?? 15).toString();

diff --git a/packages/o-data-grid/package.json b/packages/o-data-grid/package.json
@@ -1,10 +1,11 @@
 {
   "name": "o-data-grid",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A React Data Grid and Query Builder for OData APIs. Based on the Material-UI DataGrid.",
   "main": "build/o-data-grid-cjs.js",
   "module": "build/o-data-grid-esm.js",
   "types": "build/o-data-grid.d.ts",
+  "sideEffects": false,
   "scripts": {
     "build": "cd ../ && node_modules/.bin/rollup -c ./rollup.o-data-grid.config.js",
     "start": "cd ../ && node_modules/.bin/webpack-dev-server --mode development --open --hot -c ./webpack.o-data-grid.config.js",
@@ -45,8 +46,6 @@
   },
   "dependencies": {
     "immutable": "^4.0.0",
-    "odata": "^1.3.1",
-    "ramda": "^0.27.1",
     "recoil": "^0.5.2",
     "tss-react": "^3.2.4",
     "uuid": "^8.3.2"