feat: favorites updates, standard table/columns

feat: ability to clear all favorites feat: remove item from favorites
solana-labs · Oct 31, 2019 · b4a94f1 · b4a94f1
1 parent 06ddc32
commit b4a94f1
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 111 deletions.
diff --git a/src/v2/components/Accounts/Detail/index.jsx b/src/v2/components/Accounts/Detail/index.jsx
@@ -86,7 +86,7 @@ const AccountDetail = ({match}: {match: Match}) => {
   const url = window.location.href;
   const favoritesData = {
     id: accountId,
-    ...accountInfo,
+    type: accountInfo.type,
   };
 
   return (

diff --git a/src/v2/components/Favorites/Accounts.jsx b/src/v2/components/Favorites/Accounts.jsx
diff --git a/src/v2/components/Favorites/index.jsx b/src/v2/components/Favorites/index.jsx
@@ -1,20 +1,58 @@
 // @flow
-import {Container, Tabs, useTheme} from '@material-ui/core';
+import {
+  Container,
+  TableCell,
+  TableRow,
+  Tabs,
+  useTheme,
+} from '@material-ui/core';
 import {observer} from 'mobx-react-lite';
 import useMediaQuery from '@material-ui/core/useMediaQuery/useMediaQuery';
+import Button from '@material-ui/core/Button';
+import DeleteIcon from '@material-ui/icons/Delete';
+import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
 import {eq, map, values} from 'lodash/fp';
 import React, {useState} from 'react';
 import SectionHeader from 'v2/components/UI/SectionHeader';
 import TabNav from 'v2/components/UI/TabNav';
-import ProgramsTable from 'v2/components/Programs/Table';
+import Table from 'v2/components/UI/Table';
+import TypeLabel from 'v2/components/UI/TypeLabel';
 import {ReactComponent as WarnIcon} from 'v2/assets/icons/warn.svg';
 import FavoritesStore from 'v2/stores/favorites';
 
-import AccountsTable from './Accounts';
 import useStyles from './styles';
+import {Link} from 'react-router-dom';
+import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 
-const TransactionsPage = () => {
-  const {endpointFavorites} = FavoritesStore;
+const fields: TableHeadProps[] = [
+  {
+    id: 'id',
+    label: 'id',
+    text: '',
+    term: '',
+  },
+  {
+    label: 'type',
+    name: 'type',
+    text: '',
+    term: '',
+  },
+  {
+    label: 'saved at',
+    name: 'timestamp',
+    text: '',
+    term: '',
+  },
+  {
+    label: '',
+    name: '',
+    text: '',
+    term: '',
+  },
+];
+
+const FavoritesPage = () => {
+  const {endpointFavorites, removeFavorites, clear} = FavoritesStore;
   const classes = useStyles();
   const [tab, setTab] = useState('programs');
   const theme = useTheme();
@@ -25,11 +63,54 @@ const TransactionsPage = () => {
     <TabNav key={label} label={label} value={label} />
   );
 
+  const clearFavorites = () => {
+    if (
+      window.confirm(
+        'This will clear all locally stored favorites. Are you sure?',
+      )
+    ) {
+      clear();
+    }
+  };
+
+  const remove = id => () => {
+    removeFavorites(id, tab);
+  };
+
+  const asTime = x => {
+    return formatDistanceToNow(Date.parse(x), {addSuffix: true});
+  };
+
+  const renderRow = ({data: row}) => {
+    const {id, type, timestamp} = row;
+
+    return (
+      <TableRow hover key={id}>
+        <TableCell title={id}>
+          <Link to={`/${tab}/${id}`}>{id}</Link>
+        </TableCell>
+        <TableCell width={110}>
+          <div>
+            <TypeLabel type="loader" label={type || 'TODO'} />
+          </div>
+        </TableCell>
+        <TableCell width={135} title={timestamp}>
+          {(timestamp && asTime(timestamp)) || 'Unknown'}
+        </TableCell>
+        <TableCell width={30} title="Remove this item">
+          <Button color="primary" onClick={remove(id)}>
+            <DeleteIcon />
+          </Button>
+        </TableCell>
+      </TableRow>
+    );
+  };
+
   return (
     <Container>
       <SectionHeader title="Favorites">
         <div className={classes.warn}>
-          <WarnIcon />
+          <WarnIcon fill="#f71ef4" />
           If you clear your cache, your favorites will be deleted.
         </div>
       </SectionHeader>
@@ -44,11 +125,27 @@ const TransactionsPage = () => {
         {map(renderTabNav)(tabNav)}
       </Tabs>
       {eq('programs', tab) && (
-        <ProgramsTable programs={values(endpointFavorites.programs)} />
+        <Table
+          fields={fields}
+          renderRow={renderRow}
+          data={values(endpointFavorites.programs)}
+        />
+      )}
+      {eq('accounts', tab) && (
+        <Table
+          fields={fields}
+          renderRow={renderRow}
+          data={values(endpointFavorites.accounts)}
+        />
       )}
-      {eq('accounts', tab) && <AccountsTable />}
+      <div>
+        <Button color="primary" onClick={clearFavorites}>
+          <DeleteForeverIcon />
+          Clear All Favorites
+        </Button>
+      </div>
     </Container>
   );
 };
 
-export default observer(TransactionsPage);
+export default observer(FavoritesPage);
diff --git a/src/v2/components/Programs/Detail/index.jsx b/src/v2/components/Programs/Detail/index.jsx
@@ -106,7 +106,7 @@ const ProgramDetail = ({match}: {match: Match}) => {
   const url = window.location.href;
   const favoritesData = {
     id: programId,
-    ...accountInfo,
+    type: accountInfo.type,
   };
 
   return (

diff --git a/src/v2/stores/favorites/index.js b/src/v2/stores/favorites/index.js
@@ -3,6 +3,10 @@ import {action, computed, decorate, observable, reaction} from 'mobx';
 import socketActions from '../socket';
 
 class Store {
+  emptyFavorites() {
+    return {accounts: {}, programs: {}};
+  }
+
   constructor() {
     reaction(
       () => socketActions.endpointName,
@@ -21,17 +25,18 @@ class Store {
     const localFavorites = localStorage.getItem('favorites');
     const {endpointName} = socketActions;
     if (!localFavorites) {
-      this.favorites = {[endpointName]: {accounts: {}, programs: {}}};
+      this.favorites = {[endpointName]: this.emptyFavorites()};
       return;
     }
     this.favorites = JSON.parse(localFavorites);
     if (!this.favorites[endpointName]) {
-      this.favorites[endpointName] = {accounts: {}, programs: {}};
+      this.favorites[endpointName] = this.emptyFavorites();
     }
   }
 
   addFavorites(item, type) {
     const {endpointName} = socketActions;
+    item.timestamp = new Date().toISOString();
     this.favorites[endpointName][type][item.id] = item;
     this.saveToLocal();
   }
@@ -40,7 +45,11 @@ class Store {
     delete this.favorites[endpointName][type][id];
     this.saveToLocal();
   }
-
+  clear() {
+    const {endpointName} = socketActions;
+    this.favorites[endpointName] = this.emptyFavorites();
+    this.saveToLocal();
+  }
   get endpointFavorites() {
     const {endpointName} = socketActions;
     return this.favorites[endpointName];
@@ -50,6 +59,7 @@ class Store {
 decorate(Store, {
   addFavorites: action.bound,
   removeFavorites: action.bound,
+  clear: action.bound,
   favorites: observable,
   endpointFavorites: computed,
 });