simcheolhwan / video-archives Goto Github PK

• Change list of video
• Change board of video
• Change board of list

• Validations: BoardAdd, BoardEdit in BoardRead
• currentBoard issue

• watch with on event
  • Realtime update when another browser add boards or videos

Example

actions:

export function watchGuestAddedEvent(dispatch) {
  const database = firebase.database()

  database.ref('/guests').on('child_added', snap => {
    dispatch({ type: 'GUESTADDED', payload: snap.val() })
  });
}

reducer:

case ActionTypes.GuestAdded: {
  const newState = Object.assign({}, state)
  newState.guests = newState.guests || []
  newState.guests = newState.guests.slice()
  newState.guests.push(action.guest)
  return newState
}

App:

function mapDispatchToProps(dispatch) {
  watchGuestAddedEvent(dispatch)
  return bindActionCreators({ getInvite, addToInvite }, dispatch)
}

https://www.codementor.io/vijayst/using-firebase-with-redux-for-building-a-react-app-du1086puw

• Video: datetime, when video is added (For my need)
  • Check it is safe when video is editted
• Board and List: ABC order, when they are added or editted
  • Future: Does it need to change order in the Array?

• Channel title
• Verified icon

Too slow to get response from Firebase database when WebSocket request is not finished.

• Should prevent to request something before then.

• Mobile first

• Prettier
• Source map explorer

• activeClassName
  • Search keyword: v4, shouldComponentUpdate, connect
  • https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md#the-solution
• Match, Miss for 404 Not Found

• Change list of video
• Change board of video
• Change board of list

• When enter a board that has no lists, focus <input> to add a list

  componentDidUpdate() {
    if (!board.lists.length) {
      this.addListInput.focus()
    }
  }

• Change to Firebase hosting

• Set last updated timestamp or id, and compare it at first
• If there are changes between server and local, show proper message. Not just 'fetching...'

Split file

• Use functional component if it doesn't require class component
• These is no reason that ALL component map props from boards, videos
• Use ownProps

• Enable to move bulk videos
• Enable to move list
• Enable to scroll while moving

• Let users know that only YouTube URLs are available now
• Fix wrong sentences
  • create a new board to start
  • if you change your browser or empty your browser storage
  • you will not be able to
  • This app is being built
  • Source codes are available at

Refactoring

• Split actions/index.js
• Group and export types as objects in actions/types.js
  • Example:

  const actionTypes = {
    GetInviteRequested: 'GET_INVITE_REQUESTED',
    GetInviteRejected: 'GET_INVITE_REJECTED',
    GetInviteFulfilled: 'GET_INVITE_FULFILLED'
  }
  export default actionTypes
  

Optimistic updates

• REQUESTED: Prevent Add/Update/Delete until get result
  • What if network is so slow?
• FULFILLED: spinner - optimistic update
• REJECTED: undo
  • need to test network fails with Firebase

To improve performance

• Flatten data structures
  • List to have Board.key

Presentational and Container Components
by Dan Abramov

• Change date format
• userSelect: 'none'
• 16:9 Thumbnails
• Show count of videos on Sidebar

How to prevent write duplicate of exist slug:

1. Arrays of 'slugs'

• https://code.tutsplus.com/articles/quick-tip-firebase-database-security-rules--cms-27926

2. Use slugs as a key

• One video - <iframe>
• Multiple videos - Develop 'Videos Player' feature

Auth

• Sign up, Sign in, Sign out with Firebase Auth
  • Fetch storage whenever user sign in/out
  • Prevent to use signup/signin/signout as a board slug
• Redirect signing pages with Auth condition
• Redirect signing pages with app config
• Toggle AppHeader with Auth condition
• Toggle AppHeader with app config
• Set Firebase security rules

Boards and Videos

• Use Firebase database
• Use local storage also