User Story - Collection Page

[marielngr]

Value proposition

As a User I want to assign a collection to each Flashcard so that I can create flashcards for different subjects.

Description

Acceptance criteria

• [x] When navigating to the create-Page, you can now select an existing collection or choose to create a new collection.
• [x] Creating new cards requires an assignment to a given collection, you can choose from a dropdown menu.
• [x] The collection-page shows a clickable Container for each created collection beside the header and the navigation bar.
• [x] When no collection exists, the page shows a short note to request a new card entry from you with a Link to the create-page.
• [x] Every Collection-Container shows the name of the collection, that links to the filtered card-list-page, where you can see the listed Cardcontainers (scrollable)of all included Cards of the activated Collection and where you can start learning (deleting/editing/moving to archive) the cards for now.
• [x] Furthermore the Cardlist-Page of a collection shows the header on top, but no navigationbar. Instead it shows a short text at the bottom, which links back to the landing page and its collection overview.

Tasks

• [x] create a branch
• [x] create a new local storage state for the collections.
• [x] in app.js prop-drilling to add "collections" to Component.
• [x] similar to addCard create a function addCollection and do prop drilling.
• [x] Refactor the create-Page by adding a select element for the existing collections and additionally an option to add a new collection. The select is required.
• [x] Add a new boolean-state variable named showNewCollection to the "Form"-component. Default value is false.
• [x] Add a new required textfield for the name of a new collection, which is only shown, if showNewCollection is true.
• [x] Add an onChange-handler to the Select-component, which checks wether the option to add a new collection is selected and adjusts showNewCollection accordingly.
• [x] on form submit, check whether an existing collection was selected or a new collection was entered. If a new collection was entered, call "addCollection" accordingly. Store the id of the selected collection in the card.
• [x] create a new page named collections/index.js that containts a component named CollectionsPage. This page shows header and navigationbar. Adapt the navigationbar.
• [x] create a component named CollectionContainer, which for each collection shows name of collection and for now a hardcoded color area(later feature maybe color picker) and a new created button, which links to the associated collections/[id]-page. Return this Component in collections/index-Page.
• [x] if no collection exists, collection/index.js shows a short create-request, which links to the create-page
• [x] create a new page named collections/[id].js.
• [x] this page filters the cards-Array for the cards of the given collection. Use the existing CardList-component to show the filtered cards array.
• [x] if the filtered card array is empty, display an appropriate text, which links to the new page, to create the first set of cards.
• [x] refactoring Layout-component, so that the navigation isn't shown on collections/[id]-page and also for the edit-Form for a consistant style/ logical navigation.
• [x] Create Link to redirect to the collections/index.js.
• [x] Check that for editing cards the current collection is pre-selected and the editCard-Handler works properly, for example by setting the collection-select to read-only.
• [x] Add collection/index.js to NavigationBar.

---

NEXT:

• [ ] create own collections/[id]/edit.js --> neue US!
• [ ] add Link to collections/[id].js to create more cards on another create-page, that shows default collection.name for better user experience --> neue US!
• [ ] deleting a collection deletes just collection or collection with all contained cards??? --> important user information and confirmation, what happens to cards, with no collections, if cards remain after deleting collection?!