Steps, code and images to make this project work

package.json

@@ -3,15 +3,21 @@
   "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.16.2",
+    "@testing-library/react": "^12.1.3",
+    "@testing-library/user-event": "^13.5.0",
+    "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"
+    "react-scripts": "^4.0.3",
+    "redux": "^4.1.0",
+    "redux-thunk": "^2.3.0",
+    "styled-components": "^5.3.0",
+    "web-vitals": "^1.1.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -0,0 +1,3 @@
+* {
+    scroll-behavior: smooth;
+}

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);

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";

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));
+        });
+    };
+}