From aac4fc24c9c208b3424b5b1739d9a3463eea7243 Mon Sep 17 00:00:00 2001 From: Allison Shultes Date: Wed, 21 Aug 2019 15:33:51 +0100 Subject: [PATCH 01/11] First pass - showLinkPath not working as expected --- packages/components/List/index.js | 35 +++++++++++++++++ .../components/List/stories/index.stories.js | 39 +++++++++++++++++++ packages/components/SimpleCard/index.js | 2 +- 3 files changed, 75 insertions(+), 1 deletion(-) create mode 100644 packages/components/List/index.js create mode 100644 packages/components/List/stories/index.stories.js diff --git a/packages/components/List/index.js b/packages/components/List/index.js new file mode 100644 index 0000000..528a24f --- /dev/null +++ b/packages/components/List/index.js @@ -0,0 +1,35 @@ +import React from 'react'; +import SimpleCard from '../SimpleCard'; + +class List extends React.Component { + + render() { + + const listItems = this.props.items.map((item) => { + if (item.display) { + return ; + } else { + return null; + } + }).filter(item => { + return item !== null; + }); + + return (<> +
+ {listItems} +
+ + ); + } +} + +export default List; \ No newline at end of file diff --git a/packages/components/List/stories/index.stories.js b/packages/components/List/stories/index.stories.js new file mode 100644 index 0000000..c4817a3 --- /dev/null +++ b/packages/components/List/stories/index.stories.js @@ -0,0 +1,39 @@ +import React from 'react'; + +import { storiesOf } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; +import StoryRouter from 'storybook-react-router'; +import List from '../index.js'; + +export const items = [{ + id: '1234', + key: 'abc123', + title: 'Sample Simple Card Title One', + description: 'This is a sample card description. This is fun!', + display: true, +}, { + id: '5678', + key: 'def456', + title: 'Sample Simple Card Title Two', + description: 'This is a sample card description. This is fun!', + display: true, +}]; + +export const actions = { + handleEdit: action('handleEdit'), + handleDelete: action('handleDelete'), + showLinkPath: action('showLinkPath') +}; + +storiesOf('List', module) + .addDecorator(StoryRouter()) + .add('default', () => { + return ( + + ) + }); \ No newline at end of file diff --git a/packages/components/SimpleCard/index.js b/packages/components/SimpleCard/index.js index d642840..1e96330 100644 --- a/packages/components/SimpleCard/index.js +++ b/packages/components/SimpleCard/index.js @@ -38,7 +38,7 @@ class SimpleCard extends Component { } render() { - + console.log(this.props); return ( From 521632695c1b4d0e1e8e380d96141b08f9657744 Mon Sep 17 00:00:00 2001 From: Allison Shultes Date: Wed, 28 Aug 2019 11:59:11 +0100 Subject: [PATCH 02/11] Draft - search bar --- packages/components/List/index.js | 70 +++++++- .../components/List/stories/index.stories.js | 13 +- packages/components/SearchBar/index.js | 47 ++++++ packages/components/SimpleCard/index.js | 20 +-- .../SimpleCard/stories/index.stories.js | 29 ++-- packages/components/TranscriptCard/index.js | 157 ++++++++++++++++++ 6 files changed, 302 insertions(+), 34 deletions(-) create mode 100644 packages/components/SearchBar/index.js create mode 100644 packages/components/TranscriptCard/index.js diff --git a/packages/components/List/index.js b/packages/components/List/index.js index 528a24f..1924f9a 100644 --- a/packages/components/List/index.js +++ b/packages/components/List/index.js @@ -1,22 +1,68 @@ import React from 'react'; import SimpleCard from '../SimpleCard'; +import InputGroup from 'react-bootstrap/InputGroup'; +import FormControl from 'react-bootstrap/FormControl'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { + faSearch, +} from '@fortawesome/free-solid-svg-icons'; + +const includesText = (textOne, textTwo) => { + console.log('includes text', textOne, textTwo); + return textOne.toLowerCase().trim().includes(textTwo.toLowerCase().trim()); +}; class List extends React.Component { + constructor(props) { + super(props); + this.state = { + showSearchInput: true + }; + } + + handleSearch = searchText => { + console.log('search text', searchText); + console.log('logging items', this.props.items); + const results = this.props.items.filter(project => { + console.log('project', project); + if ( + includesText(project.title, searchText) || + includesText(project.description, searchText) + ) { + project.display = true; + + return project; + } else { + project.display = false; + + return project; + } + }); + this.props.handleUpdateList(results); + }; + + handleShowSearchBar = () => { + this.setState(state => { + return { showSearchInput: !state.showSearchInput }; + }); + } + render() { const listItems = this.props.items.map((item) => { if (item.display) { - return ; - } else { + showLink={ this.props.showLink } + /> + )} else { return null; } }).filter(item => { @@ -25,6 +71,22 @@ class List extends React.Component { return (<>
+ + + + + + + + {listItems}
diff --git a/packages/components/List/stories/index.stories.js b/packages/components/List/stories/index.stories.js index c4817a3..c2bdfcd 100644 --- a/packages/components/List/stories/index.stories.js +++ b/packages/components/List/stories/index.stories.js @@ -1,9 +1,10 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; -import { action } from '@storybook/addon-actions'; +import { actions } from '@storybook/addon-actions'; import StoryRouter from 'storybook-react-router'; import List from '../index.js'; +import SearchBar from '../../SearchBar'; export const items = [{ id: '1234', @@ -19,11 +20,7 @@ export const items = [{ display: true, }]; -export const actions = { - handleEdit: action('handleEdit'), - handleDelete: action('handleDelete'), - showLinkPath: action('showLinkPath') -}; +const listEventNames = actions('handleEdit', 'handleDelete', 'showLink', 'handleSearch'); storiesOf('List', module) .addDecorator(StoryRouter()) @@ -31,9 +28,7 @@ storiesOf('List', module) return ( ) }); \ No newline at end of file diff --git a/packages/components/SearchBar/index.js b/packages/components/SearchBar/index.js new file mode 100644 index 0000000..1c87d00 --- /dev/null +++ b/packages/components/SearchBar/index.js @@ -0,0 +1,47 @@ + +import React from 'react'; +import InputGroup from 'react-bootstrap/InputGroup'; +import FormControl from 'react-bootstrap/FormControl'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { + faSearch, +} from '@fortawesome/free-solid-svg-icons'; + +class SearchBar extends React.Component { + constructor(props) { + super(props); + this.state = { + showSearchInput: false + }; + } + + handleShowSearchBar = () => { + this.setState(state => { + return { showSearchInput: !state.showSearchInput }; + }); + } + + render() { + + return ( + + + + + + + + + ); + } +} + +export default SearchBar; \ No newline at end of file diff --git a/packages/components/SimpleCard/index.js b/packages/components/SimpleCard/index.js index 1e96330..952d887 100644 --- a/packages/components/SimpleCard/index.js +++ b/packages/components/SimpleCard/index.js @@ -32,26 +32,26 @@ class SimpleCard extends Component { this.props.handleEdit(this.props.id); } - showLinkPath = () => { - // Changed from original code because the function for this exists in a higer-level component - return this.props.showLinkPath(this.props.id) ? this.props.showLinkPath(this.props.id) : '/'; + showLink= (id) => { + console.log(id); + this.props.showLink(id); } - + render() { console.log(this.props); return ( - + + - - {this.props.title} - + {this.props.title} + - + + + + + + + + + + {status && status === 'info' ? ( + + ) : ( + '' + )} + {status && status === 'danger' ? ( + + ) : ( + '' + )} + {status && status === 'success' ? ( + + ) : ( + '' + )} + + + + + + + {this.props.subtitle} + + + + + + {description} + + + + + ); + } +} + +export default TranscriptCard; \ No newline at end of file From d71865014a8f675854934018fdc93f3061a30d96 Mon Sep 17 00:00:00 2001 From: Allison Shultes Date: Thu, 29 Aug 2019 11:41:47 +0100 Subject: [PATCH 03/11] Adds search bar component --- packages/components/SearchBar/index.js | 39 +++++++++++-------- .../SearchBar/stories/index.stories.js | 22 +++++++++++ 2 files changed, 45 insertions(+), 16 deletions(-) create mode 100644 packages/components/SearchBar/stories/index.stories.js diff --git a/packages/components/SearchBar/index.js b/packages/components/SearchBar/index.js index 1c87d00..6477194 100644 --- a/packages/components/SearchBar/index.js +++ b/packages/components/SearchBar/index.js @@ -1,5 +1,5 @@ -import React from 'react'; +import React, { useState } from 'react'; import InputGroup from 'react-bootstrap/InputGroup'; import FormControl from 'react-bootstrap/FormControl'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -7,41 +7,48 @@ import { faSearch, } from '@fortawesome/free-solid-svg-icons'; -class SearchBar extends React.Component { - constructor(props) { - super(props); - this.state = { - showSearchInput: false - }; +const SearchBar = ({handleSearch}) => { + + console.log('handle search', handleSearch); + + const [showSearchInput, toggleShowInput] = useState(false); + + const [searchValue, setSearchValue] = useState(""); + + const handleSearchInputChanges = (e) => { + setSearchValue(e.target.value); } - handleShowSearchBar = () => { - this.setState(state => { - return { showSearchInput: !state.showSearchInput }; - }); + const resetInputField = () => { + setSearchValue("") } - render() { + const callSearchFunction = (e) => { + e.preventDefault(); + handleSearch(searchValue); + resetInputField(); + } return ( toggleShowInput(!showSearchInput)} > + ); } -} export default SearchBar; \ No newline at end of file diff --git a/packages/components/SearchBar/stories/index.stories.js b/packages/components/SearchBar/stories/index.stories.js new file mode 100644 index 0000000..128f1b6 --- /dev/null +++ b/packages/components/SearchBar/stories/index.stories.js @@ -0,0 +1,22 @@ +import React from 'react'; + +import { storiesOf } from '@storybook/react'; +import { actions } from '@storybook/addon-actions'; +import StoryRouter from 'storybook-react-router'; +import SearchBar from '../index.js'; + +export const searchActions = actions({handleSearch: 'Handle search'}); + +// export const cardActions = actions({ handleEdit: 'Edit button clicked', handleDelete: 'Delete button clicked', showLinkPath: 'Card clicked' }); + +storiesOf('Search Bar', module) + .addDecorator(StoryRouter()) + .add('Default', () => { + return ( +
+ +
+ ); + }); From a33b3d4bb165d93d51e69f7d48c56bc98f7954da Mon Sep 17 00:00:00 2001 From: Allison Shultes Date: Thu, 29 Aug 2019 12:10:58 +0100 Subject: [PATCH 04/11] Hook-ifies list component and adds working Search --- packages/components/List/index.js | 88 ++++++++----------- .../components/List/stories/index.stories.js | 2 + packages/components/SearchBar/index.js | 10 +-- .../SimpleCard/stories/index.stories.js | 2 +- 4 files changed, 42 insertions(+), 60 deletions(-) diff --git a/packages/components/List/index.js b/packages/components/List/index.js index de5273e..7145e88 100644 --- a/packages/components/List/index.js +++ b/packages/components/List/index.js @@ -2,54 +2,40 @@ import React, { useState } from 'react'; import SimpleCard from '../SimpleCard'; import SearchBar from '../SearchBar'; -class List extends React.Component { - // constructor(props) { - // super(props); - // this.state = { - // showSearchInput: true - // }; - // } - // // const [showSearchInput, toggleShowSearch] = useState(true) - - // handleSearch = searchText => { - // console.log('search text', searchText); - // console.log('logging items', this.props.items); - // const results = this.props.items.filter(project => { - // console.log('project', project); - // if ( - // includesText(project.title, searchText) || - // includesText(project.description, searchText) - // ) { - // project.display = true; - - // return project; - // } else { - // project.display = false; - - // return project; - // } - // }); - // this.props.handleUpdateList(results); - // }; - - // handleShowSearchBar = () => { - // this.setState(state => { - // return { showSearchInput: !state.showSearchInput }; - // }); - // } - - - render() { - - // let searchEl; - // if (this.props.items !== null && this.props.items.length !== 0) { - // searchEl = (); - // } - - - const listItems = this.props.items.map((item) => { +const List = ({ items, handleSearch, handleEdit, handleDelete }) => { + + const includesText = (textOne, textTwo) => { + return textOne.toLowerCase().trim().includes(textTwo.toLowerCase().trim()); + }; + + const [list, handleUpdateList] = useState(items); + + handleSearch = searchText => { + const results = items.filter(item => { + if ( + includesText(item.title, searchText) || + includesText(item.description, searchText) + ) { + item.display = true; + + return item; + } else { + item.display = false; + + return item; + } + }); + handleUpdateList(results); + }; + + let searchEl; + if (items !== null && items.length !== 0) { + searchEl = ; + } + + const listItems = list.map((item) => { if (item.display) { return ( )} return null; }).filter(item => { @@ -68,12 +54,12 @@ class List extends React.Component { return (<>
+ {searchEl} {listItems}
); } -} export default List; diff --git a/packages/components/List/stories/index.stories.js b/packages/components/List/stories/index.stories.js index 35176ae..f2a4101 100644 --- a/packages/components/List/stories/index.stories.js +++ b/packages/components/List/stories/index.stories.js @@ -5,6 +5,7 @@ import StoryRouter from 'storybook-react-router'; import List from '../index.js'; import { item, cardActions } from '../../SimpleCard/stories/index.stories.js'; +import { searchActions } from '../../SearchBar/stories/index.stories.js'; export const items = [{ ...item, @@ -28,5 +29,6 @@ storiesOf('List', module) ); \ No newline at end of file diff --git a/packages/components/SearchBar/index.js b/packages/components/SearchBar/index.js index 6477194..e1e0df7 100644 --- a/packages/components/SearchBar/index.js +++ b/packages/components/SearchBar/index.js @@ -9,25 +9,20 @@ import { const SearchBar = ({handleSearch}) => { - console.log('handle search', handleSearch); - const [showSearchInput, toggleShowInput] = useState(false); const [searchValue, setSearchValue] = useState(""); const handleSearchInputChanges = (e) => { setSearchValue(e.target.value); + handleSearch(searchValue); } + // Keep - perhaps add if we add keystrokes / enter to submit? const resetInputField = () => { setSearchValue("") } - const callSearchFunction = (e) => { - e.preventDefault(); - handleSearch(searchValue); - resetInputField(); - } return ( @@ -46,7 +41,6 @@ const SearchBar = ({handleSearch}) => { aria-label="search" aria-describedby="search" /> - ); } diff --git a/packages/components/SimpleCard/stories/index.stories.js b/packages/components/SimpleCard/stories/index.stories.js index a148574..eb7a873 100644 --- a/packages/components/SimpleCard/stories/index.stories.js +++ b/packages/components/SimpleCard/stories/index.stories.js @@ -13,7 +13,7 @@ export const item = { url: '/projects/1/transcripts/' }; -export const cardActions = actions({ handleEdit: 'Edit button clicked', handleDelete: 'Delete button clicked', showLinkPath: 'Card clicked' }); +export const cardActions = actions({ handleEdit: 'Edit button clicked', handleDelete: 'Delete button clicked' }); storiesOf('Simple Card', module) .addDecorator(StoryRouter()) From 438f7cd23d65e81c9ac0c161a3f5b33a0cfeac2f Mon Sep 17 00:00:00 2001 From: Allison Shultes Date: Thu, 29 Aug 2019 15:11:11 +0100 Subject: [PATCH 05/11] Removes cluttered code comments --- packages/components/List/index.js | 74 +------------------------------ 1 file changed, 1 insertion(+), 73 deletions(-) diff --git a/packages/components/List/index.js b/packages/components/List/index.js index 7145e88..6bfa59e 100644 --- a/packages/components/List/index.js +++ b/packages/components/List/index.js @@ -61,76 +61,4 @@ const List = ({ items, handleSearch, handleEdit, handleDelete }) => { ); } -export default List; - - - -// constructor(props) { -// super(props); -// this.state = { -// showSearchInput: false -// }; -// } - -// handleSearch = searchText => { -// const results = this.props.items.filter(project => { -// if ( -// includesText(project.title, searchText) || -// includesText(project.description, searchText) -// ) { -// project.display = true; - -// return project; -// } else { -// project.display = false; - -// return project; -// } -// }); -// this.props.handleUpdateList(results); -// }; - -// handleShowSearchBar = () => { -// this.setState(state => { -// return { showSearchInput: !state.showSearchInput }; -// }); -// } - -// render() { - -// let searchEl; -// if (this.props.items !== null && this.props.items.length !== 0) { -// searchEl = (); -// } - -// return (<> - -// -// -// {searchEl} -// - -// -// -// -// - -// {(this.props.items && this.props.items.length === 0) ? There are no {this.props.model}, create a new one to get started : null} - -// {this.props.items ? -// : null} - -// ); -// } -// } - -// export default Page; \ No newline at end of file +export default List; \ No newline at end of file From e760d22f9b26a4b3d7d10beb9d91a53206ea6abc Mon Sep 17 00:00:00 2001 From: Allison Shultes Date: Fri, 30 Aug 2019 09:08:01 +0100 Subject: [PATCH 06/11] Deletes component that was added on the wrong branch --- packages/components/TranscriptCard/index.js | 157 -------------------- 1 file changed, 157 deletions(-) delete mode 100644 packages/components/TranscriptCard/index.js diff --git a/packages/components/TranscriptCard/index.js b/packages/components/TranscriptCard/index.js deleted file mode 100644 index 9c7dcc6..0000000 --- a/packages/components/TranscriptCard/index.js +++ /dev/null @@ -1,157 +0,0 @@ -import React, { Component } from 'react'; -import Card from 'react-bootstrap/Card'; -import Row from 'react-bootstrap/Row'; -import Col from 'react-bootstrap/Col'; -import Button from 'react-bootstrap/Button'; -import Badge from 'react-bootstrap/Badge'; -import Alert from 'react-bootstrap/Alert'; -import Spinner from 'react-bootstrap/Spinner'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { - faTrash, - faCheck, - faExclamationTriangle, - faPen -} from '@fortawesome/free-solid-svg-icons'; - -class TranscriptCard extends Component { - handleDelete = () => { - //eslint-disable-next-line - const confirmationPrompt = confirm( - "Click OK if you wish to delete, cancel if you don't" - ); - if (confirmationPrompt && this.props.handleDelete) { - this.props.handleDelete(this.props.id); - } else { - alert('All is good, it was not deleted'); - } - }; - - handleEdit = () => { - this.props.handleEdit(this.props.id); - } - - render() { - - const status = () => { - switch (this.props.status) { - case 'error': - return 'danger'; - case 'in-progress': - return 'info'; - case 'done': - return 'success' - } - }; - const description = () => { - switch (this.props.status) { - case 'in-progress': - return In progress; - case 'done': - return Success; - case 'error': - return ( - <> - - {' '} - {this.props.errorMessage} - - Error - - ); - } - }; - let borderStatus; - let title = {this.props.title}; - if (status && status === 'info') { - title = this.props.title; - } - if (status && status === 'danger') { - title = this.props.title; - borderStatus = 'danger'; - } - - return ( - - - - - - {this.props.icon ? this.props.icon : ''} {title} - - - - - - - - - - - - - - {status && status === 'info' ? ( - - ) : ( - '' - )} - {status && status === 'danger' ? ( - - ) : ( - '' - )} - {status && status === 'success' ? ( - - ) : ( - '' - )} - - - - - - - {this.props.subtitle} - - - - - - {description} - - - - - ); - } -} - -export default TranscriptCard; \ No newline at end of file From 4b9b0509d587fd68ace04bffb90b4dad2e27ce6b Mon Sep 17 00:00:00 2001 From: Allison Shultes Date: Fri, 30 Aug 2019 12:58:33 +0100 Subject: [PATCH 07/11] Requested changes from PR: Refactoring and nesting search bar component --- packages/components/List/index.js | 48 ++++++++----------- .../components/List/stories/index.stories.js | 25 ++++++++-- packages/components/SearchBar/index.js | 13 ++--- .../SearchBar/stories/index.stories.js | 22 --------- packages/components/SimpleCard/index.js | 2 +- .../SimpleCard/stories/index.stories.js | 2 +- 6 files changed, 45 insertions(+), 67 deletions(-) delete mode 100644 packages/components/SearchBar/stories/index.stories.js diff --git a/packages/components/List/index.js b/packages/components/List/index.js index 6bfa59e..8e27606 100644 --- a/packages/components/List/index.js +++ b/packages/components/List/index.js @@ -2,40 +2,32 @@ import React, { useState } from 'react'; import SimpleCard from '../SimpleCard'; import SearchBar from '../SearchBar'; -const List = ({ items, handleSearch, handleEdit, handleDelete }) => { +const List = ({ projectItems, handleSearch, handleEdit, handleDelete }) => { - const includesText = (textOne, textTwo) => { - return textOne.toLowerCase().trim().includes(textTwo.toLowerCase().trim()); + const includesText = (text, subsetText) => { + return text.toLowerCase().includes(subsetText.toLowerCase().trim()); }; - const [list, handleUpdateList] = useState(items); + const [items, setItems] = useState(projectItems); + + const handleDisplay = (item, searchText) => { + if ( + includesText(item.title, searchText) || + includesText(item.description, searchText) + ) { + item.display = true; + } else { + item.display = false; + } + return item; + }; handleSearch = searchText => { - const results = items.filter(item => { - if ( - includesText(item.title, searchText) || - includesText(item.description, searchText) - ) { - item.display = true; - - return item; - } else { - item.display = false; - - return item; - } - }); - handleUpdateList(results); + const results = items.filter(item => handleDisplay(item, searchText)); + setItems(results); }; - let searchEl; - if (items !== null && items.length !== 0) { - searchEl = ; - } - - const listItems = list.map((item) => { + const listItems = items.map((item) => { if (item.display) { return ( { return (<>
- {searchEl} + {items !== null && items.length !== 0 ? : null} {listItems}
diff --git a/packages/components/List/stories/index.stories.js b/packages/components/List/stories/index.stories.js index f2a4101..3c715a4 100644 --- a/packages/components/List/stories/index.stories.js +++ b/packages/components/List/stories/index.stories.js @@ -1,11 +1,14 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; +import { actions } from '@storybook/addon-actions'; import StoryRouter from 'storybook-react-router'; import List from '../index.js'; +import SearchBar from '../../SearchBar'; import { item, cardActions } from '../../SimpleCard/stories/index.stories.js'; -import { searchActions } from '../../SearchBar/stories/index.stories.js'; + +export const searchActions = actions({ handleSearch: 'Handle search' }); export const items = [{ ...item, @@ -20,15 +23,27 @@ export const items = [{ title: 'Sample Simple Card Title Two', description: 'This is a sample card description. This is fun!', display: true, - url: 'projects/1/transcripts/' + url: '/projects/1/transcripts/5678' }]; storiesOf('List', module) .addDecorator(StoryRouter()) - .add('default', () => + .add('With Simple Cards', () => - ); \ No newline at end of file + ); + +storiesOf('List/Search Bar', module) + .addDecorator(StoryRouter()) + .add('Default', () => { + return ( +
+ +
+ ); + }); \ No newline at end of file diff --git a/packages/components/SearchBar/index.js b/packages/components/SearchBar/index.js index e1e0df7..68ca4ac 100644 --- a/packages/components/SearchBar/index.js +++ b/packages/components/SearchBar/index.js @@ -9,7 +9,7 @@ import { const SearchBar = ({handleSearch}) => { - const [showSearchInput, toggleShowInput] = useState(false); + const [toggleSearchInput, setToggleShowInput] = useState(false); const [searchValue, setSearchValue] = useState(""); @@ -17,24 +17,17 @@ const SearchBar = ({handleSearch}) => { setSearchValue(e.target.value); handleSearch(searchValue); } - - // Keep - perhaps add if we add keystrokes / enter to submit? - const resetInputField = () => { - setSearchValue("") - } - - return ( toggleShowInput(!showSearchInput)} + onClick={() => setToggleShowInput(!toggleSearchInput)} > { - return ( -
- -
- ); - }); diff --git a/packages/components/SimpleCard/index.js b/packages/components/SimpleCard/index.js index 8496681..127d572 100644 --- a/packages/components/SimpleCard/index.js +++ b/packages/components/SimpleCard/index.js @@ -33,7 +33,7 @@ class SimpleCard extends Component { - + {this.props.title} diff --git a/packages/components/SimpleCard/stories/index.stories.js b/packages/components/SimpleCard/stories/index.stories.js index eb7a873..3e11c03 100644 --- a/packages/components/SimpleCard/stories/index.stories.js +++ b/packages/components/SimpleCard/stories/index.stories.js @@ -10,7 +10,7 @@ export const item = { key: 'abc123', title: 'Sample Simple Card Title', description: 'This is a sample card description. This is fun!', - url: '/projects/1/transcripts/' + url: '/projects/1/transcripts/1234' }; export const cardActions = actions({ handleEdit: 'Edit button clicked', handleDelete: 'Delete button clicked' }); From 484d4f71aa45d9add3cc9d051b1ad76859907d25 Mon Sep 17 00:00:00 2001 From: Allison Shultes Date: Fri, 30 Aug 2019 13:08:57 +0100 Subject: [PATCH 08/11] Adds delete handling at the list level --- packages/components/List/index.js | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/components/List/index.js b/packages/components/List/index.js index 8e27606..ff2d06d 100644 --- a/packages/components/List/index.js +++ b/packages/components/List/index.js @@ -4,11 +4,31 @@ import SearchBar from '../SearchBar'; const List = ({ projectItems, handleSearch, handleEdit, handleDelete }) => { + const [items, setItems] = useState(projectItems); + const includesText = (text, subsetText) => { return text.toLowerCase().includes(subsetText.toLowerCase().trim()); }; - const [items, setItems] = useState(projectItems); + const handleDeleteItem = async (itemId) => { + const updatedList = items.filter((item) => { + return item.id !== itemId; + }); + setItems(updatedList); + + // This is the original handleDelete, which took place at the page level: + // https://github.com/bbc/digital-paper-edit-client/blob/ba1924e89592fc8cd75fcb1e450ea15bc2599d95/src/Components/Projects/index.js + // + // const result = await ApiWrapper.deleteProject(itemId); + // if (result.ok) { + // const newItemsList = this.state.items.filter((p) => { + // return p.id !== itemId; + // }); + // this.setState({ items: newItemsList }); + // } else { + // // TODO: some error handling, error message saying something went wrong + // } + } const handleDisplay = (item, searchText) => { if ( @@ -37,7 +57,7 @@ const List = ({ projectItems, handleSearch, handleEdit, handleDelete }) => { description={ item.description } url={ item.url } handleEdit={ handleEdit } - handleDelete={ handleDelete } + handleDelete={ handleDeleteItem } /> )} return null; }).filter(item => { From d994aa13c6490389d273e239aec2a1ed7ec3c31d Mon Sep 17 00:00:00 2001 From: Allison Shultes Date: Fri, 30 Aug 2019 14:48:31 +0100 Subject: [PATCH 09/11] Fixes delete-all-search-text bug --- packages/components/SearchBar/index.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/components/SearchBar/index.js b/packages/components/SearchBar/index.js index 68ca4ac..adcc830 100644 --- a/packages/components/SearchBar/index.js +++ b/packages/components/SearchBar/index.js @@ -1,5 +1,5 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import InputGroup from 'react-bootstrap/InputGroup'; import FormControl from 'react-bootstrap/FormControl'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -11,12 +11,13 @@ const SearchBar = ({handleSearch}) => { const [toggleSearchInput, setToggleShowInput] = useState(false); - const [searchValue, setSearchValue] = useState(""); + const [searchValue, setSearchValue] = useState(''); const handleSearchInputChanges = (e) => { + handleSearch(e.target.value); setSearchValue(e.target.value); - handleSearch(searchValue); - } + }; + return ( Date: Fri, 30 Aug 2019 15:39:18 +0100 Subject: [PATCH 10/11] added PropTypes and DefaultProps to Search and List components --- packages/components/List/index.js | 135 +++++++++++------- .../components/List/stories/index.stories.js | 66 ++++----- packages/components/SearchBar/index.js | 78 +++++----- packages/components/SimpleCard/index.js | 22 ++- 4 files changed, 169 insertions(+), 132 deletions(-) diff --git a/packages/components/List/index.js b/packages/components/List/index.js index ff2d06d..62a23db 100644 --- a/packages/components/List/index.js +++ b/packages/components/List/index.js @@ -1,55 +1,58 @@ import React, { useState } from 'react'; +import PropTypes from 'prop-types'; import SimpleCard from '../SimpleCard'; import SearchBar from '../SearchBar'; -const List = ({ projectItems, handleSearch, handleEdit, handleDelete }) => { +const List = ({ projectItems, handleEdit, handleDelete }) => { - const [items, setItems] = useState(projectItems); + const [ items, setItems ] = useState(projectItems); - const includesText = (text, subsetText) => { - return text.toLowerCase().includes(subsetText.toLowerCase().trim()); - }; + const includesText = (text, subsetText) => { + return text.toLowerCase().includes(subsetText.toLowerCase().trim()); + }; - const handleDeleteItem = async (itemId) => { - const updatedList = items.filter((item) => { - return item.id !== itemId; - }); - setItems(updatedList); + const handleDeleteItem = async (itemId) => { + const updatedList = items.filter((item) => { + return item.id !== itemId; + }); + handleDelete(itemId); + setItems(updatedList); + }; - // This is the original handleDelete, which took place at the page level: - // https://github.com/bbc/digital-paper-edit-client/blob/ba1924e89592fc8cd75fcb1e450ea15bc2599d95/src/Components/Projects/index.js - // - // const result = await ApiWrapper.deleteProject(itemId); - // if (result.ok) { - // const newItemsList = this.state.items.filter((p) => { - // return p.id !== itemId; - // }); - // this.setState({ items: newItemsList }); - // } else { - // // TODO: some error handling, error message saying something went wrong - // } - } - - const handleDisplay = (item, searchText) => { - if ( - includesText(item.title, searchText) || + // This is the original handleDelete, which took place at the page level: + // https://github.com/bbc/digital-paper-edit-client/blob/ba1924e89592fc8cd75fcb1e450ea15bc2599d95/src/Components/Projects/index.js + // + // const result = await ApiWrapper.deleteProject(itemId); + // if (result.ok) { + // const newItemsList = this.state.items.filter((p) => { + // return p.id !== itemId; + // }); + // this.setState({ items: newItemsList }); + // } else { + // // TODO: some error handling, error message saying something went wrong + // } + + const handleDisplay = (item, searchText) => { + if ( + includesText(item.title, searchText) || includesText(item.description, searchText) - ) { - item.display = true; - } else { - item.display = false; - } - return item; - }; + ) { + item.display = true; + } else { + item.display = false; + } + + return item; + }; - handleSearch = searchText => { - const results = items.filter(item => handleDisplay(item, searchText)); - setItems(results); - }; + const handleSearchItem = searchText => { + const results = items.filter(item => handleDisplay(item, searchText)); + setItems(results); + }; - const listItems = items.map((item) => { - if (item.display) { - return ( + const listItems = items.map((item) => { + if (item.display) { + return ( { handleEdit={ handleEdit } handleDelete={ handleDeleteItem } /> - )} return null; - }).filter(item => { - return item !== null; - }); + );} + + return null; + }).filter(item => { + return item !== null; + }); + + return ( +
+ {items !== null && items.length !== 0 ? : null} + {listItems} +
+ ); +}; - return (<> -
- {items !== null && items.length !== 0 ? : null} - {listItems} -
- - ); - } +List.propTypes = { + projectItems: PropTypes.array.of.objects.isRequired, + handleEdit: PropTypes.func.isRequired, + handleDelete: PropTypes.func.isRequired, +}; + +List.defaultProps = { + projectItems: { + itemOne: { + id: '1234', + key: 'abc123', + title: 'Sample Simple Card Title One', + description: 'This is a sample card description. This is fun!', + display: true, + url: '/projects/1/transcripts/5678' + } + }, + handleEdit: () => { + console.log('Edit button clicked'); + }, + handleDelete: () => { + console.log('Delete button clicked'); + }, +}; export default List; \ No newline at end of file diff --git a/packages/components/List/stories/index.stories.js b/packages/components/List/stories/index.stories.js index 3c715a4..28c2670 100644 --- a/packages/components/List/stories/index.stories.js +++ b/packages/components/List/stories/index.stories.js @@ -10,40 +10,40 @@ import { item, cardActions } from '../../SimpleCard/stories/index.stories.js'; export const searchActions = actions({ handleSearch: 'Handle search' }); -export const items = [{ - ...item, - id: '1234', - key: 'abc123', - title: 'Sample Simple Card Title One', - description: 'This is a sample card description. This is fun!', - display: true, -}, {...item, - id: '5678', - key: 'def456', - title: 'Sample Simple Card Title Two', - description: 'This is a sample card description. This is fun!', - display: true, - url: '/projects/1/transcripts/5678' -}]; +export const items = [ { + ...item, + id: '1234', + key: 'abc123', + title: 'Sample Simple Card Title One', + description: 'This is a sample card description. This is fun!', + display: true, +}, { ...item, + id: '5678', + key: 'def456', + title: 'Sample Simple Card Title Two', + description: 'This is a sample card description. This is fun!', + display: true, + url: '/projects/1/transcripts/5678' +} ]; storiesOf('List', module) - .addDecorator(StoryRouter()) - .add('With Simple Cards', () => - - ); + .addDecorator(StoryRouter()) + .add('With Simple Cards', () => + + ); storiesOf('List/Search Bar', module) - .addDecorator(StoryRouter()) - .add('Default', () => { - return ( -
- -
- ); - }); \ No newline at end of file + .addDecorator(StoryRouter()) + .add('Default', () => { + return ( +
+ +
+ ); + }); \ No newline at end of file diff --git a/packages/components/SearchBar/index.js b/packages/components/SearchBar/index.js index adcc830..24794f1 100644 --- a/packages/components/SearchBar/index.js +++ b/packages/components/SearchBar/index.js @@ -1,42 +1,52 @@ - -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; +import PropTypes from 'prop-types'; import InputGroup from 'react-bootstrap/InputGroup'; import FormControl from 'react-bootstrap/FormControl'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { - faSearch, + faSearch, } from '@fortawesome/free-solid-svg-icons'; -const SearchBar = ({handleSearch}) => { - - const [toggleSearchInput, setToggleShowInput] = useState(false); - - const [searchValue, setSearchValue] = useState(''); - - const handleSearchInputChanges = (e) => { - handleSearch(e.target.value); - setSearchValue(e.target.value); - }; - - return ( - - setToggleShowInput(!toggleSearchInput)} - > - - - - - - - ); - } +const SearchBar = ({ handleSearch }) => { + + const [ toggleSearchInput, setToggleShowInput ] = useState(false); + + const [ searchValue, setSearchValue ] = useState(''); + + const handleSearchInputChanges = (e) => { + handleSearch(e.target.value); + setSearchValue(e.target.value); + }; + + return ( + + setToggleShowInput(!toggleSearchInput) } + > + + + + + + + ); +}; + +SearchBar.propTypes = { + handleSearch: PropTypes.func.isRequired, +}; + +SearchBar.defaultProps = { + handleSearch: (e) => { + console.log(`Search for ${ e.target.value }`); + }, +}; export default SearchBar; \ No newline at end of file diff --git a/packages/components/SimpleCard/index.js b/packages/components/SimpleCard/index.js index 127d572..0607e07 100644 --- a/packages/components/SimpleCard/index.js +++ b/packages/components/SimpleCard/index.js @@ -14,26 +14,26 @@ import 'bootstrap-css-only/css/bootstrap.css'; class SimpleCard extends Component { handleDelete = () => { - const confirmDeleteText = "Click OK if you wish to delete or cancel if you don't"; - const cancelDeleteText = "All is good, it was not deleted"; - const confirmationPrompt = confirm(confirmDeleteText); - - if (confirmationPrompt) { - this.props.handleDelete ? this.props.handleDelete(this.props.id) : alert(cancelDeleteText); - } + const confirmDeleteText = "Click OK if you wish to delete or cancel if you don't"; + const cancelDeleteText = 'All is good, it was not deleted'; + const confirmationPrompt = confirm(confirmDeleteText); + + if (confirmationPrompt) { + this.props.handleDelete ? this.props.handleDelete(this.props.id) : alert(cancelDeleteText); + } }; handleEdit = () => { this.props.handleEdit(this.props.id); } - + render() { return ( - + {this.props.title} @@ -82,6 +82,7 @@ SimpleCard.propTypes = { key: PropTypes.string.isRequired, id: PropTypes.string.isRequired, title: PropTypes.string.isRequired, + url: PropTypes.string.isRequired, description: PropTypes.string, handleEdit: PropTypes.func, handleDelete: PropTypes.func, @@ -99,9 +100,6 @@ SimpleCard.defaultProps = { handleDelete: () => { console.log('Delete button clicked'); }, - showLinkPath: () => { - console.log('Card clicked'); - } }; export default SimpleCard; From 24af03699a4367ee976eed76ffc8a2f8f3699fa9 Mon Sep 17 00:00:00 2001 From: Allison Shultes Date: Fri, 30 Aug 2019 15:54:03 +0100 Subject: [PATCH 11/11] Fixes for small default prop bugs --- packages/components/List/index.js | 2 +- packages/components/SearchBar/index.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/List/index.js b/packages/components/List/index.js index 62a23db..f1c9083 100644 --- a/packages/components/List/index.js +++ b/packages/components/List/index.js @@ -78,7 +78,7 @@ const List = ({ projectItems, handleEdit, handleDelete }) => { }; List.propTypes = { - projectItems: PropTypes.array.of.objects.isRequired, + projectItems: PropTypes.array.isRequired, handleEdit: PropTypes.func.isRequired, handleDelete: PropTypes.func.isRequired, }; diff --git a/packages/components/SearchBar/index.js b/packages/components/SearchBar/index.js index 24794f1..858694a 100644 --- a/packages/components/SearchBar/index.js +++ b/packages/components/SearchBar/index.js @@ -44,8 +44,8 @@ SearchBar.propTypes = { }; SearchBar.defaultProps = { - handleSearch: (e) => { - console.log(`Search for ${ e.target.value }`); + handleSearch: () => { + console.log('Searching...'); }, };