React Component Documentation - Cosmic-Binturongs/InstaKidz GitHub Wiki

Here we outline how our components are built and how to use them. Include props to be passed, states included, and any notable features or functions within the component. If you can write a bit about how the component should live within the app, and things that will break the component.

Button!

This is a button. It's job is to be clicked. Button is built to be extremely generic. It takes three prop arguments -- onClick, Title, and className. Include the button in your component, and pass the Title, onClick function and css className to it in order to properly utilize this component. Here are all the possible states for buttons

  • Login: Within Navbar Access Component
  • Login: Submit inputs within Access Component Login state
  • Sign up: Within Navbar Access Component
  • Sign up: Submit inputs within Access Component Sign Up state
  • View User Profile: Render all post from current user
  • New Post: Changes Timeline component into a New Post component for user to make a new post
  • Log Out: Logs the user out and returns the user back to the Access Component
  • Logo: Will not appear as a button but will return the user back to the Timeline Component that renders all users' posts

Navbar

The Navbar has only two stories (states), 'Login/SignUp Access' and 'Access Accepted'. The 'Login/SignUp Access' Navbar has one button, check 'Buttons!' section for detail. The Navbar 'Access Accepted' state has four total buttons, 3 conventional buttons and 1 logo button, check 'Buttons!' section for detail.

#Post

Access Component

The access component will be the landing page on App.js, it will have two states (login and sign up). The Navbar component will have a 'landing/access' page state with one button, with two separate stories (states). The purpose of the 'access page' button is to transition the Access component between 'Sign Up' and 'Login'. When the Access 'Login' state is rendered, it has two input fields 'Username' and 'Password' and another button within the Access component that will submit the form. The Access component 'Sign Up' state will have three input fields 'username', 'password' and 'confirm password' with a sign up button within the Access component that submits the form. For the 'username' field in the sign up state, it will check whether the username has been taken by another user, if so a message will appear stating username already in use.

#Timeline