ksquareincmx / conference-client Goto Github PK

Replace promises by async/await.

Currently we are working with 16.5, we need to upgrade to 16.8 so we can use hooks :)

Having on method in charge of handling all click events for different components violates the Single Responsability Principle.

Add a handler for every event

// pages/Calendar/Headers/CalendarHeader.jsx

// ..
        <IconButton
          className={iconButton}
+          onClick={props.onClickPrevious}
-          onClick={props.onClickButton("previous")}
        >
          <KeyboardArrowLeft className={icon} />
// ...
        <IconButton
          className={iconButton}
+          onClick={props.onClickNext}
-          onClick={props.onClickButton("next")}
        >
          <KeyboardArrowRight className={icon} />
        </IconButton>
// ...

and add prop validation

Implement an HttpApiGateway that implements the following interface:

ApiGateway.pdf

Change the time zone of the server to match the time of México City (GMT-06:00).

events:

• booking created/cancelled/edited

Rn we only need to update the styles, functionality is going to be addressed in other issue

Add curly braces in the import of the AuthService

Instead of having repeated logic and validations all over the place add a storageService

Instead of this:

if (localStorage.getItem('cb_jwt') && localStorage.getItem('cb_user')) {
  const user = JSON.parse(localStorage.getItem('cb_user'));
  const jwt = JSON.parse(localStorage.getItem('cb_jwt'));
  this.setState({ user, jwt });
}

Favor this:

const item = storage.getAuthToken();
if (item) {
  // ...
}

The services are already documented, just need to configure jsdoc.

Replace promises by async/await

Change the current style implementation with of the navigation bar

Actually the route Dashboard is rendering the Calendar page component. Personally I found this bad for the semantics and being honest, ugly.

I suggest to modify to internal structure of the component.

class Dashboard extends from React.Component {
  render() {
    return (
      <div className="Dashboard">
        <NavBar />
        <LeftSide />
        <RightSide />
      </div>
    );
  }
};

Maybe a readable form of use the Context Providers (if is needed) can be:

class Dashboard extends from React.Component {
  render() {
    return (
      <div className="Dashboard">
        <NavBar />
        <BookProvider>
          <RoomProvider>
            <LeftSide />
            <ProfileProvider>
              <RightSide />
            </ProfileProvider>
          <RoomProvider> 
        <BookProvider>
      </div>
    );
  }
};

I know, i'm the first that hate the context API and the drilling, but maybe in cases where the component are going to use directly the consumer is a good option manage the providers in this way.

Obvious, if you are going to pass the props of the context through other components, is a better idea to use the provider inside the component.

Remove:

- import { reject } from "bluebird";

the variable is defined but never used.

Replace by a named export

- export default AuthService
+ export const AuthService = ...

Replace by async/await

