aulasoftwarelibre / cuestion-ui-kit Goto Github PK

QuestionList is a collection of QuestionItem. This component is similar to TalkList.

Improvements: order by creation date or votes (descent).

When an user enters on a talk, he can do two things:

• Add a new question using the QuestionInput component
• See the questions added by other people and vote for the best.

So we need a QuestionItem and a QuestionList (many QuestionItem components).

This issue is only about QuestionItem.

This component will receive this props:

• question(Question): a Question model (interface) with this data:
  • id (string): question identifier
  • question (string): content
  • createdAt (Date): when the question was created
  • username (string?): undefined for anonymous questions
  • votes (int): greater or equal than 0
  • isVoted(bool): if the user already voted for this question
• a handler than returns the id of this question when like button was pressed

This component can use Card material-ui component. Storybook can represent two states: voted, not voted.

This component requires hooks in storybook to simulate when an user press like button. Because question state should be change outside the component

Translations (react-intl) are required to display the creation time.

TalkList can receive a "filter" prop. This filter is an array of strings with the topics we want to search among the talks.

So we need a component than displays all topics and let the user to select one or several topics.

Multiple Select can be the base widget or chips. Chips can be more elegant (see Behaviour section in material site).

This component will receive two props:

• an array of strings with all available topics
• a handler than returns an array of string with the selected topics (onChangeHandler)

Storybook and tests are required.

cc @victormonserrat

Page:
/sessions/[code].tsx

Page description
This page show the current and next talks in a session and a filter topic selection.

Issue summary
Handle the change topics action. When the topic filter changes in the store, the talks with any of this topics will be raised.
Related: #24

Design

Types:

• Talk
• Topic

Actions:

• FILTER_SESSION_TOPICS_CHANGE -> Topic[]

Store/Reducer:

filter: Topic[]

Effects/saga:

• FILTER_SESSION_TOPICS_CHANGE: update reducer.

Suggestions:

• Add a reset filter button

Page:
/talks/[id].tsx

Page description
Show a talk, a question input component and a question list componet.

Issue summary
Create the page and load the data from the API

Design

Types:

• Talk
• Question

Actions:

• FETCH_TALK_QUESTIONS_REQUEST -> talk id

• FETCH_TALK_QUESTIONS_SUCCESS -> question list

• FETCH_TALK_QUESTIONS_FAILURE -> error

• FETCH_TALK_VOTED_QUESTIONS_REQUEST -> talk id

• FETCH_TALK_VOTED_QUESTIONS_SUCCESS -> voted question list

• FETCH_TALK_VOTED_QUESTIONS_FAILURE -> error

Store/Reducer:

questions: Question[] 
votedQuestions: Question[]

Effects/saga:

• FETCH_TALK_QUESTIONS_REQUEST -> SUCCESS or ERROR action

• FETCH_TALK_QUESTIONS_SUCCESS -> update reducer -> FETCH_TALK_VOTED_QUESTIONS_REQUEST

• FETCH_TALK_QUESTIONS_FAILURE -> error

• FETCH_TALK_VOTED_QUESTIONS_REQUEST -> SUCCESS or ERROR action

• FETCH_TALK_VOTED_QUESTIONS_SUCCESS -> update reducer

• FETCH_TALK_VOTED_QUESTIONS_FAILURE -> error

Suggestions:

Change the components to compare the votedQuestion list with question list. This is the simplest way to check if current user voted or not for a question.

Our first MVP should:

1. Ask for a session code
2. Check is the session code exists and:
   1. Show the active talks if the session exists
   2. Show an error if the session does not exists or something else

This need two pages:

• main page: here we ask for the session code
• session/{id} page: here we show the talks. id is the session code

Every page in next.js does not share the state between them, so we can design every page as an independent application.

The main page could have this actions:

• OPEN_SESSION_REQUEST.
  payload: session id
  description: this action was dispatched when user send a session code
  effects: send a request to the API to search the session code
• OPEN_SESSION_SUCCESS:
  payload: session
  description: this action was dispatched if session exists (from the API request)
  effects: change the route to session page
• OPEN_SESSION_FAILURE:
  payload: error, error description
  description : this action was dispatched if session does not exists (from the API request)
  effects: launch OPEN_ERROR_SNACKBAR

updated with @victormonserrat suggestions:

• OPEN_ERROR_SNACKBACK:
  payload: message
  description: show an error in a snackbar
  effects: change this status variables: error to true and errorMessage. Launch a timeout to close snackback
