From b4a94f19c64988f92caa89d4b28ad1c0ec9b3ba3 Mon Sep 17 00:00:00 2001 From: Sunny Gleason Date: Thu, 31 Oct 2019 12:06:20 -0400 Subject: [PATCH] feat: favorites updates, standard table/columns feat: ability to clear all favorites feat: remove item from favorites --- src/v2/components/Accounts/Detail/index.jsx | 2 +- src/v2/components/Favorites/Accounts.jsx | 97 ----------------- src/v2/components/Favorites/index.jsx | 115 ++++++++++++++++++-- src/v2/components/Programs/Detail/index.jsx | 2 +- src/v2/stores/favorites/index.js | 16 ++- 5 files changed, 121 insertions(+), 111 deletions(-) delete mode 100644 src/v2/components/Favorites/Accounts.jsx diff --git a/src/v2/components/Accounts/Detail/index.jsx b/src/v2/components/Accounts/Detail/index.jsx index b292f537..a1d4f3dd 100644 --- 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 deleted file mode 100644 index 9bb65ca7..00000000 --- a/src/v2/components/Favorites/Accounts.jsx +++ /dev/null @@ -1,97 +0,0 @@ -// @flow - -import React from 'react'; -import {TableCell, TableRow} from '@material-ui/core'; -import cn from 'classnames'; -import useMediaQuery from '@material-ui/core/useMediaQuery'; -import {useTheme} from '@material-ui/core/styles'; -import {observer} from 'mobx-react-lite'; -import {Link} from 'react-router-dom'; -import {map, values} from 'lodash/fp'; -import Table from 'v2/components/UI/Table'; -import type {TableHeadProps} from 'v2/@types/table'; -import TableCard from 'v2/components/UI/TableCard'; -import FavoritesStore from 'v2/stores/favorites'; - -import useStyles from './styles'; - -const fields: TableHeadProps[] = [ - { - id: 'id', - label: 'Account Id', - text: '', - term: '', - }, - { - id: 'name', - label: 'nickname', - text: '', - term: '', - }, - { - id: 'balance', - label: 'balance', - text: '', - term: '', - }, - { - id: 'transactions', - label: 'transactions', - text: '', - term: '', - }, -]; - -const AccountsTable = ({separate}: {separate: boolean}) => { - const {endpointFavorites} = FavoritesStore; - const classes = useStyles(); - const theme = useTheme(); - const showTable = useMediaQuery(theme.breakpoints.up('md')); - - const renderRow = ({data: account}) => { - const {id, owner} = account; - return ( - - - {id} - - {owner} - 0.006 SOL | $1.12 - 1234 - - ); - }; - - const renderCard = account => { - const {id, owner} = account; - const data = [ - { - label: 'Account Id', - value: id, - }, - { - label: 'Nickname', - value: owner, - }, - ]; - return ; - }; - - return ( -
- {showTable ? ( - - ) : ( -
- {map(renderCard)(values(endpointFavorites.accounts))} -
- )} - - ); -}; - -export default observer(AccountsTable); diff --git a/src/v2/components/Favorites/index.jsx b/src/v2/components/Favorites/index.jsx index 975e149c..aad3ad1f 100644 --- 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 = () => { ); + 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 ( + + + {id} + + +
+ +
+ + + {(timestamp && asTime(timestamp)) || 'Unknown'} + + + + + + ); + }; + return (
- + If you clear your cache, your favorites will be deleted.
@@ -44,11 +125,27 @@ const TransactionsPage = () => { {map(renderTabNav)(tabNav)} {eq('programs', tab) && ( - +
+ )} + {eq('accounts', tab) && ( +
)} - {eq('accounts', tab) && } +
+ +
); }; -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 index 9a8613d9..39f00c54 100644 --- 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 index ee1b247f..44ac96e1 100644 --- 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, });