andela / andela-societies-frontend

Andela societies is an application that allows fellows to log and track points for their societies

Andela Societies app (frontend)

Andela societies is an app that avails information about socities at Andela (Invictus, iStelle, Phoenix and Sparks) to everyone at Andela. The app also enables more interaction between Andelans through Societies.

Table of Contents

• Technology Stack
• Installation
• Testing
• FAQ

Technology Stack

• React
• SCSS
• Redux
• NodeJS
• Webpack
• Jest
• Enzyme

Installation

1. Install Node JS.
2. To clone, run git clone https://github.com/AndelaOSP/andela-societies-frontend.git.
3. cd into the root of the project directory.
4. Install yarn.
5. Run yarn install on the terminal to install dependecies.
6. Setup local development server.

• In your terminal, execute the following command:

    sudo nano /etc/hosts

• or if you are using vim, execute the following command:

    sudo vim /etc/hosts

  Otherwise, you can open your hosts file in your editor of choice.

• Add the following line to your hosts file:

    127.0.0.1 soc-dev.andela.com

• Save changes and quit the editor.

7. To start the application run yarn start

Important note: If you intend to contribute to this project, you need to install eslint and ensure linting is working in your editor.

Testing

Unit tests - Run yarn test on the terminal while within the project root directory. Unit testing is achieved through the use of jest package. jest is used to test javascript code in React applications.

To test the app in watch mode, Run yarn test:dev. This listens to changes in your files and runs the tests as soon as there's a change in the files.

Other commands

• yarn build builds the app for production.
• yarn serve starts the app in production mode.

Support or Contribution

For any suggestions or contributions please do not hesistate to contact the owners of this repository.

Contributions to this project are welcomed by all, If you need to contribute, follow the steps below

• Fork the repository
• Follow Installation and Setup as explained earlier
• Create a branch off develop for the feature you wish to add
• Make neccessary changes, commit and raise a pull request against develop, conventions can be found on the wiki page. Note when making contributions, please endevour to follow the Airbnb javascript style guide. Also make sure to follow the Engineering playbook for conventions.

FAQ

See the andela-societies-frontend wiki

Dev notice:

Package installation: Use yarn to install packages. Do not install packages using npm. For more info, checkout this issue.

Running the sandbox

Follow the instructions on this link to run it.

In case of any errors ask the DevOps Engineer in the team

andela-societies-frontend's Issues

Add a component that displays my statistics on the "MyActivities" page.

Description

https://www.pivotaltracker.com/story/show/155907350

Add Bithound and discuss our eslint rules

• Intergrate Bithound onto andela-societies
• Decide which eslint rules we want to use on our project

Resolves #155907023 A logged in user should be able to see their profile picture

A logged in user should be able to see their profile picture in the profile action and name in the dropdown.

Fix comment for PageHeader PropType

The comment for PageHeader PropType has invalid properties.

Create a wiki for PR formats.

How to write PRs.

[#157182896] Connect the society page to the API

Add the functionality to fetch society information from the API

Configure eslint to use 120 characters

Add rule to have line length limit to be 120 characters

[#157238451] Populate the category dropdown in the log activity form

Connect the my activities page to the activity categories endpoint such that when the modal containing the log activities form is loaded, the category dropdown contains the fetched categories

Fix deployment errors

Deployment errors are being caused by installing packages using npm as opposed to yarn. This makes the yarn.lock out of sync with the package.json file hence the deployment error.

Acceptance criteria.

• The app should be able to deploy successfully.
• Add a notice in the README.md file that states that all packages should be installed using yarn.

Resolves #155906765

As a user logged in as a Fellow, when I click the FAB, I can see a modal containing a form for logging activities

Add ability to sign in

Description

Implement logic to sign in using the Andela authentication API.

Developers's notes

• Use the Andela authentication API for sign in. Use https://api.andela.com/login?redirect_url=<appurl> in production or https://api-staging.andela.com/login?redirect_url=<appurl> in development and staging.

• Store the token in local storage with the key jwt-token to enable Single Sign-On (SSO) with other Andela Apps (AIS, Lv, Lenken, etc.)

• The production and stating authentication APIs generate tokens with different user Id's so, watch out for unexpected behavior. A quick fix would be to log out and log in again.

Fix deployment errors

Why is this important?

We need the ability to deploy the app without errors.

Fix bug in router

Currently BrowserRouter has more than one child. This causes the application to throw an error.

Create view of the sign in page

Description

Should create page as in design spec:

https://app.zeplin.io/project/5a7c3ff950ceaa75617a66de/screen/5a8a865473325c1abfeeffea

{No logic needed just styling}

Wiki for styling and Bem

Style Guide!

Choose between <double-qoutes> or <single-qoutes>

Description

We have both double and single qoutes instances in the project

How done looks like

• Choose one standard
• Change all instances of the other
• Add eslint rule to enforce qoute-rules

Add comments to code where necessary

Use JSDOC styling to define what components/ methods take in as input and give as output

Create a society page component. Resolves #156307063

Description

• This component displays information about a specific society available to any logged in user.
• It displays an overview of activity and point information for the society
• It also has tabs to display logged activities for the society and leadership information

Story on PT: https://www.pivotaltracker.com/n/projects/2154966/stories/156307063

If there is no token should be redirected to login page

Remove packages not in use

Description

Go through packages and remove every package not in use. e.g. pug

Move style files to one folder and call styles in root component

Description

Right now every component explicitly calls its own style file.

Expected

Move all style files to one folder and import all of them into the root Component once.

Add ability to logout

Description available at https://www.pivotaltracker.com/story/show/155808774

Setup Redux

Description

We need state management up and running

How done looks like:

• Be able to start creating actions/reducers and hooking them up to components without needing set-up

• redux-thunk

• redux-dev-tool

Ramp up tools

• https://auth0.com/blog/secure-your-react-and-redux-app-with-jwt-authentication/
• https://redux.js.org/

Refactor code to adhere to the rules in the description

• Have proptyes at the top
• class based components should have constructors if the state is defined
• use arrow functions for event handling

Create a config file for different environments.

Why is this important
We need a way to switch between different configs depending on the environment the app is running in, such as:

• Development
• Testing
• Staging
• Production

Acceptance criteria
Ability to use different configurations based on the value of the NODE_ENV.

Dev notes

• The config file should live in the ROOT project folder.
• Configs to set for the different environments should include:
  -- AUTH_API - At the Authentication API's URL.
  -- API_BASE_URL - The URL of the backend API.
  -- APP_URL - The URL of the Andela societies app.

Setup routing React Router 4

Description

Set-up RR v4

Ramp up tools

• https://reacttraining.com/react-router/

Create the Redemptions page component Resolves #156309348

Description
This page displays information about the user's activities with points showing the redemption status

Story - https://www.pivotaltracker.com/story/show/156309348

Resolves [#156801312] As a logged in user as a fellow, I should see my logged activities on the my activities page

Add functionality to retrieve a logged-in fellow's activities from the backend to be displayed in the my-activities page