Merge pull request #2 from Lemoncode/feature/plumbing-table

add table component and install dependencies

Author: brauliodiez

.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',
     'react/prop-types': 'off',
+    'react/jsx-key': 'off',
   },
   settings: {
     react: {

package.json

@@ -42,13 +42,15 @@
     "@lemoncode/fonk": "^1.3.0",
     "@lemoncode/fonk-final-form": "^2.3.1",
     "@lemoncode/fonk-match-field-validator": "^1.0.1",
-    "@material-ui/core": "^4.7.0",
-    "@material-ui/icons": "^4.5.1",
+    "@material-ui/core": "4.9.11",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "4.0.0-alpha.47",
     "axios": "^0.19.0",
     "emotion": "^10.0.23",
     "final-form": "^4.18.6",
     "graphql-request": "^1.8.2",
     "lodash.flowright": "^3.5.0",
+    "lodash.get": "^4.4.2",
     "lodash.merge": "^4.6.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
@@ -57,6 +59,7 @@
     "react-promise-tracker": "^2.0.5",
     "react-router-dom": "^5.1.2",
     "react-spinners": "^0.6.1",
+    "react-table": "^7.0.4",
     "regenerator-runtime": "^0.13.3"
   },
   "devDependencies": {

src/common/components/confirmation-dialog/confirmation-dialog.component.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import Dialog from '@material-ui/core/Dialog';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogActions from '@material-ui/core/DialogActions';
+import Button from '@material-ui/core/Button';
+
+interface LabelProps {
+  closeButton: string;
+  acceptButton: string;
+}
+
+interface Props {
+  isOpen: boolean;
+  onAccept: () => void;
+  onClose: () => void;
+  title: string | React.ReactNode;
+  labels: LabelProps;
+}
+
+export const ConfirmationDialogComponent: React.FunctionComponent<Props> = props => {
+  const { isOpen, onAccept, onClose, title, labels, children } = props;
+
+  const handleAccept = () => {
+    onAccept();
+    onClose();
+  };
+
+  return (
+    <Dialog open={isOpen}>
+      <DialogTitle>{title}</DialogTitle>
+      <DialogContent>{children}</DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} color="secondary" variant="contained">
+          {labels.closeButton}
+        </Button>
+        <Button onClick={handleAccept} color="primary" variant="contained">
+          {labels.acceptButton}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

src/common/components/confirmation-dialog/confirmation-dialog.hook.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { createEmptyLookup, Lookup } from 'common/models';
+
+export const useConfirmationDialog = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [itemToDelete, setItemToDelete] = React.useState(createEmptyLookup());
+
+  return {
+    isOpen,
+    itemToDelete,
+    onAccept: () => {
+      setItemToDelete(createEmptyLookup());
+    },
+    onClose: () => setIsOpen(false),
+    onOpenDialog: (item: Lookup) => {
+      setIsOpen(true);
+      setItemToDelete(item);
+    },
+  };
+};

src/common/components/confirmation-dialog/index.ts

@@ -0,0 +1,2 @@
+export * from './confirmation-dialog.component';
+export * from './confirmation-dialog.hook';

src/common/components/pagination/index.ts

@@ -0,0 +1 @@
+export * from './pagination.component';

src/common/components/pagination/pagination.component.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Pagination from '@material-ui/lab/Pagination';
+
+interface Props {
+  pageIndex: number;
+  pageCount: number;
+  onChange: (pageIndex: number) => void;
+  className?: string;
+}
+
+export const PaginationComponent: React.FunctionComponent<Props> = props => {
+  const { pageIndex, pageCount, onChange, className } = props;
+
+  const handleChange = (event, value) => {
+    onChange(value - 1);
+  };
+
+  return (
+    <Pagination
+      className={className}
+      color="primary"
+      count={pageCount}
+      page={pageIndex + 1}
+      onChange={handleChange}
+    />
+  );
+};

src/common/components/search-bar/index.ts

@@ -0,0 +1,2 @@
+export * from './search-bar.component';
+export * from './search-bar.hook';

src/common/components/search-bar/search-bar.component.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import TextField from '@material-ui/core/TextField';
+import SearchIcon from '@material-ui/icons/Search';
+
+interface LabelProps {
+  placeholder: string;
+}
+
+interface Props {
+  search: string;
+  onSearch: (search: string) => void;
+  labels: LabelProps;
+  className?: string;
+}
+
+export const SearchBarComponent: React.FunctionComponent<Props> = props => {
+  const { search, onSearch, labels, className } = props;
+
+  return (
+    <TextField
+      className={className}
+      value={search}
+      onChange={e => onSearch(e.target.value)}
+      placeholder={labels.placeholder}
+      InputProps={{
+        startAdornment: <SearchIcon />,
+      }}
+    />
+  );
+};

src/common/components/search-bar/search-bar.hook.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useDebounce } from 'common/hooks';
+import { filterByText } from 'common/helpers';
+
+export const useSearchBar = <Entity, Key extends keyof Entity>(
+  collection: Entity[],
+  fields: Key[] | string[]
+) => {
+  const [search, setSearch] = React.useState('');
+  const [filteredList, setFilteredList] = React.useState<Entity[]>(collection);
+  React.useEffect(() => {
+    setFilteredList(collection);
+  }, [collection]);
+
+  const debouncedSearch = useDebounce(search, 250);
+  React.useEffect(() => {
+    const newFilteredList = filterByText(collection, debouncedSearch, fields);
+    setFilteredList(newFilteredList);
+  }, [debouncedSearch]);
+
+  return {
+    search,
+    onSearch: setSearch,
+    filteredList,
+  };
+};