• CLOSE_ERROR_SNACKBACK
  payload: none
  description: close the snackbar
  effects: change error to false and errorMessage to undefined

probably we need a SNACKBAR_MESSAGE_CLOSE with a timeout

so, our state could have this values:

• session?: Session
• error: boolean
• errorMessage: Error

Page:
/sessions/[code].tsx

Page description
This page show the current and next talks in a session and a filter topic selection.

Issue summary
Fetch the talks from the API and show the current and the nexts talks, using TalkList and TalkItem components.

Design

Types:

• Talk: Talk is an interface with the same API attributes

Actions:

• FETCH_SESSION_TALKS_REQUEST -> codeSession
• FETCH_SESSION_TALKS_SUCCESS -> talks
• FETCH_SESSION_TALKS_FAILURE -> error

Store/Reducer:

currentTalks: Talk[]
nextTalks: Talk[]

Effects/saga:

• FETCH_SESSION_TALKS_SUCCESS: update reducer
• FETCH_SESSION_TALKS_FAILURE: show a snackbar with the error. Refactorize to use the same than in index page.
• Timeout: dispatch FETCH_SESSION_TALKS_SUCCESS again to refresh current talks

Suggestions:

No more next talks because conference was finished? Show a see you soon message or similar.

Finally we don't need a store for session in front page. So it can be removed.

But, we need one to ErrorMessage Snackbar. This components shows if we had a problem searching the session code.

The store has this interface:

error: boolean
errorMessage?: Error 

This component is related with the next actions:

• OPEN_ERROR_SNACKBACK:
  payload: message
  description: show an error in a snackbar
  reducer: change this status variables: error to true and errorMessage.
• CLOSE_ERROR_SNACKBACK
  payload: none
  description: close the snackbar
  reducer: change error to false and errorMessage to undefined

Sagas:

• OPEN_ERROR_SNACKBAR action is dispatched after OPEN_SESSION_FAILURE did.
• CLOSE_ERROR_SNACKBAR action can be dispatched after a timeout or after the user press the close button.

Page:
/talks/[id].tsx

Page description
Show a talk, a question input component and a question list component

Issue summary
Order the QuestionList by date or votes

Design

Types:

• Question
• QuestionListOrder: 'votes' | 'date'

Actions:

• ORDER_TALK_QUESTIONS_BY -> QuestionListOrder

Store/Reducer:

order: QuestionListOrder

Effects/saga:

• ORDER_TALK_QUESTIONS_BY: update order in reducer

Suggestions:

Page:
/talks/[id].tsx

Page description
Show a talk, a question input component and a question list component

Issue summary
Vote or unvote for a question

Design

Types:

• Vote

Actions:

• VOTE_TALK_QUESTION_REQUEST -> question id
• VOTE_TALK_QUESTION_SUCCESS -> mercure will send new question list
• VOTE_TALK_QUESTION_FAILURE -> error

Store/Reducer:

None

Effects/saga:

• VOTE_TALK_QUESTION_REQUEST -> SUCCESS or FAILURE
• VOTE_TALK_QUESTION_SUCCESS -> connect to API
• VOTE_TALK_QUESTION_FAILURE -> error

Suggestions:

Add jest test to PR #5
cc @josefrnandezz @AdrianLopezGue

Page:
/talks/[id].tsx

Page description
Show a talk, a question input component and a question list component

Issue summary
Add a new question

Design

Types:

• Question

Actions:

• ADD_TALK_QUESTION_REQUEST -> talk id, user id, question
• ADD_TALK_QUESTION_SUCCESS -> mercure will update
• ADD_TALK_QUESTION_FAILURE -> error

Store/Reducer:

questions[]

Effects/saga:

• ADD_TALK_QUESTION_REQUEST -> SUCCESS or FAILURE
• ADD_TALK_QUESTION_SUCCESS -> mercure will update
• ADD_TALK_QUESTION_FAILURE -> show error

Suggestions:

Page:
/sessions/[code].tsx

Page description
This page show the current and next talks in a session and a filter topic selection.

Issue summary
Get the talk clicked and change the route to: /talks/[id].tsx
Related: #24

Design

Types:

• Talk

Actions:

• OPEN_SESSION_TALK_PAGE -> talk id

Store/Reducer:

• N/A

Effects/saga:

• OPEN_SESSION_TALK_PAGE: Change the router

Suggestions:

Create an empty talk page