- const onLogin = idToken => {
-   return fetch(authUri, {
-     method: "POST",
-     body: JSON.stringify({
-       idToken
-     }),
-     headers: {
-       "Content-Type": "application/json"
-     }
-   })
-   .then(res => res.json())
-   .catch(err => {
-     return new Error("An error occurred whith the request");
-   });
+ const onLogin = async (idToken) => {
+   try {
+     const res = await fetch(authUri, {
+       method: 'POST',
+       body: JSON.stringify({
+         idToken
+       }),
+       headers: {
+         'Content-Type': 'application/json',
+       }
+     });
+     const data = await res.json();
+     return data;
+   } catch(err) {
+     return new Error('An Error ocurred with the request');
+   }
};

Change filename where the getUserName function is imported

The sidebar use of the booking service is out of date according to the backend responses, it needs to be updated to solve the crashes.

Replace promises by async/await

Closes #17

When the localStorage is empty (first time) and tries to load "cb_user" info it returns null and crashes. JSON.parse cannot parse null.

Add a validation: if the data is null return an empty object in a string ("{}").

Add an index.ts to services

The problem I see rn in StorageService is that it exports a factory function. Every consumer of StorageService needs to execute the function to have access to the instance, we can initialize the instance in the index.ts file and export it. So every consumer don't have to do it manually.

// index.ts
import { StorageService } from './StorageService'
import * as authService from './AuthService'

const storageService = StorageService()

export { storageService, authService }

-The roomId for the client needs to be mapped to the room_id on the backend

-The time needs to match the format of the backend.

NavBar tries to access the user info, but it is a nested property inside a nested (possibly null) object.

One solution is to use monads, (see for reference), but that approach is an over-kill rn.

Currently we're using lodash, which has a functional part. So we can use prop, compose and defaultTo.

const data = {
  sessionInfo: {
    user: {
      name: 'John Doe'
    }
  }
}

// getUserName :: ISessionInfo -> String
const getUserName = fp.compose(
  fp.defaultTo(''),
  fp.prop('name'),
  fp.prop('user'),
  fp.prop('sessionInfo')
)

getUserName(data) // 'John Doe'

// it doesn't crash, yay!
getUserName({}) // ''

Delete home page and replace it as the root page for the login page

Scenario 1: The user provides the following data:

1. future date
2. start date (during working hours)
3. end date (during working hours)
4. Conference room registered and available
5. People involved (emails)
6. A reason for the appointment

System response: Show the scheduled meeting details

Scenario 2: The user provides the following data:

1. future date
2. start date (during working hours)
3. end date (during working hours)
4. Conference room registered and available
5. No emails provided
6. No reason provided

System response: Show error messaging detailing what data is wrong and why

extend prettier config

search bar should search by name (the name of the person who created the appointment)

as a user I want to change the calendar month by clicking on the arrows.

add: jest + enzyme initial config for testing

When de delete button is clicked a confirmation dialog should display.

Repĺace Authorization Provider-Consumer per High Order Components style.

add .env.local to .gitignore and create a .env.local.example file with all the required env vars.

and please add to the installation guide.

The sidebar needs to be changed to a drawer.

we need to add things like:

• installation
• config
• development
• production build
• run tests
• docs (links, etc)

Scenario 1: The user wants to edit the following data:

1. future date
2. start date (during working hours)
3. end date (during working hours)
4. Conference room registered and available
5. People involved (emails)
6. A reason for the appointment

System response: Show the scheduled meeting details

Scenario 2: The user wants to edit the following data:

1. future date
2. start date (during working hours)
3. end date (during working hours)
4. Conference room registered and available
5. No emails provided
6. No reason provided

System response: Show error messaging detailing what data is wrong and why

AvatarButton

1. Convert function declaration into a expression
2. Use object destructuring on props

- export function AvatarButton(props) {
+ export const AvatarButon = ({ anchorEl, onClick }) => {

LeftSide

1. Convert function declaration into a expression
2. Use object destructuring on props
3. Delete Fragment
4. Used named exports
5. Rename extension to jsx

- function LeftSide (props) {
- // ...
-      <React.Fragment>{props.children}</React.Fragment>
- // ...
- export default LeftSide
+ export const LeftSide = ({ children }) => {
+ // ...
+      {children}
+ // ...

NavBarContainer

1. Convert function declaration into a expression
2. Use object destructuring on props
3. Use named exports
4. Rename extension to jsx

NavBarMenu

1. Convert function declaration into a expression
2. Delete commented code
3. Rename extension to jsx

RightSide

1. Convert function declaration into a expression
2. Use object destructuring on props
3. Use named exports
4. Delete Fragment
5. Rename extension to jsx

UserNameLabel

1. Rename to UserNameLabel
2. Convert function declaration into a expression
3. Use object destructuring on props

We are using typescript, there's no need for prop-types package

Add a blank space between the Bearer and the token in string interpolation

Repĺace Authorization Provider-Consumer per High Order Components style.

Replace promises by async/await