Skip to content

Commit

Permalink
Fix update items container (#37)
Browse files Browse the repository at this point in the history 
* Fixed List behaviour

* removed console log
  • Loading branch information
@emettely
emettely authored Dec 10, 2019
1 parent 29bd7f4 commit f7a0fdc
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 135 deletions.
79 changes: 42 additions & 37 deletions src/ItemsContainer/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,30 +29,37 @@ const formReducer = (state = initialFormState, { type, payload }) => {

const ItemsContainer = props => {
const type = props.type;
const [ items, setItems ] = useState([]);

const [ showingItems, setShowingItems ] = useState([]);
const [ showModal, setShowModal ] = useState(false);
const [ formData, dispatchForm ] = useReducer(formReducer, initialFormState);

// modal

const handleSaveForm = item => {
props.handleSave(item);
setShowModal(false);
dispatchForm({ type: 'reset' });
};

const handleEditItem = async id => {
const item = items.find(i => i.id === id);
const handleEditItem = id => {
const item = props.items.find(i => i.id === id);
dispatchForm({
type: 'update',
payload: item
});
setShowModal(true);
};

const handleDeleteItem = id => {
props.handleDelete(id);
const toggleShowModal = () => {
setShowModal(!showModal);
};

const handleOnHide = () => {
setShowModal(false);
};

// search

const handleFilterDisplay = (item, text) => {
if (anyInText([ item.title, item.description ], text)) {
item.display = true;
Expand All @@ -64,42 +71,30 @@ const ItemsContainer = props => {
};

const handleSearch = text => {
const results = items.map(item => handleFilterDisplay(item, text));
setItems(results);
const results = props.items.map(item => handleFilterDisplay(item, text));
setShowingItems(results.filter(item => item.display));
};

const toggleShowModal = () => {
setShowModal(!showModal);
// generic

const handleDeleteItem = id => {
props.handleDelete(id);
};

useEffect(() => {
if (items.length === 0) {
setItems(props.items);
}

return () => {};
}, [ items, props.items ]);
setShowingItems(props.items);

let searchEl;
let showItems;

if (items.length > 0) {
searchEl = <SearchBar handleSearch={ handleSearch } />;
showItems = (
<List
items={ items }
handleEditItem={ handleEditItem }
handleDeleteItem={ handleDeleteItem }
/>
);
} else {
showItems = <i>There are no {type}s, create a new one to get started.</i>;
}
return () => {
setShowingItems([]);
};
}, [ props.items ]);

return (
<>
<Row>
<Col sm={ 9 }>{searchEl}</Col>
<Col sm={ 9 }>
<SearchBar handleSearch={ handleSearch } />
</Col>
<Col xs={ 12 } sm={ 3 }>
<Button
onClick={ toggleShowModal }
Expand All @@ -111,22 +106,32 @@ const ItemsContainer = props => {
</Button>
</Col>
</Row>
{showItems}

{showingItems.length > 0 ? (
<List
items={ showingItems }
handleEditItem={ handleEditItem }
handleDeleteItem={ handleDeleteItem }
/>
) : (
<i>There are no {type}s, create a new one to get started.</i>
)}

<FormModal
{ ...formData }
modalTitle={ formData.id ? `Edit ${ type }` : `New ${ type }` }
showModal={ showModal }
handleOnHide={ toggleShowModal }
handleOnHide={ handleOnHide }
handleSaveForm={ handleSaveForm }
type={ type.toLowerCase() }
type={ type }
/>
</>
);
};

ItemsContainer.propTypes = {
handleSave: PropTypes.func.isRequired,
handleDelete: PropTypes.func.isRequired,
handleSave: PropTypes.any,
handleDelete: PropTypes.any,
items: PropTypes.array.isRequired,
type: PropTypes.string
};
Expand Down
162 changes: 82 additions & 80 deletions src/ItemsContainer/stories/index.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,92 +1,94 @@
import React from "react";
import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import StoryRouter from "storybook-react-router";
import ItemContainer from "..";
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import StoryRouter from 'storybook-react-router';
import ItemsContainer from '..';
import { withKnobs, object } from '@storybook/addon-knobs';

const projectItems = [
{
id: "1234",
key: "abc123",
title: "Sample Simple Card Title One",
description: "This is a sample card description. This is fun!",
url: "/projects/1/transcripts/5678",
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",
projectId: "p1",
key: "transcript_key_1",
title: "Title - Done Transcript",
description: "This transcript has finished processing.",
url: "/projects/1/transcripts/",
status: "done",
display: true
},
{
id: "2",
projectId: "p1",
key: "transcript_key_2",
title: "Title - In Progress Transcript",
description: "This transcript is still being generated.",
url: "/projects/1/transcripts/",
status: "in-progress",
display: true
},
{
id: "3",
projectId: "p1",
key: "transcript_key_3",
title: "Title - Error Transcript",
description: "Transcript generation failed for this card.",
url: "/projects/1/transcripts/",
status: "error",
errorMessage: "Something has gone wrong with your transcription",
display: true
},
{
id: "4",
key: "transcript_key_4",
title: "Title - Uploading Transcript",
description: "This transcript is still being generated.",
errorMessage: "Please keep this page open until the file is uploaded.",
url: "/projects/1/transcripts/",
status: "uploading",
display: true,
progress: 30
}
];

storiesOf("ItemsContainer - Demo only (not published on NPM)", module)
storiesOf('ItemsContainer - Demo only (not published on NPM)', module)
.addDecorator(StoryRouter())
.add("Project View", () => {
.addDecorator(withKnobs)
.add('Project View', () => {
const projectItems = [
object('item 1', {
id: '1234',
key: 'abc123',
title: 'Sample Simple Card Title One',
description: 'This is a sample card description. This is fun!',
url: '/projects/1/transcripts/5678',
display: true
}),
object('item 2', {
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'
})
];

return (
<ItemContainer
items={projectItems}
<ItemsContainer
items={ projectItems }
model="Project"
handleSave={action("handleSave")}
handleDelete={action("handleDelete")}
handleSave={ action('handleSave') }
handleDelete={ action('handleDelete') }
/>
);
})
.add("Transcripts View", () => {
.add('Transcripts View', () => {
const transcriptItems = [
object('item 1', {
id: '1',
projectId: 'p1',
key: 'transcript_key_1',
title: 'Title - Done Transcript',
description: 'This transcript has finished processing.',
url: '/projects/1/transcripts/',
status: 'done',
display: true
}),
object('item 2', {
id: '2',
projectId: 'p1',
key: 'transcript_key_2',
title: 'Title - In Progress Transcript',
description: 'This transcript is still being generated.',
url: '/projects/1/transcripts/',
status: 'in-progress',
display: true
}),
object('item 3', {
id: '3',
projectId: 'p1',
key: 'transcript_key_3',
title: 'Title - Error Transcript',
description: 'Transcript generation failed for this card.',
url: '/projects/1/transcripts/',
status: 'error',
errorMessage: 'Something has gone wrong with your transcription',
display: true
}),
object('item 4', {
id: '4',
key: 'transcript_key_4',
title: 'Title - Uploading Transcript',
description: 'This transcript is still being generated.',
errorMessage: 'Please keep this page open until the file is uploaded.',
url: '/projects/1/transcripts/',
status: 'uploading',
display: true,
progress: 30
})
];

return (
<ItemContainer
items={transcriptItems}
<ItemsContainer
items={ transcriptItems }
model="Transcript"
handleSave={action("handleSave")}
handleDelete={action("handleDelete")}
handleSave={ action('handleSave') }
handleDelete={ action('handleDelete') }
/>
);
});
25 changes: 7 additions & 18 deletions src/List/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,10 @@ import SimpleCard from '../SimpleCard';
import TranscriptCard from '../TranscriptCard';
import cuid from 'cuid';

const List = (props) => {
const List = props => {
const items = props.items;

const [ items, setItems ] = useState([]);

useEffect(() => {
if (items.length === 0) {
setItems(props.items);
}

return () => {

};
}, [ props.items ]);

const listItems = items.map((item) => {
const listItems = items.map(item => {
const key = 'card-' + cuid();
if (item.display && item.status) {
return (
Expand All @@ -29,16 +18,16 @@ const List = (props) => {
handleDeleteItem={ props.handleDeleteItem }
/>
);
}
else if (item.display) {
} else if (item.display) {
return (
<SimpleCard
{ ...item }
key={ key }
handleEditItem={ props.handleEditItem }
handleDeleteItem={ props.handleDeleteItem }
/>
);}
);
}

return null;
});
Expand All @@ -53,7 +42,7 @@ const List = (props) => {
List.propTypes = {
items: PropTypes.array.isRequired,
handleEditItem: PropTypes.func.isRequired,
handleDeleteItem: PropTypes.func.isRequired,
handleDeleteItem: PropTypes.func.isRequired
};

export default List;

0 comments on commit f7a0fdc

Please sign in to comment.