Insight Frontend

You can find the deployed project at https://getinsightly.com

Team

Uzoamaka Anyanwu	Megan Ennis	Damilola Olawumi	Johnson Ogwuru	Francis Bulus	David Kuseh

Project Overview

Trello Board
Product Canvas
UX Design files

A writing publishing platform (cms) that allows readers to emoji react to text blocks and text highlights

Key Features

users(writers) can create an article in the web app
users(readers) can view existing articles in the web app
users(readers) can 'like' an article or react to specific sections of an article using emojis in the web app
users(writers) can gauge their readers' interests using analytics integrated within the web app

Tech Stack

Front end built using:

React/Redux
Styled Components
EditorJS

Front end deployed to Netlify

APIs

We use EditorJS as our integrated Rich Text Editor

Environment Variables

For the app to function correctly, the user must set up their own environment variables. There should be a .env file containing the following:

DATABASE_URL = postgres url from elephantsql

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

For development, you will only need Node.js installed on your environment.

$ node --version
v10.16.1

$ npm --version
6.9.0

Installing

$ https://github.com/LABS-EU3/react_blog_frontend
$ cd react-blog
$ npm install

Starting Development Server

$ npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser. The page will reload if you make edits.

Running the tests

$ npm test

Launches the test runner in the interactive watch mode.

Deployment/Build For Production

$ npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

Linting fix

$ npm lint:fix

Fixes linting automatically

Coverage reporting

$ npm coverage

Reports coverage with disabled test-watching

Eject hidden modules

$ npm eject

Ejects hidden modules into package.json

Structure and Naming

    ─src
    │   App.js
    │   global-styles.js
    │   index.css
    │   index.js
    │   setupTests.js
    │   
    ├───assets
    │   └───images
    │           appstr.png
    │           demo.GIF
    │           insight-logo.png
    │           logo.png
    │           lp-pic.png
    │           ps.png
    │       
    ├───pages
    │       Home.js
    │       LandingPage.js
    │       
    ├───redux-store
    │   ├───actions
    │   │       index.js
    │   │       
    │   └───reducers
    │           posts-reducer-editing.js
    │           posts-reducer-reading.js
    │           user-reducer.js
    │           
    ├───utilities
    │   └───axios
    │           index.js
    │           
    └───__tests__
            dummy-test.test.js

[Setup formatting on Editor]

On VsCode:

Go to Settings > Text Editor > Formatting
Check Format on Save

Example:

Workflow

Create a new feature-branch from dev branch that describes your work.

git checkout -b ft-editor

Example:

Adding a New Feature

Create Component

function Register({ register, registering }){
     <p>
       Get started with Insight for free by creating an account with your
       email address
     </p>
}

export default connect(state => state, actionCreators)(Register);

Define Route

import Register from './pages/Register';

...
<Route exact path='/register' component={Register}/>

Create Action

 export const REGISTER_REQUEST ='REGISTER_REQUEST';
 export const REGISTER_SUCCESS = 'REGISTER_SUCCESS';
 export const REGISTER_FAILURE = 'REGISTER_FAILURE';

 export const register = user => dispatch => {
     dispatch({ type: types.REGISTER_REQUEST });
 axios
     .post("http://localhost:3300/api/auth/register", user)
         .then(res => {
             dispatch({ type: types.REGISTER_SUCCESS });
     })
         .catch(err => {
             console.log(err);
         alert("Please enter valid credentials");
         dispatch({ type: types.REGISTER_FAILURE });
     });
 };

Create Reducer

 export const registerReducer = (state = initialRegisterState, action) => {
   switch (action.type) {
 case types.REGISTER_REQUEST:
   return { loading: true };
 case types.REGISTER_SUCCESS:
   return { loading: false, success: true };
 case types.REGISTER_FAILURE:
   return { loading: false, success: false };
 default:
   return state;
     }   
 };

Add Reducer to root reducer

import { loginReducer } from "./redux-store/reducers/user-reducer";

const bigReducer = combineReducers({
    registering: registerReducer
});

Create Test Suite for Component

import React from "react";
import { render, cleanup } from "@testing-library/react";
import ReactDOM from "react-dom";
import Register from "../pages/Register";
import { createStore } from "redux";    
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import { registerReducer } from "../redux-store/reducers/user-reducer";

const renderWithRedux = (
ui,
{ initialState, store = createStore(registerReducer, initialState) } = {}
) => {
 return {
...render(
  <Provider store={store}>
    <BrowserRouter>{ui}</BrowserRouter>
  </Provider>
),
store
};
};

afterEach(cleanup);

describe("Register component", () => {
test("Component mounts without crashing", () => {
const { getByText } = renderWithRedux(<Register />);
const heading = getByText(/Try Insight for Free/i);
expect(heading).toBeInTheDocument();
});
    test("Button has relevant text content based on whether request is loading", () => {
const { getByText } = renderWithRedux(<Register />, {
  initialState: { registering: { loading: true } }
});

const submitRegisterCredsBtn = document.querySelector('[id="register-submit"]');
expect(submitRegisterCredsBtn).toHaveTextContent(/Loading../i);
expect(submitRegisterCredsBtn).not.toHaveTextContent(/Try for Free/i);
    });
});

Create Test Suite for Reducer

import { cleanup } from '@testing-library/react';
import userReducer from '../userReducer';
import { FETCH_START } from '../../actions/user';

const initialState = {
   loading: false,
   user: null,
   error: '',
};

afterEach(cleanup);
   describe('User Reducer', () => {
       it('Should return initial State', () => {
           expect(userReducer(undefined, {})).toEqual(initialState);
});

       it('Should Toggle Loading state', () => {
           expect(userReducer(initialState, { type: FETCH_START })).toEqual({
       ...initialState,
       loading: true,
       });
   });
});

Create Test Suite for Action

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import nock from 'nock';
import { setUser } from '../user';

const mockStore = configureMockStore([thunk]);

describe('Home Action Creator', () => {
   let store;
   beforeEach(() => {
   store = mockStore({});
});
afterEach(() => {
   nock.cleanAll();
});

it('Should return FETCH_SUCCESS Action with payload', () => {
   nock('https://home.com/api')
   .post('/user')
   .reply(200, {
       user: 'Sample User',
   });
   const expectedActions = [
   {
       type: 'SET_USER_START',
   },
   {
       type: 'SET_USER_ERROR',
       payload: 'Sample User',
   },
   ];
   store = mockStore({});
       return store.dispatch(setUser()).then(() => {
           expect(store.getActions()).toEqual(expectedActions);
       });
   });
});

Create Pull Request
- The PR should consisely explain the change or addition. Example:
- The PR description should clearly state what the PR is about in detail
Request a Review from at least one team member. Example:
Resolve Requested Changes. Example:
All CI status checks should be green
Review approval should have been submitted before merging

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.md

README.md

Insight Frontend

Team

Project Overview

Key Features

Tech Stack

APIs

Environment Variables

Getting Started

Prerequisites

Installing

Starting Development Server

Running the tests

Deployment/Build For Production

Linting fix

Coverage reporting

Eject hidden modules

Structure and Naming

[Setup formatting on Editor]

Workflow

Documentation

License

Attribution

Files

README.md

Latest commit

History

README.md

File metadata and controls

[Setup formatting on Editor]