-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adding PageView to test the changes in client
- Loading branch information
Eimi Okuno
authored and
Eimi Okuno
committed
Sep 26, 2019
1 parent
95672ac
commit 22b49a5
Showing
8 changed files
with
266 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import Row from 'react-bootstrap/Row'; | ||
| import Col from 'react-bootstrap/Col'; | ||
| import Button from 'react-bootstrap/Button'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| import { includesText } from '../../utils'; | ||
| import List from '../List'; | ||
|
|
||
| const PageView = (props) => { | ||
| const [ items, setItems ] = useState(); | ||
| console.log('page', items); | ||
|
|
||
| useEffect(() => { | ||
| if (!items) { | ||
| setItems(props.items); | ||
| console.log('effect', items); | ||
| } | ||
|
|
||
| return () => { | ||
|
|
||
| }; | ||
| }, [ items, props.items ]); | ||
|
|
||
| const handleSearch = searchText => { | ||
| const results = items.filter(project => { | ||
| if ( | ||
| includesText(project.title, searchText) || | ||
| includesText(project.description, searchText) | ||
| ) { | ||
| project.display = true; | ||
|
|
||
| return project; | ||
| } else { | ||
| project.display = false; | ||
|
|
||
| return project; | ||
| } | ||
| }); | ||
| props.handleUpdateList(results); | ||
| }; | ||
|
|
||
| let searchEl; | ||
| let showItems; | ||
|
|
||
| if (items && items.length !== 0) { | ||
|
|
||
| showItems = ( | ||
| <List | ||
| items={ items } | ||
| handleEdit={ () => props.handleEdit } | ||
| handleDelete={ () => props.handleDelete } | ||
| handleSearch={ handleSearch } | ||
| /> | ||
| ); | ||
| } else { | ||
| showItems = (<i>There are no {props.model}s, create a new one to get started.</i>); | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <Row> | ||
| <Col sm={ 9 } > | ||
| {searchEl} | ||
| </Col> | ||
|
|
||
| <Col xs={ 12 } sm={ 3 } > | ||
| <Button onClick={ props.handleShowModal } | ||
| variant="outline-secondary" | ||
| size="sm" block> | ||
| New {props.model} | ||
| </Button> | ||
| </Col> | ||
| </Row> | ||
| {showItems} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| PageView.propTypes = { | ||
| handleDelete: PropTypes.any, | ||
| handleEdit: PropTypes.any, | ||
| handleShowModal: PropTypes.any, | ||
| handleUpdateList: PropTypes.any, | ||
| items: PropTypes.any, | ||
| model: PropTypes.any, | ||
| }; | ||
|
|
||
| export default PageView; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import React from 'react'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { actions } from '@storybook/addon-actions'; | ||
| import StoryRouter from 'storybook-react-router'; | ||
| import PageView from '..'; | ||
|
|
||
| const projectItems = [ { | ||
| 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, | ||
| url: '/projects/1/transcripts/5678' | ||
| } ]; | ||
|
|
||
| const transcriptItems = [ { | ||
| id: 1, | ||
| key: 'transcript_key_1', | ||
| title: 'Title - Done Transcript', | ||
| description: 'This transcript has finished processing.', | ||
| subtitle: 'This transcript has finished processing.', | ||
| url: '/projects/1/transcripts/', | ||
| status: 'done', | ||
| display: true | ||
| }, { | ||
| id: 2, | ||
| key: 'transcript_key_2', | ||
| title: 'Title - In Progress Transcript', | ||
| description: 'This transcript is still being generated.', | ||
| subtitle: 'This transcript is still being generated.', | ||
| url: '/projects/1/transcripts/', | ||
| status: 'in-progress', | ||
| display: true | ||
| }, { | ||
| id: 3, | ||
| key: 'transcript_key_3', | ||
| title: 'Title - Error Transcript', | ||
| description: 'Transcript generation failed for this card.', | ||
| subtitle: 'Transcript generation failed for this card.', | ||
| url: '/projects/1/transcripts/', | ||
| status: 'error', | ||
| errorMessage: 'Something has gone wrong with your transcription', | ||
| display: true | ||
| } ]; | ||
| const modalActions = actions({ handleSaveForm: 'Form saved' }); | ||
|
|
||
| storiesOf('PageView', module) | ||
| .addDecorator(StoryRouter()) | ||
| .add('Project View', () => { | ||
| return ( | ||
| <PageView | ||
| handleDelete={ actions('handleDelete') } | ||
| handleEdit={ actions('handleEdit') } | ||
| handleShowModal={ actions('handleShowModal') } | ||
| handleUpdateList={ actions('handleUpdateList') } | ||
| items={ projectItems } | ||
| model="Project" | ||
| handleSaveForm={ modalActions.handleSaveForm } | ||
| /> | ||
| ); | ||
| }) | ||
| .add('Transcripts View', () => { | ||
| return ( | ||
| <PageView | ||
| handleDelete={ actions('handleDelete') } | ||
| handleEdit={ actions('handleEdit') } | ||
| handleShowModal={ actions('handleShowModal') } | ||
| handleUpdateList={ actions('handleUpdateList') } | ||
| items={ transcriptItems } | ||
| model="Transcripts" | ||
| handleSaveForm={ modalActions.handleSaveForm } | ||
| /> | ||
| ); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.