Merge branch 'develop-V2' into ch-setup-redux-saga

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2
 jobs:
   build:
     docker:
-      - image: circleci/node:9.11.2
+      - image: circleci/node:dubnium
         environment:
         - NODE_ENV: testing
     environment:
@@ -31,7 +31,7 @@ jobs:
           command: yarn coveralls
   deploy:
     docker:
-      - image: circleci/node:9.11.2
+      - image: circleci/node:dubnium
     environment:
       TERM: xterm-256color
     working_directory: ~/soc-frontend
@@ -80,6 +80,4 @@ workflows:
           filters:
             branches:
               only:
-                - master
-                - develop
-                - design
+                - develop-V2

Dockerfile

@@ -0,0 +1,18 @@
+FROM node:dubnium-alpine
+
+LABEL AUTHOR="Crispus Kamau <crispus.kamau@andela.com>"
+LABEL application="soc-frontend"
+
+ENV NODE_PATH /usr/local/share/.config/yarn/global/node_modules/
+
+RUN yarn global add express@4.16.2 morgan@1.9.1
+
+WORKDIR /application
+
+COPY public /application
+
+COPY prodserver /application
+
+RUN chmod +x ./prodserver
+
+CMD ./prodserver 4000

README.md

@@ -1,5 +1,5 @@
-[![CircleCI](https://circleci.com/gh/AndelaOSP/andela-societies-frontend/tree/develop.svg?style=svg)](https://circleci.com/gh/AndelaOSP/andela-societies-frontend/tree/develop)
-[![Coverage Status](https://coveralls.io/repos/github/AndelaOSP/andela-societies-frontend/badge.svg)](https://coveralls.io/github/AndelaOSP/andela-societies-frontend)
+[![CircleCI](https://circleci.com/gh/andela/andela-societies-frontend/tree/develop-V2.svg?style=svg)](https://circleci.com/gh/andela/andela-societies-frontend/tree/develop-V2)
+[![Coverage Status](https://coveralls.io/repos/github/andela/andela-societies-frontend/badge.svg?branch=develop-V2)](https://coveralls.io/github/andela/andela-societies-frontend?branch=develop-V2)
 # 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.
 

config.js

@@ -24,10 +24,15 @@ const configs = {
     APP_URL: 'http://soc-sandbox.andela.com:4021',
     API_BASE_URL: 'http://api-soc-sandbox.andela.com:4022/api/v1',
   },
-  design: {
+  staging_v2: {
     AUTH_API: 'https://api.andela.com/login?redirect_url=',
-    APP_URL: 'https://design-societies.andela.com',
-    API_BASE_URL: 'https://api-design-societies.andela.com/api/v1'
+    APP_URL: 'https://staging-v2-societies.andela.com',
+    API_BASE_URL: 'https://api-staging-v2-societies.andela.com/api/v1'
+  },
+  production_v2: {
+    AUTH_API: 'https://api.andela.com/login?redirect_url=',
+    APP_URL: 'https://societies-v2.andela.com',
+    API_BASE_URL: 'https://societies-api-v2.andela.com/api/v1'
   },
 };
 

package.json

@@ -5,11 +5,10 @@
   "main": "server/server.js",
   "scripts": {
     "start": "webpack-dev-server --config=webpack.config.dev.js --open --history-api-fallback",
-    "build": "webpack -p --config=webpack.config.prod.js && npm run copy:favicon",
+    "build": "webpack -p --config=webpack.config.prod.js",
     "sandbox": "export NODE_ENV=sandbox && webpack --optimize-minimize --config=webpack.config.prod.js && npm run copy:favicon",
     "test": "export NODE_ENV=testing && jest --verbose",
     "test:dev": "export NODE_ENV=testing && jest --verbose --watch",
-    "copy:favicon": "cp src/assets/images/favicon.ico public/favicon.ico",
     "deploy": "npm run build && npm run serve",
     "coverage": "export NODE_ENV=testing && jest --coverage",
     "coveralls": "cat ./coverage/lcov.info | coveralls"
@@ -50,6 +49,7 @@
     "jest": "^23.6.0",
     "mini-css-extract-plugin": "^0.5.0",
     "node-sass": "^4.11.0",
+    "resolve-url-loader": "^3.0.0",
     "sass-loader": "^7.1.0",
     "url-loader": "^1.1.2",
     "webpack": "^4.27.1",
@@ -58,6 +58,9 @@
     "webpack-merge": "^4.1.5"
   },
   "dependencies": {
+    "bootstrap": "^4.2.1",
+    "js-cookie": "^2.2.0",
+    "jwt-decode": "^2.2.0",
     "prop-types": "^15.6.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",

scripts/deploy.sh

@@ -0,0 +1,88 @@
+#!/bin/bash
+set -o errexit
+set -o pipefail
+
+DEFAULT_GOOGLE_CLUSTER_NAME=soc
+PROJECT_NAME=soc-frontend
+set_variables() {
+    COMMIT_HASH=$(git rev-parse --short HEAD)
+
+    case "$CIRCLE_BRANCH" in
+        develop-V2)
+            IMAGE_TAG="staging-v2-${COMMIT_HASH}"
+            ENVIRONMENT=staging
+            GOOGLE_COMPUTE_ZONE=${STAGING_ZONE}
+            GOOGLE_CLUSTER_NAME=${STAGING_CLUSTER_NAME}
+            DEPLOYMENT_NAME="staging-v2-${PROJECT_NAME}"
+            export NODE_ENV=staging_v2
+            ;;
+        *)
+            echo "Err: This branch should not deploy."
+            exit 1
+            ;;
+    esac
+}
+authorize_docker() {
+    echo "====> Store Sand authenticate with service account"
+    echo "$GCLOUD_SERVICE_KEY" | base64 --decode > "${HOME}"/gcloud-service-key.json
+
+
+    echo "====> Login to docker registry"
+    docker login -u _json_key -p "$(cat ${HOME}/gcloud-service-key.json)" https://gcr.io
+}
+
+deploy_image() {
+    echo "====> Build application artifacts"
+    yarn run build
+
+    echo "====> Build docker image with built application artifacts"
+
+    IMAGE="${DOCKER_REGISTRY}/${GOOGLE_PROJECT_ID}/${PROJECT_NAME}:${IMAGE_TAG}"
+
+    docker build -t "$IMAGE" .
+
+    docker push "$IMAGE"
+}
+
+install_google_cloud_sdk(){
+    echo "====> Installing google cloud sdk"
+    echo "deb http://packages.cloud.google.com/apt cloud-sdk-jessie main" | sudo tee /etc/apt/sources.list.d/google-cloud-sdk.list
+    curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key add -
+    sudo apt-get update && sudo apt-get install kubectl google-cloud-sdk
+}
+
+configure_google_cloud_sdk() {
+    echo "Configuring Google Cloud Sdk"
+    gcloud auth activate-service-account --key-file="${HOME}"/gcloud-service-key.json
+    gcloud --quiet config set project "${GOOGLE_PROJECT_ID}"
+    gcloud --quiet config set compute/zone "${GOOGLE_COMPUTE_ZONE}"
+    gcloud --quiet container clusters get-credentials "${GOOGLE_CLUSTER_NAME}"
+}
+
+deploy_to_kubernetes(){
+     echo "====> Prepare image for deployement"
+
+    IMAGE="${DOCKER_REGISTRY}/${GOOGLE_PROJECT_ID}/${PROJECT_NAME}:${IMAGE_TAG}"
+    echo "====> Deploying ${IMAGE} to ${DEPLOYMENT_NAME} in ${ENVIRONMENT} environment"
+
+
+    kubectl set image deployment/${DEPLOYMENT_NAME} frontend="${IMAGE}" -n "${ENVIRONMENT}"
+
+    if [ "$?" == "0" ]; then
+        echo "Deployment completed succesfully"
+    else
+        echo "Failed to deploy ${IMAGE} to ${ENVIRONMENT} environment"
+    fi
+
+}
+
+main() {
+    set_variables
+    authorize_docker
+    deploy_image
+    install_google_cloud_sdk
+    configure_google_cloud_sdk
+    deploy_to_kubernetes
+}
+
+main "$@"

scripts/slack_notification.sh

@@ -0,0 +1,66 @@
+#!/usr/bin/env bash
+
+set -o errexit
+set -o pipefail
+
+
+declare_env_variables() {
+
+  # Declaring environment variables
+  #
+  # Some environment variables assigned externally are:
+  # SLACK_CHANNEL_HOOK : This is the webhook for the Slack App where notifications will be sent from
+  # DEPLOYMENT_CHANNEL : This is the channel on which the Slack notifications will be posted
+  # Some template for the Slack message
+  if [ ${CIRCLE_BRANCH} == "master" ]; then
+    ENVIRONMENT="production-v2"
+  else
+    ENVIRONMENT="staging-v2"
+  fi
+  if [ "$1" == "success" ]; then
+      MESSAGE_TEXT="The ${CIRCLE_BRANCH} branch has been deployed to the ${ENVIRONMENT} environment"
+      MESSAGE_COLOR="good"
+
+  fi
+  if [ "$1" == "fail" ]; then
+      MESSAGE_TEXT="Deployment to ${ENVIRONMENT} failed!!!"
+      MESSAGE_COLOR="danger"
+  fi
+
+  COMMIT_LINK="https://github.com/${CIRCLE_PROJECT_USERNAME}/${CIRCLE_PROJECT_REPONAME}/commit/${CIRCLE_SHA1}"
+  IMG_TAG="$(git rev-parse --short HEAD)"
+  CIRCLE_WORKFLOW_URL="https://circleci.com/workflow-run/${CIRCLE_WORKFLOW_ID}"
+  SLACK_TEXT_TITLE="CircleCI Build #$CIRCLE_BUILD_NUM"
+  SLACK_DEPLOYMENT_TEXT="Executed Git Commit <$COMMIT_LINK|${IMG_TAG}>: ${MESSAGE_TEXT}"
+}
+
+send_notification() {
+
+  # Sending the Slack notification
+
+  curl -X POST --data-urlencode \
+  "payload={
+      \"channel\": \"${DEPLOYMENT_CHANNEL}\",
+      \"username\": \"JobNotification\",
+      \"attachments\": [{
+          \"fallback\": \"CircleCI job notification\",
+          \"color\": \"${MESSAGE_COLOR}\",
+          \"author_name\": \"Branch: $CIRCLE_BRANCH by ${CIRCLE_USERNAME}\",
+          \"author_link\": \"https://github.com/AndelaOSP/andela-societies-backend/tree/${CIRCLE_BRANCH}\",
+          \"title\": \"${SLACK_TEXT_TITLE}\",
+          \"title_link\": \"$CIRCLE_WORKFLOW_URL\",
+          \"text\": \"${SLACK_DEPLOYMENT_TEXT}\"
+      }]
+  }" \
+  "${SLACK_CHANNEL_HOOK}"
+}
+
+main() {
+  echo "Declaring environment variables"
+  declare_env_variables "$@"
+
+  echo "Sending notification"
+  send_notification
+}
+
+main "$@"

src/app/Authentication/components/AuthenticateRoute.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import {
+  Route,
+  withRouter,
+} from 'react-router-dom';
+
+/**
+ * @name _Authenticate
+ * Authenticates routes. If not authenticated returns a message
+ * @param {Component} component
+ * @param {Boolean} isAuthenticated
+ */
+export const Authenticate = ({ component: Component, isAuthenticated, ...rest }) => (
+  <Route
+    {...rest}
+    render={
+      (props) => {
+        if (isAuthenticated) {
+          return <Component {...props} />;
+        }
+        return (
+          <div>
+            <h1> PLEASE LOGIN. NOT AUTHORIZED </h1>
+          </div>
+        );
+      }
+    }
+  />
+);
+
+export default withRouter(Authenticate);

src/app/Authentication/components/index.js

@@ -0,0 +1 @@
+export { default } from './AuthenticateRoute';

src/app/Authentication/components/tests/AuthenticateRoute.test.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { Authenticate } from '../AuthenticateRoute';
+
+describe('<AuthenticateRoute />', () => {
+  const setUpWrapper = ({
+    isAuthenticated = true,
+  } = {}) => {
+    const props = {
+      component: jest.fn(),
+      isAuthenticated,
+      render: jest.fn()
+    }
+    return shallow(<Authenticate {...props} />)
+  }
+
+  it('renders Route component', () => {
+    const wrapper = setUpWrapper();
+    expect(wrapper.find('Route').exists()).toBe(true);
+  });
+
+  it('renders error message when component is not authenticated', () => {
+    const wrapper = setUpWrapper({ isAuthenticated: false});
+    wrapper.props().render({ isAuthenticated: false });
+    expect(wrapper.props().render({ isAuthenticated: false })).toEqual(<div><h1> PLEASE LOGIN. NOT AUTHORIZED </h1></div>);
+  });
+});