CleverProgrammers · Swatilekha-Roy · May 20, 2021 · May 20, 2021 · May 20, 2021 · May 20, 2021
diff --git a/README.md b/README.md
@@ -1,14 +1,14 @@
-# # Disney Plus Clone Readme
+# # LinkedIn Clone 
 
-## <a href='https://linkedin-clone-b9f2a.web.app' target='_blank'>LIVE DEMO</a>
+## <a href='https://linkedin-clone-c8494.web.app/' target='_blank'>LIVE DEMO</a>
 
-## Description
-This is the ReactJS LinkedIn Clone, the perfect project to put on your portfolio by Clever Programmer.
+Followed the Clever Programmer's amazing Youtube video tutorial to develop this feed page of LinkedIn, which has additional features such as google sign in authentication and making posts which may be accompanied by images or video links!
 
-## Build it today!
+You can find the tutorial <a href="https://www.youtube.com/watch?v=xP3cxbDUtrc&t=14983s">here</a>.
 
-#### PREREQUISITES:
-- Sign up for a Firebase account <a href='https://firebase.google.com'>HERE</a>
-- Install Node JS in your computer <a href='https://nodejs.org/en/'>HERE</a> (Select the LTS option)
-- Download all the images and videos <a href='https://drive.google.com/drive/folders/1czlG0rnLWJgNLhlU-tN6OVyB6xu1r5UU?usp=sharing'>HERE</a>
-- Watch full tutorial <a href='https://youtu.be/xP3cxbDUtrc'>HERE</a>
+### Tech Stack
+- React JS
+- Redux
+- Firebase
+- Google Authentication
+- Firestore
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,15 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
+    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/react": "^11.2.6",
+    "@testing-library/user-event": "^12.8.3",
+    "firebase": "^8.6.1",
+    "firebase-tools": "^9.11.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-player": "^2.9.0",
+    "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
-    "styled-components": "^5.2.3",
-    "web-vitals": "^1.0.1"
+    "redux": "^4.1.0",
+    "redux-thunk": "^2.3.0",
+    "styled-components": "^5.3.0",
+    "web-vitals": "^1.1.2",
+    "yarn": "^1.22.10"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/images/article-icon.png b/public/images/article-icon.png
diff --git a/public/images/clap-icon.png b/public/images/clap-icon.png
diff --git a/public/images/close-icon.png b/public/images/close-icon.png
diff --git a/public/images/comment-icon.png b/public/images/comment-icon.png
diff --git a/public/images/ellipsis.png b/public/images/ellipsis.png
diff --git a/public/images/event-icon.png b/public/images/event-icon.png
diff --git a/public/images/like-icon.png b/public/images/like-icon.png
diff --git a/public/images/linkedin.png b/public/images/linkedin.png
diff --git a/public/images/photo-icon.png b/public/images/photo-icon.png
diff --git a/public/images/search-icon.svg b/public/images/search-icon.svg
diff --git a/public/images/shared-comment.png b/public/images/shared-comment.png
diff --git a/public/images/shared-img.png b/public/images/shared-img.png
diff --git a/public/images/shared-vid.png b/public/images/shared-vid.png
diff --git a/public/images/spin-loading.gif b/public/images/spin-loading.gif
diff --git a/public/images/user.svg b/public/images/user.svg
diff --git a/public/images/video-icon.png b/public/images/video-icon.png
diff --git a/public/index.html b/public/index.html
@@ -10,34 +10,17 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/images/linkedin.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
+
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <!-- FA CSS -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css" rel="stylesheet">
+
+    <title>LinkedIn clone</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
 
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,3 @@
+* {
+    scroll-behavior: smooth;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,10 +1,17 @@
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
-import "./App.css";
-import Header from "./components/Header";
-import Home from "./components/Home";
-import Login from "./components/Login";
+import { connect } from 'react-redux';
+import { useEffect } from 'react';
+import { BrowserRouter as Router, Switch, Route} from 'react-router-dom';
+import './App.css';
+import Login from './components/Login';
+import Home from './components/Home';
+import Header from './components/Header';
+import { getUserAuth } from './actions';
+
+function App(props) {
+useEffect(() => {
+  props.getUserAuth();
+}, []);
 
-function App() {
   return (
     <div className="App">
       <Router>
@@ -22,4 +29,12 @@ function App() {
   );
 }
 
-export default App;
+const mapStateToProps = (state) => {
+  return {};
+};
+
+const mapDispatchToProps = (dispatch) => ({
+  getUserAuth: () => dispatch(getUserAuth()),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(App);
diff --git a/src/actions/actionType.js b/src/actions/actionType.js
@@ -0,0 +1,3 @@
+export const SET_USER = "SET_USER";
+export const SET_LOADING_STATUS = "SET_LOADING_STATUS";
+export const GET_ARTICLES = "GET_ARTICLES";
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -0,0 +1,117 @@
+import { auth, provider, storage } from '../firebase';
+import db from '../firebase';
+import { SET_USER, SET_LOADING_STATUS, GET_ARTICLES } from './actionType';
+
+export const setUser = (payload) => ({
+    type: SET_USER,
+    user: payload,
+}) 
+
+export const setLoading = (status) => ({
+    type: SET_LOADING_STATUS,
+    status : status,
+})
+
+export const getArticles = (payload) => ({
+    type: GET_ARTICLES,
+    payload: payload,
+})
+
+export function signInAPI() {
+    return (dispatch) => {
+        auth
+        .signInWithPopup(provider)
+        .then((payload) => {
+            dispatch(setUser(payload.user));
+        })
+        .catch((error) => alert(error.message));
+    };
+}
+
+export function getUserAuth() {
+    return (dispatch) => {
+        auth.onAuthStateChanged(async (user) => {
+            if(user) {
+                dispatch(setUser(user));
+            }
+        })
+    }
+}
+
+export function signOutAPI() {
+    return(dispatch) => {
+        auth
+        .signOut()
+        .then(() => {
+            dispatch(setUser(null));
+        })
+        .catch((error) => {
+            console.log(error.message);
+        });
+    };
+}
+
+export function postArticleAPI(payload) {
+    return (dispatch) => {
+        dispatch(setLoading(true));
+
+        if(payload.image != '') {
+            const upload = storage
+                .ref(`images/${payload.image.name}`)
+                .put(payload.image);
+            upload.on('state-changed', (snapshot) => {
+                const progress = 
+                    (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
+
+            console.log(`Progress: ${progress}%`);
+            if(snapshot.state === 'RUNNING') {
+                console.log(`Progress: ${progress}%`);
+            }
+        }, error => console.log(error.code),
+        async () => {
+            const downloadURL = await upload.snapshot.ref.getDownloadURL();
+            db.collection("articles").add({
+                actor: {
+                    description: payload.user.email,
+                    title: payload.user.displayName,
+                    date: payload.timestamp,
+                    image: payload.user.photoURL
+                },
+                video: payload.video,
+                sharedImg: downloadURL,
+                comments: 0,
+                description: payload.description,
+            });
+            dispatch(setLoading(false));
+        });
+    }
+    else if(payload.video) {
+        db.collection('articles').add({
+            actor: {
+                description: payload.user.email,
+                title: payload.user.displayName,
+                date: payload.timestamp,
+                image: payload.user.photoURL,
+            },
+            video: payload.video,
+            sharedImg: '',
+            comments: 0,
+            description: payload.description,
+        });
+        dispatch(setLoading(false));
+    }
+};
+}
+
+export function getArticlesAPI() {
+    return (dispatch) => {
+        let payload;
+
+        db.collection('articles')
+            .orderBy("actor.date", "desc")
+            .onSnapshot((snapshot) => {
+                payload = snapshot.docs.map((doc) => doc.data());
+                dispatch(getArticles(payload));
+        });
+    };
+}