Merge last 3 branches

.gitignore

@@ -2,7 +2,7 @@ node_modules/
 client/node_modules/
 config/production.json
 client/debug.log
-config/default.json
-package-lock.json
-
+client/src/social-config/
+client/package-lock.json
+client/src/social-config/firebaseConfig.js
 config/default.json

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "cSpell.words": [
+    "pageview"
+  ]
+}

client/package.json

@@ -4,13 +4,16 @@
   "private": true,
   "dependencies": {
     "axios": "^0.18.1",
+    "firebase": "^7.5.0",
     "moment": "^2.24.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-ga": "^2.7.0",
     "react-moment": "^0.9.2",
     "react-redux": "^7.0.2",
     "react-router-dom": "^5.0.0",
     "react-scripts": "3.0.0",
+    "react-social-login-buttons": "^3.0.0",
     "redux": "^4.0.1",
     "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0",

client/public/index.html

@@ -8,7 +8,7 @@
     <!-- Safari compatilibility -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-    <meta name="apple-mobile-web-app-title" content="Developer Hub" />
+    <meta name="apple-mobile-web-app-title" content="Hack Your Social" />
     <link rel="apple-touch-icon" href="developer-icon-144.png" />
     <!-- IE compatilibility -->
     <meta name="msapplication-TileImage" content="developer-icon-144.png" />

client/public/offline.html

@@ -8,7 +8,7 @@
     <!-- Safari compatilibility -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-    <meta name="apple-mobile-web-app-title" content="Developer Hub" />
+    <meta name="apple-mobile-web-app-title" content="Hack Your Social" />
     <link rel="apple-touch-icon" href="developer-icon-144.png" />
     <!-- IE compatilibility -->
     <meta name="msapplication-TileImage" content="developer-icon-144.png" />

client/public/sw.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-restricted-globals */
-const CACHE_VERSION = 1;
+const CACHE_VERSION = 7;
 const CURRENT_CACHES = {
   static: `static-v${CACHE_VERSION}`,
   dynamic: `dynamic-v${CACHE_VERSION}`,
@@ -8,8 +8,8 @@ const STATIC_FILES = [
   '/',
   '/index.html',
   '/offline.html',
-  '/static/media/showcase.4b31330b.jpg',
   '/static/js/bundle.js',
+  '/static/media/showcase.70190ae3.jpg',
   '/static/js/0.chunk.js',
   '/static/js/main.chunk.js',
   '/static/js/main.chunk.js.map',
@@ -71,21 +71,10 @@ const isStaticAsset = (requestUrl, array) => {
   return array.indexOf(cachePath) > -1;
 };
 
-const apis = [`${self.location.origin}/api/profile`];
-
 // Cache then network with fallback & dynamic caching
 self.addEventListener('fetch', event => {
-  if (apis.includes(event.request.url)) {
-    event.respondWith(
-      caches.open(CURRENT_CACHES.dynamic).then(cache => {
-        return fetch(event.request).then(response => {
-          const cloneResponse = response.clone();
-          trimCache(CURRENT_CACHES.dynamic, 30);
-          cache.put(event.request.url, cloneResponse);
-          return response;
-        });
-      }),
-    );
+  if (event.request.url.includes('/api/') || event.request.url.includes('sock')) {
+    event.respondWith(fetch(event.request));
   } else if (isStaticAsset(event.request.url, STATIC_FILES)) {
     event.respondWith(caches.match(event.request));
   } else {

client/src/App.css

@@ -20,6 +20,9 @@ body {
   background-color: #fff;
   color: #333;
 }
+.text-bold {
+  font-weight: bold;
+}
 
 a {
   color: var(--primary-color);
@@ -39,7 +42,7 @@ img {
   max-width: 1100px;
   margin: auto;
   overflow: hidden;
-  padding: 0 2rem;
+  padding: 0 1.2rem;
   margin-top: 6rem;
   margin-bottom: 3rem;
 }
@@ -70,6 +73,10 @@ img {
   color: var(--primary-color) !important;
 }
 
+.text-dark {
+  color: var(--dark-color);
+}
+
 /* Padding */
 .p {
   padding: 0.5rem;
@@ -367,11 +374,7 @@ button {
 /* Profile Page */
 .profile-grid {
   display: grid;
-  grid-template-areas:
-    'top top'
-    'about about'
-    'exp edu'
-    'github github';
+  grid-template-areas: 'top top' 'about about' 'exp edu' 'github github';
   grid-gap: 1rem;
 }
 
@@ -457,6 +460,39 @@ button {
   flex-basis: 20%;
 }
 
+/* Notifications*/
+.notification {
+  display: grid;
+  grid-template-columns: 2fr 4fr;
+  grid-gap: 2rem;
+}
+
+.list {
+  font-size: 18px;
+}
+
+.notification .table th {
+  font-size: 18px;
+}
+
+.notification-item {
+  background-color: #fff;
+  color: #114ccc;
+  cursor: pointer;
+}
+
+.notification-hover {
+  background-color: #fff;
+  color: rgb(173, 165, 165);
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.fa-trash:hover:before {
+  content: '\f2ed';
+  color: red;
+}
+
 /* Posts Page */
 .post-form .post-form-header {
   background: var(--primary-color);
@@ -492,6 +528,150 @@ button {
   margin-bottom: 0.5rem;
 }
 
+/* News feed */
+.news_feed {
+  display: flex;
+  padding: 20px 0 0;
+  margin-bottom: 14px;
+  box-shadow: -1px 1px 6px 0px #757c7d66;
+}
+
+.user_img {
+  border-radius: 10%;
+  width: 48px;
+  height: 48px;
+  margin: 15px 5px 0 10px;
+}
+
+.post_news {
+  font-size: 15px;
+  padding: 10px;
+  width: 100%;
+}
+.post_notification {
+  color: #17a2b8;
+  font-size: 11px;
+}
+.news_text {
+  color: #000;
+}
+
+.news_social {
+  margin: 5px;
+  color: #2e8793;
+}
+.more_news {
+  color: #2e8793;
+  font-style: italic;
+  transition: color 0.6s;
+}
+.more_news:hover {
+  color: #123438;
+}
+/* Mobile Styles */
+@media (max-width: 700px) {
+  .container {
+    margin-top: 8rem;
+  }
+
+  .hide-sm {
+    display: none;
+  }
+
+  /* Text Styles */
+  .x-large {
+    font-size: 3rem;
+  }
+
+  .large {
+    font-size: 2rem;
+  }
+
+  .lead {
+    font-size: 1rem;
+  }
+
+  /* Navbar */
+  .navbar {
+    display: block;
+    text-align: center;
+  }
+
+  .navbar ul {
+    text-align: center;
+    justify-content: center;
+  }
+
+  .navbar h1 {
+    margin-bottom: 1rem;
+  }
+
+  .navbar .welcome {
+    display: none;
+  }
+
+  /* Profiles Page */
+  .profile {
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+
+  .profile ul {
+    display: none;
+  }
+
+  /* Profile Page */
+
+  .profile-top img,
+  .profile img {
+    width: 200px;
+    margin: auto;
+  }
+
+  .profile-grid {
+    grid-template-areas: 'top' 'about' 'exp' 'edu' 'github';
+  }
+
+  .profile-about .skills {
+    flex-direction: column;
+  }
+
+  .dash-buttons a {
+    display: block;
+    width: 100%;
+    margin-bottom: 0.2rem;
+  }
+
+  .post {
+    grid-template-columns: 1fr;
+  }
+  .post a,
+  .post button {
+    padding: 0.3rem 0.4rem;
+  }
+}
+
+@media (min-width: 700px) {
+  .news_feed {
+    width: 70%;
+  }
+  .user_img {
+    border-radius: 10%;
+    width: 60px;
+    height: 60px;
+  }
+
+  .post_news {
+    font-size: 18px;
+  }
+
+  .news_social {
+    font-size: 20px;
+  }
+  .more_news {
+    cursor: pointer;
+  }
+}
 /* Friends Page */
 .friend-card {
   border: #ccc solid 1px;
@@ -627,9 +807,20 @@ input[class='search-txt']::-webkit-search-results-decoration {
     margin-bottom: 0.2rem;
   }
 
+  /* Notification */
+  .notification {
+    grid-template-columns: 1fr;
+  }
+
+  .notification .table th,
+  .notification .table td {
+    font-size: 1rem;
+  }
+
   .post {
     grid-template-columns: 1fr;
   }
+
   .post a,
   .post button {
     padding: 0.3rem 0.4rem;
@@ -905,6 +1096,6 @@ div.header {
 
 @media (min-width: 700px) {
   .div_search {
-    width: 50%;
+    width: 30%;
   }
 }

client/src/App.js

@@ -1,9 +1,9 @@
 import React, { Fragment, useEffect } from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import reactGA from 'react-ga';
 import Navbar from './components/layout/Navbar';
 import Landing from './components/layout/Landing';
 import Routes from './components/routing/Routes';
-
 // Redux
 import { Provider } from 'react-redux';
 import store from './store';
@@ -25,13 +25,19 @@ const App = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [loadUser]);
 
+  useEffect(() => {
+    reactGA.initialize('UA-153483511-1');
+    // to report page view
+    reactGA.pageview(window.location.pathname + window.location.search);
+  }, []);
+
   return (
     <Provider store={store}>
       <Router>
         <Fragment>
           <Navbar />
           <Switch>
-            <Route exact path="/" component={Landing} />
+            <Route exact path='/' component={Landing} />
             <Route component={Routes} />
           </Switch>
         </Fragment>