major changes

Billions94 · Nov 17, 2021 · 442ed66 · 442ed66
1 parent 917fd9b
commit 442ed66
Show file tree

Hide file tree

Showing 31 changed files with 3,725 additions and 20 deletions.
diff --git a/.gitignore b/.gitignore
@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,13 +3,25 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.6.0",
+    "@emotion/styled": "^11.6.0",
+    "@mui/icons-material": "^5.0.3",
+    "@mui/lab": "^5.0.0-alpha.55",
+    "@mui/material": "^5.1.1",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "bootstrap": "^4.6.0",
+    "date-fns": "^2.25.0",
+    "formik": "^2.2.9",
+    "moment": "^2.29.1",
     "react": "^17.0.2",
+    "react-bootstrap": "^1.6.4",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
-    "web-vitals": "^1.1.2"
+    "web-vitals": "^1.1.2",
+    "yup": "^0.32.11"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href='https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/LinkedIn_logo_initials.png/600px-LinkedIn_logo_initials.png'  />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,7 +24,7 @@
       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>
+    <title>LinkedIn</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
@@ -1,5 +1,8 @@
+@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");
+
 .App {
   text-align: center;
+  background-color: rgb(243, 242, 239);
 }
 
 .App-logo {

diff --git a/src/App.js b/src/App.js
@@ -1,23 +1,31 @@
-import logo from './logo.svg';
-import './App.css';
+import "bootstrap/dist/css/bootstrap.min.css";
+import "./App.css";
+import { BrowserRouter as Router, Route, Link } from "react-router-dom";
+import NavBar from "./components/Navbar/NavBar";
+import MyProfile from "./components/Profiles/MyProfile/Profile";
+import MyFooter from "./components/Footer/MyFooter";
+// import Home from "./Components/MyFeed/Home";
+import {useState, useEffect} from "react"
 
 function App() {
+
+    const [currentUser, setCurrentUser] = useState({})
+
+
+    useEffect(() => {
+      console.log(`i am the currentUser`,currentUser)
+    },[currentUser])
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <Router>
+      <NavBar currentUser={currentUser} />
+      {/* <Route path="/home" exact component={Home} /> */}
+
+      <Route path="/profile/:id" exact render={(props) => <MyProfile {...props} setCurrentUser={setCurrentUser} />} />
+
+      <MyFooter />
+    </Router>
     </div>
   );
 }

diff --git a/src/Lib/index.js b/src/Lib/index.js
@@ -0,0 +1,28 @@
+const { REACT_APP_TOKEN, REACT_APP_ME } = process.env;
+
+export const token = REACT_APP_TOKEN;
+export const me = REACT_APP_ME;
+
+export const postTimer = (x) => {
+  const postedDateISO = x;
+  const postedDate = new Date(postedDateISO).getTime();
+  const dateToday = new Date().getTime();
+  const milliseconds = Math.abs(dateToday - postedDate).toString();
+
+  const minutes = parseInt(milliseconds / 1000 / 60);
+  const hours = parseInt(minutes / 60);
+  const days = parseInt(hours / 24);
+  const weeks = parseInt(days / 7);
+  let date;
+
+  if (weeks > 0) {
+    date = `${weeks}w`;
+  } else if (days > 0) {
+    date = `${days}d`;
+  } else if (days == 0 && hours >= 1) {
+    date = `${hours}hr`;
+  } else if (hours < 1) {
+    date = `${minutes}min`;
+  }
+  return date;
+};