feat(follow and unfollow): users should be able to follow each other

Add action creators for follow
Add reducers for follow

[Maintains #165273540]

package.json

@@ -68,6 +68,7 @@
     "enzyme-adapter-react-16": "^1.13.2",
     "express": "^4.17.1",
     "file-loader": "^3.0.1",
+    "firebase": "^6.2.0",
     "jwt-decode": "^2.2.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
@@ -80,8 +81,8 @@
     "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0",
     "sass-rem": "^2.0.1",
+    "semantic-ui-react": "^0.87.2",
     "serve": "^11.0.1",
-    "toastify": "^1.0.12",
     "url-loader": "^1.1.2"
   },
   "devDependencies": {

src/assets/MainStyle.scss

@@ -1,5 +1,4 @@
 @import url("https://fonts.googleapis.com/css?family=Lobster&display=swap");
-@import "sass-rem";
 
 $primary-font-family: "Open Sans", sans-serif;
 $secondary-font-family: "Lobster", sans-serif;
@@ -8,6 +7,7 @@ $primary: #2D6686;
 $primary-ultra-light: #D9E3F0;
 $secondary: #E91E63;
 $white: #FFFFFF;
+$black: #021019;
 $shadow: #D3D6DB;
 
 * {

src/components/Apps/App.js

@@ -2,7 +2,9 @@ import React, { Component } from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import LandingPage from 'pages/Landing';
 import PasswordResetPage from 'pages/PasswordReset';
+import ProfilePage from 'pages/Profile';
 import PageNotFound from 'pages/Error';
+import PrivateRoute from 'routers/PrivateRoute';
 
 import 'assets/MainStyle.scss';
 
@@ -13,6 +15,7 @@ class App extends Component {
         <Switch>
           <Route exact path="/" render={props => <LandingPage {...props} />} />
           <Route path="/reset-password" render={props => <PasswordResetPage {...props} />} />
+          <PrivateRoute path="/profile/:profileUser" component={ProfilePage} />
           <Route component={PageNotFound} />
         </Switch>
       </Router>

src/components/ArticlePreview/index.js

@@ -80,10 +80,10 @@ ArticlePreview.propTypes = {
       views: PropTypes.number.isRequired,
       reads: PropTypes.number.isRequired,
     }),
-    likeCount: PropTypes.arrayOf(PropTypes.shape({
+    likeCount: PropTypes.shape({
       likes: PropTypes.number.isRequired,
       dislikes: PropTypes.number.isRequired,
-    })),
+    }),
   }),
 };
 

src/components/NavBar/NavBarStyle.scss

@@ -1,4 +1,5 @@
 @import 'assets/MainStyle.scss';
+@import 'sass-rem';
 
 .navbar {
   padding-top: 0.5rem;

src/components/NavBar/index.js

@@ -85,7 +85,9 @@ export class Navbar extends Component {
                   className="navbar__navigation__auth__button--link"
                   style={{ cursor: 'pointer' }}
                 >
-                  { user.username }
+                  <a href={`/profile/${user.username}`}>
+                    { user.username }
+                  </a>
                 </span>
               </li>
 

src/components/Profile/Index.js

@@ -0,0 +1,51 @@
+// import react library
+import React from 'react';
+// import third pary libraries
+import PropTypes from 'prop-types';
+import { Tab } from 'semantic-ui-react';
+
+// import settings components
+import Settings from 'components/Profile/Settings';
+
+// import profile style
+import './Profile.scss';
+
+export const ProfileMain = ({ match: { params: { profileUser } }, authenticatedUser }) => {
+  const panes = [
+    { menuItem: 'Articles ', render: () => <Tab.Pane attached></Tab.Pane> },
+  ];
+  if (authenticatedUser === profileUser) {
+    panes.push({ menuItem: '| Settings', render: () => <Tab.Pane attached><Settings /></Tab.Pane> });
+  }
+
+  return (
+    <div className="main">
+      <div className="profile-tab-menu">
+        <Tab className="tab" menu={{ secondary: true, pointing: true }} panes={panes} />
+      </div>
+    </div>
+  );
+};
+
+/**
+* Assigning props types
+*/
+ProfileMain.propTypes = {
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      profileUser: PropTypes.string,
+    })
+  }),
+  authenticatedUser: PropTypes.string,
+};
+
+ProfileMain.defaultProps = {
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      profileUser: 'nadralia',
+    })
+  }),
+  authenticatedUser: 'lou',
+};
+
+export default ProfileMain;

