From 22b49a5e0329fc4eeee848e814b1ea421173748b Mon Sep 17 00:00:00 2001 From: Eimi Okuno Date: Thu, 26 Sep 2019 23:18:13 +0100 Subject: [PATCH] Adding PageView to test the changes in client --- .../FormModal/stories/index.stories.js | 4 +- .../ItemForm/stories/index.stories.js | 29 +++++- .../components/List/stories/index.stories.js | 57 +++++++++--- packages/components/PageView/index.js | 89 +++++++++++++++++++ .../PageView/stories/index.stories.js | 80 +++++++++++++++++ .../TranscriptCard/stories/index.stories.js | 22 +++-- .../TranscriptForm/stories/index.stories.js | 5 +- packages/utils/index.js | 5 ++ 8 files changed, 266 insertions(+), 25 deletions(-) create mode 100644 packages/components/PageView/index.js create mode 100644 packages/components/PageView/stories/index.stories.js create mode 100644 packages/utils/index.js diff --git a/packages/components/FormModal/stories/index.stories.js b/packages/components/FormModal/stories/index.stories.js index 3c7fe18..746eb04 100644 --- a/packages/components/FormModal/stories/index.stories.js +++ b/packages/components/FormModal/stories/index.stories.js @@ -4,7 +4,7 @@ import { actions } from '@storybook/addon-actions'; import StoryRouter from 'storybook-react-router'; import FormModal from '../index.js'; -export const modalItems = [ { +const modalItems = [ { id: 1, itemType: 'project', showModal: true, @@ -27,7 +27,7 @@ export const modalItems = [ { type: 'transcript' } ]; -export const modalActions = actions({ handleSaveForm: 'Form saved' }); +const modalActions = actions({ handleSaveForm: 'Form saved' }); storiesOf('Form Modal', module) .addDecorator(StoryRouter()) diff --git a/packages/components/ItemForm/stories/index.stories.js b/packages/components/ItemForm/stories/index.stories.js index dcb2b14..4230bd0 100644 --- a/packages/components/ItemForm/stories/index.stories.js +++ b/packages/components/ItemForm/stories/index.stories.js @@ -2,7 +2,32 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import StoryRouter from 'storybook-react-router'; import ItemForm from '../index.js'; -import { modalActions, modalItems } from '../../FormModal/stories/index.stories.js'; +import { actions } from '@storybook/addon-actions'; + +const modalItems = [ { + id: 1, + itemType: 'project', + showModal: true, + title: 'Example Project Title', + description: 'This is a sample card description. This is fun!', + url: '/projects/1/transcripts/1234', + modalTitle: 'Edit Project', +}, { + showModal: true, + modalTitle: 'New Project', + id: 2 +}, { + projectId: 123, + title: '', + description: '', + uploadCompleted: true, + showModal: true, + modalTitle: 'New Transcript', + id: 3, + type: 'transcript' +} ]; + +const modalActions = actions({ handleSaveForm: 'Form saved' }); storiesOf('Item Form', module) .addDecorator(StoryRouter()) @@ -10,7 +35,7 @@ storiesOf('Item Form', module) return (
diff --git a/packages/components/List/stories/index.stories.js b/packages/components/List/stories/index.stories.js index 9a33980..a15bd00 100644 --- a/packages/components/List/stories/index.stories.js +++ b/packages/components/List/stories/index.stories.js @@ -6,19 +6,20 @@ 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 { transcriptItems } from '../../TranscriptCard/stories/index.stories.js'; +const cardActions = actions({ + handleEdit: 'Edit button clicked', + handleDelete: 'Delete button clicked' +}); -export const searchActions = actions({ handleSearch: 'Handle search' }); +const searchActions = actions({ handleSearch: 'Handle search' }); -export const items = [ { - ...item, +const items = [ { 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', @@ -27,7 +28,37 @@ export const items = [ { url: '/projects/1/transcripts/5678' } ]; -export const transItems = transcriptItems; +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 transItems = transcriptItems; storiesOf('List', module) .addDecorator(StoryRouter()) @@ -36,8 +67,9 @@ storiesOf('List', module)
); @@ -46,8 +78,9 @@ storiesOf('List', module)
); @@ -58,7 +91,7 @@ storiesOf('List/Search Bar', module) return (
); diff --git a/packages/components/PageView/index.js b/packages/components/PageView/index.js new file mode 100644 index 0000000..d8716e9 --- /dev/null +++ b/packages/components/PageView/index.js @@ -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 = ( + props.handleEdit } + handleDelete={ () => props.handleDelete } + handleSearch={ handleSearch } + /> + ); + } else { + showItems = (There are no {props.model}s, create a new one to get started.); + } + + return ( + <> + + + {searchEl} + + + + + + + {showItems} + + ); +}; + +PageView.propTypes = { + handleDelete: PropTypes.any, + handleEdit: PropTypes.any, + handleShowModal: PropTypes.any, + handleUpdateList: PropTypes.any, + items: PropTypes.any, + model: PropTypes.any, +}; + +export default PageView; diff --git a/packages/components/PageView/stories/index.stories.js b/packages/components/PageView/stories/index.stories.js new file mode 100644 index 0000000..7c6e201 --- /dev/null +++ b/packages/components/PageView/stories/index.stories.js @@ -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 ( + + ); + }) + .add('Transcripts View', () => { + return ( + + ); + }); \ No newline at end of file diff --git a/packages/components/TranscriptCard/stories/index.stories.js b/packages/components/TranscriptCard/stories/index.stories.js index 1ab5193..a5ccffe 100644 --- a/packages/components/TranscriptCard/stories/index.stories.js +++ b/packages/components/TranscriptCard/stories/index.stories.js @@ -5,7 +5,7 @@ import { actions } from '@storybook/addon-actions'; import StoryRouter from 'storybook-react-router'; import TranscriptCard from '../index.js'; -export const transcriptItems = [ { +const transcriptItems = [ { id: 1, key: 'transcript_key_1', title: 'Title - Done Transcript', @@ -35,26 +35,33 @@ export const transcriptItems = [ { display: true } ]; -export const transcriptCardActions = actions({ handleEdit: 'Edit button clicked', handleDelete: 'Delete button clicked' }); +const transcriptCardActions = actions({ + handleEdit: 'Edit button clicked', + handleDelete: 'Delete button clicked' +}); + +const style = { height: '90vh', overflow: 'scroll' }; storiesOf('Transcript Card', module) .addDecorator(StoryRouter()) .add('Success', () => { return ( -
+
); }) .add('In Progress', () => { return ( -
+
); @@ -64,7 +71,8 @@ storiesOf('Transcript Card', module)
); diff --git a/packages/components/TranscriptForm/stories/index.stories.js b/packages/components/TranscriptForm/stories/index.stories.js index 0b07247..d96c7bb 100644 --- a/packages/components/TranscriptForm/stories/index.stories.js +++ b/packages/components/TranscriptForm/stories/index.stories.js @@ -2,8 +2,9 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import StoryRouter from 'storybook-react-router'; import TranscriptForm from '../index.js'; +import { actions } from '@storybook/addon-actions'; -import { modalActions } from '../../FormModal/stories/index.stories.js'; +const modalActions = actions({ handleSaveForm: 'Form saved' }); const transcriptFormProps = { projectId: 123, @@ -19,7 +20,7 @@ storiesOf('Transcript Form', module) return (
diff --git a/packages/utils/index.js b/packages/utils/index.js new file mode 100644 index 0000000..adfe702 --- /dev/null +++ b/packages/utils/index.js @@ -0,0 +1,5 @@ +const includesText = (textOne, textTwo) => { + return textOne.toLowerCase().trim().includes(textTwo.toLowerCase().trim()); +}; + +export { includesText } ; \ No newline at end of file