src/components/Profile/Profile.scss

@@ -0,0 +1,62 @@
+@import 'assets/MainStyle.scss';
+
+.main {
+  width: 70%;
+  padding-left: 2%;
+  font-family: 'Open Sans', sans-serif;
+}
+
+.profile-tab-menu {
+  &__menu {
+    border-bottom: .125rem solid $secondary;
+    display: flex;
+    margin-bottom: 0;
+    width: 100%;
+
+    &__item {
+      color: $black;
+      font-family: 'Open Sans', sans-serif;
+      font-size: 1.5rem;
+      line-height: 1.8125rem;
+      padding: 2.075rem;
+    }
+
+    &__active.item {
+      font-weight: 400 !important;
+    }
+  }
+
+  &__segment {
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.settings {
+  margin-top: 1.875rem;
+}
+
+.edit-profile {
+  background: $white;
+  border: .0625rem solid $secondary;
+  border-radius: .25rem;
+  box-sizing: border-box;
+  padding: 4.6875rem 1.3125rem 1.5rem;
+}
+
+@media only screen and (max-width: 37.5rem) {
+  .main {
+    width: 100%;
+  }
+}
+
+menuItem {
+  padding: 4.6875rem 1.3125rem 1.5rem;
+}
+
+.tab a {
+  cursor: pointer;
+}

src/components/Profile/Profile.test.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import ProfileMain from 'components/Profile/Index';
+
+describe('Setting Component', () => {
+  const props = {
+    match:
+    {
+      params: {
+        profileUser: 'nadralia',
+      }
+    },
+    authenticatedUser: 'nadralia',
+  };
+
+  it('should match the snapshot', () => {
+    const component = shallow(<ProfileMain {...props} />);
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should render correctly', () => {
+    const wrapper = mount(<ProfileMain {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/Profile/Setting.scss

@@ -0,0 +1,67 @@
+.main {
+  display: 'flex';
+}
+
+.edit-btn {
+  width: 40%;
+  padding: 0.5rem 2rem;
+  margin: 10px auto;
+  border: 1px solid #F34579;
+  background-color: #F34579;
+  border-radius: 25px;
+  display: block;
+  font-size: 1.2rem;
+  cursor: pointer;
+
+  &:hover {
+    outline: transparent;
+    background-color: #2D6686;
+    color: #FFFFFF;
+  }
+
+  &:focus {
+    outline: transparent;
+  }
+}
+
+.settings__edit-profile textarea { 
+  margin: 0;
+  width: 100%;
+  -webkit-appearance: none;
+  padding: .78571429rem 1rem;
+  background: #FFF;
+  border: 1px solid rgba(34,36,38,.15);
+  outline: 0;
+  color: rgba(0,0,0,.87);
+  border-radius: .28571429rem;
+  -webkit-box-shadow: 0 0 0 0 transparent inset;
+  box-shadow: 0 0 0 0 transparent inset;
+  -webkit-transition: color .1s ease,border-color .1s ease;
+  transition: color .1s ease,border-color .1s ease;
+  font-size: 1rem;
+  line-height: 1.2857;
+  resize: vertical;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;	
+}
+
+.settings__edit-profile input[type=text] {
+  font-family: 'Open Sans', sans-serif;
+  margin: 0;
+  outline: 0;
+  width: 100%;
+  -webkit-appearance: none;
+  line-height: 1.21428571rem;
+  padding: .67857143rem 1rem;
+  font-size: 1rem;
+  background: #FFF;
+  border: 1px solid rgba(34,36,38,.15);
+  color: rgba(0,0,0,.87);
+  border-radius: .28571429rem;
+  -webkit-box-shadow: 0 0 0 0 transparent inset;
+  box-shadow: 0 0 0 0 transparent inset;
+  -webkit-transition: color .1s ease,border-color .1s ease;
+  transition: color .1s ease,border-color .1s ease;
+  margin-bottom: 0.978rem;
+}