├── client ├── build │ ├── _redirects │ ├── assets │ │ ├── ad.png │ │ ├── gift.png │ │ ├── like.png │ │ └── heart.png │ ├── favicon.ico │ ├── static │ │ ├── media │ │ │ ├── ad.833b6750.png │ │ │ ├── gift.4a9c4d62.png │ │ │ ├── like.be1d10c9.png │ │ │ └── heart.d03a6207.png │ │ └── js │ │ │ ├── runtime-main.900dd88b.js │ │ │ ├── 2.87b51020.chunk.js.LICENSE.txt │ │ │ ├── 2.efe0c240.chunk.js.LICENSE.txt │ │ │ ├── runtime-main.900dd88b.js.map │ │ │ ├── main.0a0cd988.chunk.js │ │ │ └── main.1c60124a.chunk.js │ ├── asset-manifest.json │ └── index.html ├── public │ ├── _redirects │ ├── favicon.ico │ ├── assets │ │ ├── ad.png │ │ ├── gift.png │ │ ├── heart.png │ │ ├── like.png │ │ ├── post │ │ │ ├── 1.jpeg │ │ │ ├── 10.jpeg │ │ │ ├── 2.jpeg │ │ │ ├── 3.jpeg │ │ │ ├── 4.jpeg │ │ │ ├── 5.jpeg │ │ │ ├── 6.jpeg │ │ │ ├── 7.jpeg │ │ │ ├── 8.jpeg │ │ │ └── 9.jpeg │ │ └── person │ │ │ ├── 1.jpeg │ │ │ ├── 10.jpeg │ │ │ ├── 2.jpeg │ │ │ ├── 3.jpeg │ │ │ ├── 4.jpeg │ │ │ ├── 5.jpeg │ │ │ ├── 6.jpeg │ │ │ ├── 7.jpeg │ │ │ ├── 8.jpeg │ │ │ └── 9.jpeg │ └── index.html ├── src │ ├── assets │ │ ├── ad.png │ │ ├── gift.png │ │ ├── like.png │ │ ├── heart.png │ │ ├── person │ │ │ ├── 1.jpeg │ │ │ ├── 2.jpeg │ │ │ ├── 3.jpeg │ │ │ ├── 4.jpeg │ │ │ ├── 5.jpeg │ │ │ ├── 6.jpeg │ │ │ ├── 7.jpeg │ │ │ ├── 8.jpeg │ │ │ ├── 9.jpeg │ │ │ └── 10.jpeg │ │ └── post │ │ │ ├── 1.jpeg │ │ │ ├── 10.jpeg │ │ │ ├── 2.jpeg │ │ │ ├── 3.jpeg │ │ │ ├── 4.jpeg │ │ │ ├── 5.jpeg │ │ │ ├── 6.jpeg │ │ │ ├── 7.jpeg │ │ │ ├── 8.jpeg │ │ │ └── 9.jpeg │ ├── history.js │ ├── pages │ │ ├── HomePage │ │ │ ├── HomePage.styles.jsx │ │ │ └── index.jsx │ │ ├── UserPage │ │ │ ├── UserPage.styles.jsx │ │ │ └── index.jsx │ │ ├── Register │ │ │ ├── Register.styles.jsx │ │ │ └── index.jsx │ │ └── Login │ │ │ ├── Login.styles.jsx │ │ │ └── index.jsx │ ├── requestMethods.js │ ├── components │ │ ├── LeftContainerFriends │ │ │ ├── index.jsx │ │ │ └── LeftContainerFriends.styles.jsx │ │ ├── LeftContainer │ │ │ ├── LeftContainer.styles.jsx │ │ │ └── index.jsx │ │ ├── Navbar │ │ │ ├── Navbar.styles.jsx │ │ │ └── index.jsx │ │ ├── Post │ │ │ ├── Post.styles.jsx │ │ │ └── index.jsx │ │ ├── CenterContainer │ │ │ ├── CenterContainer.styles.jsx │ │ │ └── index.jsx │ │ └── RightContainer │ │ │ ├── RightContainer.styles.jsx │ │ │ └── index.jsx │ ├── index.js │ ├── firebase.js │ ├── redux │ │ ├── apiCalls.js │ │ ├── store.js │ │ └── userRedux.js │ ├── App.jsx │ └── dummyData.js ├── package.json └── README.md ├── backend ├── models │ ├── Post.js │ └── User.js ├── package.json ├── index.js └── routes │ ├── auth.js │ ├── posts.js │ └── users.js └── README.md /client/build/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /client/public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /client/build/assets/ad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/build/assets/ad.png -------------------------------------------------------------------------------- /client/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/build/favicon.ico -------------------------------------------------------------------------------- /client/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/favicon.ico -------------------------------------------------------------------------------- /client/src/assets/ad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/src/assets/ad.png -------------------------------------------------------------------------------- /client/src/assets/gift.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/src/assets/gift.png -------------------------------------------------------------------------------- /client/src/assets/like.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/src/assets/like.png -------------------------------------------------------------------------------- /client/build/assets/gift.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/build/assets/gift.png -------------------------------------------------------------------------------- /client/build/assets/like.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/build/assets/like.png -------------------------------------------------------------------------------- /client/public/assets/ad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/assets/ad.png -------------------------------------------------------------------------------- /client/src/assets/heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/src/assets/heart.png -------------------------------------------------------------------------------- /client/build/assets/heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/build/assets/heart.png -------------------------------------------------------------------------------- /client/public/assets/gift.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/assets/gift.png -------------------------------------------------------------------------------- /client/public/assets/heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/assets/heart.png -------------------------------------------------------------------------------- /client/public/assets/like.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/assets/like.png -------------------------------------------------------------------------------- /client/src/assets/person/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/src/assets/person/1.jpeg -------------------------------------------------------------------------------- /client/src/assets/person/2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/src/assets/person/2.jpeg -------------------------------------------------------------------------------- /client/src/assets/person/3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/src/assets/person/3.jpeg -------------------------------------------------------------------------------- /client/src/assets/person/4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/src/assets/person/4.jpeg -------------------------------------------------------------------------------- /client/src/assets/person/5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/src/assets/person/5.jpeg -------------------------------------------------------------------------------- /client/src/assets/person/6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/src/assets/person/6.jpeg -------------------------------------------------------------------------------- /client/src/assets/person/7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/src/assets/person/7.jpeg -------------------------------------------------------------------------------- /client/src/assets/person/8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/src/assets/person/8.jpeg -------------------------------------------------------------------------------- /client/src/assets/person/9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/src/assets/person/9.jpeg -------------------------------------------------------------------------------- /client/src/assets/post/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/src/assets/post/1.jpeg -------------------------------------------------------------------------------- /client/src/assets/post/10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/src/assets/post/10.jpeg -------------------------------------------------------------------------------- /client/src/assets/post/2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/src/assets/post/2.jpeg -------------------------------------------------------------------------------- /client/src/assets/post/3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/src/assets/post/3.jpeg -------------------------------------------------------------------------------- /client/src/assets/post/4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/src/assets/post/4.jpeg -------------------------------------------------------------------------------- /client/src/assets/post/5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/src/assets/post/5.jpeg -------------------------------------------------------------------------------- /client/src/assets/post/6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/src/assets/post/6.jpeg -------------------------------------------------------------------------------- /client/src/assets/post/7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/src/assets/post/7.jpeg -------------------------------------------------------------------------------- /client/src/assets/post/8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/src/assets/post/8.jpeg -------------------------------------------------------------------------------- /client/src/assets/post/9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/src/assets/post/9.jpeg -------------------------------------------------------------------------------- /client/src/history.js: -------------------------------------------------------------------------------- 1 | import { createBrowserHistory } from "history"; 2 | 3 | export default createBrowserHistory(); 4 | -------------------------------------------------------------------------------- /client/public/assets/post/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/assets/post/1.jpeg -------------------------------------------------------------------------------- /client/public/assets/post/10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/assets/post/10.jpeg -------------------------------------------------------------------------------- /client/public/assets/post/2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/assets/post/2.jpeg -------------------------------------------------------------------------------- /client/public/assets/post/3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/assets/post/3.jpeg -------------------------------------------------------------------------------- /client/public/assets/post/4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/assets/post/4.jpeg -------------------------------------------------------------------------------- /client/public/assets/post/5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/assets/post/5.jpeg -------------------------------------------------------------------------------- /client/public/assets/post/6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/assets/post/6.jpeg -------------------------------------------------------------------------------- /client/public/assets/post/7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/assets/post/7.jpeg -------------------------------------------------------------------------------- /client/public/assets/post/8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/assets/post/8.jpeg -------------------------------------------------------------------------------- /client/public/assets/post/9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/assets/post/9.jpeg -------------------------------------------------------------------------------- /client/src/assets/person/10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/src/assets/person/10.jpeg -------------------------------------------------------------------------------- /client/public/assets/person/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/assets/person/1.jpeg -------------------------------------------------------------------------------- /client/public/assets/person/10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/assets/person/10.jpeg -------------------------------------------------------------------------------- /client/public/assets/person/2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/assets/person/2.jpeg -------------------------------------------------------------------------------- /client/public/assets/person/3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/assets/person/3.jpeg -------------------------------------------------------------------------------- /client/public/assets/person/4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/assets/person/4.jpeg -------------------------------------------------------------------------------- /client/public/assets/person/5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/assets/person/5.jpeg -------------------------------------------------------------------------------- /client/public/assets/person/6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/assets/person/6.jpeg -------------------------------------------------------------------------------- /client/public/assets/person/7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/assets/person/7.jpeg -------------------------------------------------------------------------------- /client/public/assets/person/8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/assets/person/8.jpeg -------------------------------------------------------------------------------- /client/public/assets/person/9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/public/assets/person/9.jpeg -------------------------------------------------------------------------------- /client/build/static/media/ad.833b6750.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/build/static/media/ad.833b6750.png -------------------------------------------------------------------------------- /client/build/static/media/gift.4a9c4d62.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/build/static/media/gift.4a9c4d62.png -------------------------------------------------------------------------------- /client/build/static/media/like.be1d10c9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/build/static/media/like.be1d10c9.png -------------------------------------------------------------------------------- /client/build/static/media/heart.d03a6207.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EienMosu/MERN-Social-Media-App/HEAD/client/build/static/media/heart.d03a6207.png -------------------------------------------------------------------------------- /client/src/pages/HomePage/HomePage.styles.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const MainContainer = styled.div` 4 | display: flex; 5 | background-color: #eeeeee; 6 | `; 7 | -------------------------------------------------------------------------------- /client/src/requestMethods.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | const BASE_URL = "https://social-media-mern-applications.herokuapp.com/api/"; 4 | 5 | export const publicRequest = axios.create({ 6 | baseURL: BASE_URL, 7 | }); 8 | 9 | export const userRequest = axios.create({ 10 | baseURL: BASE_URL, 11 | }); 12 | -------------------------------------------------------------------------------- /backend/models/Post.js: -------------------------------------------------------------------------------- 1 | const mongoose = require("mongoose"); 2 | 3 | const PostSchema = new mongoose.Schema( 4 | { 5 | userId: { type: String, required: true }, 6 | desc: { type: String, max: 500 }, 7 | img: { type: String }, 8 | likes: { type: Array, default: [] }, 9 | }, 10 | { timestamps: true } 11 | ); 12 | 13 | module.exports = mongoose.model("Post", PostSchema); -------------------------------------------------------------------------------- /client/src/components/LeftContainerFriends/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container, Image, Online, Span } from "./LeftContainerFriends.styles"; 3 | 4 | const LeftContainerFriends = ({ name, image, online }) => { 5 | return ( 6 | 7 | 8 | {name} 9 | {online === "online" && } 10 | 11 | ); 12 | }; 13 | 14 | export default LeftContainerFriends; 15 | -------------------------------------------------------------------------------- /client/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./App"; 4 | // Redux 5 | import { persistor, store } from "./redux/store"; 6 | import { Provider } from "react-redux"; 7 | import { PersistGate } from "redux-persist/integration/react"; 8 | 9 | ReactDOM.render( 10 | 11 | 12 | 13 | 14 | , 15 | document.getElementById("root") 16 | ); 17 | -------------------------------------------------------------------------------- /backend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "backend", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "nodemon index.js" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "cors": "^2.8.5", 14 | "crypto-js": "^4.1.1", 15 | "dotenv": "^10.0.0", 16 | "express": "^4.17.1", 17 | "helmet": "^4.6.0", 18 | "mongoose": "^6.0.14", 19 | "morgan": "^1.10.0", 20 | "nodemon": "^2.0.15" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # MERN-Social-Media-App 2 | ### Demo: https://lnkd.in/g5M8XA6M 3 | 4 | ## Frontend Tech Stack; 5 | - React 6 | - React Router 7 | - Redux 8 | - Redux-Persist 9 | - Firebase 10 | - Material UI Icons 11 | - Custom History 12 | - Axios 13 | - Timeago.js 14 | - Styled Components 15 | 16 | ## Backend Tech Stack 17 | - Node 18 | - Express 19 | - MongoDB 20 | - Crypto-js 21 | - Cors 22 | - Morgan 23 | - Helmet 24 | - Nodemon 25 | - Dotenv 26 | 27 | ### PS: I will add to project new features with Notification system and Messenger with using socket.io! 28 | -------------------------------------------------------------------------------- /client/src/pages/HomePage/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // Components 3 | import CenterContainer from "../../components/CenterContainer"; 4 | import LeftContainer from "../../components/LeftContainer"; 5 | import Navbar from "../../components/Navbar"; 6 | import RightContainer from "../../components/RightContainer"; 7 | // Styled Components 8 | import { MainContainer } from "./HomePage.styles"; 9 | 10 | const HomePage = () => { 11 | return ( 12 | <> 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | }; 22 | 23 | export default HomePage; 24 | -------------------------------------------------------------------------------- /client/src/firebase.js: -------------------------------------------------------------------------------- 1 | // Import the functions you need from the SDKs you need 2 | import { initializeApp } from "firebase/app"; 3 | // TODO: Add SDKs for Firebase products that you want to use 4 | // https://firebase.google.com/docs/web/setup#available-libraries 5 | 6 | // Your web app's Firebase configuration 7 | const firebaseConfig = { 8 | apiKey: "AIzaSyCOvTYeicrCgrs52TV-ApqesUAGeWf-V2A", 9 | authDomain: "shop-e412d.firebaseapp.com", 10 | projectId: "shop-e412d", 11 | storageBucket: "shop-e412d.appspot.com", 12 | messagingSenderId: "379033798897", 13 | appId: "1:379033798897:web:195de3b1bb5485100dc150", 14 | }; 15 | 16 | // Initialize Firebase 17 | const app = initializeApp(firebaseConfig); 18 | 19 | export default app; -------------------------------------------------------------------------------- /client/src/components/LeftContainerFriends/LeftContainerFriends.styles.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Container = styled.div` 4 | height: 50px; 5 | width: 100%; 6 | display: flex; 7 | align-items: center; 8 | position: relative; 9 | cursor: pointer; 10 | margin-bottom: 5px; 11 | `; 12 | 13 | export const Image = styled.img` 14 | width: 40px; 15 | height: 40px; 16 | border-radius: 50%; 17 | margin-right: 10px; 18 | object-fit: cover; 19 | `; 20 | 21 | export const Span = styled.span` 22 | font-size: 18px; 23 | `; 24 | 25 | export const Online = styled.div` 26 | position: absolute; 27 | background-color: #00b600; 28 | width: 12px; 29 | height: 12px; 30 | border: 0.3px solid white; 31 | border-radius: 50%; 32 | left: 27px; 33 | top: 2px; 34 | `; 35 | -------------------------------------------------------------------------------- /client/src/redux/apiCalls.js: -------------------------------------------------------------------------------- 1 | import { publicRequest } from "../requestMethods"; 2 | import { 3 | loginFailure, 4 | loginStart, 5 | loginSuccess, 6 | registerFailure, 7 | registerStart, 8 | registerSuccess, 9 | } from "./userRedux"; 10 | 11 | export const login = async (dispatch, user) => { 12 | dispatch(loginStart()); 13 | 14 | try { 15 | const response = await publicRequest.post("/auth/login", user); 16 | 17 | dispatch(loginSuccess(response.data)); 18 | } catch (err) { 19 | dispatch(loginFailure()); 20 | } 21 | }; 22 | 23 | export const register = async (dispatch, user) => { 24 | dispatch(registerStart()); 25 | 26 | try { 27 | const response = await publicRequest.post("/auth/register", user); 28 | 29 | dispatch(registerSuccess(response.data)); 30 | } catch (err) { 31 | dispatch(registerFailure()); 32 | } 33 | }; 34 | -------------------------------------------------------------------------------- /client/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 16 | 23 | React Social Media App 24 | 25 | 26 | 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /backend/index.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const mongoose = require("mongoose"); 3 | const dotenv = require("dotenv"); 4 | const morgan = require("morgan"); 5 | const helmet = require("helmet"); 6 | const cors = require("cors"); 7 | //routes 8 | const usersRoute = require("./routes/users"); 9 | const authRoute = require("./routes/auth"); 10 | const postsRoute = require("./routes/posts"); 11 | 12 | dotenv.config(); 13 | const app = express(); 14 | 15 | mongoose 16 | .connect(process.env.MONGO_URL, { useNewUrlParser: true }) 17 | .then(() => { 18 | console.log("DB is Connected!"); 19 | }) 20 | .catch((err) => { 21 | console.log(err); 22 | }); 23 | 24 | app.use(cors()); 25 | app.use(express.json()); 26 | app.use(helmet()); 27 | app.use(morgan("common")); 28 | 29 | app.use("/api/auth", authRoute); 30 | app.use("/api/users", usersRoute); 31 | app.use("/api/posts", postsRoute); 32 | 33 | app.listen(process.env.PORT || 5000, () => { 34 | console.log("Server is alive at port:" + process.env.PORT); 35 | }); 36 | -------------------------------------------------------------------------------- /client/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.js": "/static/js/main.1c60124a.chunk.js", 4 | "main.js.map": "/static/js/main.1c60124a.chunk.js.map", 5 | "runtime-main.js": "/static/js/runtime-main.900dd88b.js", 6 | "runtime-main.js.map": "/static/js/runtime-main.900dd88b.js.map", 7 | "static/js/2.efe0c240.chunk.js": "/static/js/2.efe0c240.chunk.js", 8 | "static/js/2.efe0c240.chunk.js.map": "/static/js/2.efe0c240.chunk.js.map", 9 | "index.html": "/index.html", 10 | "static/js/2.efe0c240.chunk.js.LICENSE.txt": "/static/js/2.efe0c240.chunk.js.LICENSE.txt", 11 | "static/media/ad.833b6750.png": "/static/media/ad.833b6750.png", 12 | "static/media/gift.4a9c4d62.png": "/static/media/gift.4a9c4d62.png", 13 | "static/media/heart.d03a6207.png": "/static/media/heart.d03a6207.png", 14 | "static/media/like.be1d10c9.png": "/static/media/like.be1d10c9.png" 15 | }, 16 | "entrypoints": [ 17 | "static/js/runtime-main.900dd88b.js", 18 | "static/js/2.efe0c240.chunk.js", 19 | "static/js/main.1c60124a.chunk.js" 20 | ] 21 | } -------------------------------------------------------------------------------- /client/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // Redux 3 | import { useSelector } from "react-redux"; 4 | // React Router 5 | import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"; 6 | // Pages 7 | import HomePage from "./pages/HomePage"; 8 | import Login from "./pages/Login"; 9 | import Register from "./pages/Register"; 10 | import UserPage from "./pages/UserPage"; 11 | 12 | const App = () => { 13 | const user = useSelector((state) => state.user.currentUser); 14 | 15 | return ( 16 | 17 | <> 18 | 19 | : } 22 | /> 23 | : } 26 | /> 27 | } /> 28 | } /> 29 | 30 | 31 | 32 | ); 33 | }; 34 | 35 | export default App; 36 | -------------------------------------------------------------------------------- /client/src/redux/store.js: -------------------------------------------------------------------------------- 1 | import {configureStore, combineReducers} from "@reduxjs/toolkit" 2 | import userReducer from "./userRedux" 3 | import { 4 | persistStore, 5 | persistReducer, 6 | FLUSH, 7 | REHYDRATE, 8 | PAUSE, 9 | PERSIST, 10 | PURGE, 11 | REGISTER, 12 | } from "redux-persist"; 13 | import storage from "redux-persist/lib/storage"; 14 | 15 | const persistConfig = { 16 | key: "root", 17 | version: 1, 18 | storage, 19 | }; 20 | 21 | const rootReducer = combineReducers({ user: userReducer}); 22 | 23 | const persistedReducer = persistReducer(persistConfig, rootReducer); 24 | 25 | export const store = configureStore({ 26 | reducer: persistedReducer, 27 | middleware: (getDefaultMiddleware) => 28 | getDefaultMiddleware({ 29 | serializableCheck: { 30 | ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], 31 | }, 32 | }), 33 | }); 34 | 35 | export let persistor = persistStore(store); 36 | 37 | // Clean persistor 38 | // persistor.purge() -------------------------------------------------------------------------------- /backend/models/User.js: -------------------------------------------------------------------------------- 1 | const mongoose = require("mongoose"); 2 | 3 | const UserSchema = new mongoose.Schema( 4 | { 5 | username: { type: String, required: true, unique: true, min: 3, max: 20 }, 6 | email: { type: String, required: true, unique: true }, 7 | password: { type: String, required: true, min: 6 }, 8 | profilePicture: { 9 | type: String, 10 | default: 11 | "https://apsec.iafor.org/wp-content/uploads/sites/37/2017/02/IAFOR-Blank-Avatar-Image.jpg", 12 | }, 13 | coverPicture: { 14 | type: String, 15 | default: 16 | "https://htmlcolorcodes.com/assets/images/colors/baby-blue-color-solid-background-1920x1080.png", 17 | }, 18 | followers: { 19 | type: Array, 20 | default: [], 21 | }, 22 | followings: { type: Array, default: [] }, 23 | isAdmin: { type: Boolean, default: false }, 24 | desc: { type: String, max: 50, default: "" }, 25 | city: { type: String, max: 50, default: "" }, 26 | from: { type: String, max: 50, default: "" }, 27 | relationShip: { type: String, default: "Single" }, 28 | }, 29 | { 30 | timestamps: true, 31 | } 32 | ); 33 | 34 | module.exports = mongoose.model("User", UserSchema); 35 | -------------------------------------------------------------------------------- /client/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "client", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@material-ui/core": "^4.12.3", 7 | "@material-ui/icons": "^4.11.2", 8 | "@reduxjs/toolkit": "^1.6.2", 9 | "@testing-library/jest-dom": "^5.11.4", 10 | "@testing-library/react": "^11.1.0", 11 | "@testing-library/user-event": "^12.1.10", 12 | "axios": "^0.24.0", 13 | "firebase": "^9.6.1", 14 | "history": "^5.1.0", 15 | "react": "^17.0.2", 16 | "react-dom": "^17.0.2", 17 | "react-redux": "^7.2.6", 18 | "react-router-dom": "^6.0.2", 19 | "react-scripts": "4.0.3", 20 | "redux-persist": "^6.0.0", 21 | "styled-components": "^5.3.3", 22 | "timeago.js": "^4.0.2", 23 | "web-vitals": "^1.0.1" 24 | }, 25 | "scripts": { 26 | "start": "react-scripts start", 27 | "build": "react-scripts build", 28 | "test": "react-scripts test", 29 | "eject": "react-scripts eject" 30 | }, 31 | "eslintConfig": { 32 | "extends": [ 33 | "react-app", 34 | "react-app/jest" 35 | ] 36 | }, 37 | "browserslist": { 38 | "production": [ 39 | ">0.2%", 40 | "not dead", 41 | "not op_mini all" 42 | ], 43 | "development": [ 44 | "last 1 chrome version", 45 | "last 1 firefox version", 46 | "last 1 safari version" 47 | ] 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /backend/routes/auth.js: -------------------------------------------------------------------------------- 1 | const router = require("express").Router(); 2 | const User = require("../models/User"); 3 | const dotenv = require("dotenv"); 4 | const CryptoJS = require("crypto-js"); 5 | dotenv.config(); 6 | 7 | // Register 8 | router.post("/register", async (req, res) => { 9 | const newUser = new User({ 10 | username: req.body.username, 11 | email: req.body.email, 12 | password: CryptoJS.AES.encrypt( 13 | req.body.password, 14 | process.env.PASS_SEC 15 | ).toString(), 16 | }); 17 | 18 | try { 19 | const savedUser = await newUser.save(); 20 | res.status(200).json(savedUser); 21 | } catch (err) { 22 | res.status(500).json(err); 23 | } 24 | }); 25 | 26 | // Login 27 | router.post("/login", async (req, res) => { 28 | try { 29 | const user = await User.findOne({ username: req.body.username }); 30 | if (!user) { 31 | return res.status(400).json("Wrong Cridentials!"); 32 | } 33 | 34 | const hashedPassword = CryptoJS.AES.decrypt( 35 | user.password, 36 | process.env.PASS_SEC 37 | ); 38 | 39 | const purePassword = hashedPassword.toString(CryptoJS.enc.Utf8); 40 | 41 | if (req.body.password !== purePassword) { 42 | return res.status(401).json("Wrong Cridentials!"); 43 | } 44 | 45 | const { password, ...others } = user._doc; 46 | 47 | res.status(200).json(others); 48 | } catch (err) { 49 | res.status(500).json(err); 50 | } 51 | }); 52 | 53 | module.exports = router; -------------------------------------------------------------------------------- /client/build/static/js/runtime-main.900dd88b.js: -------------------------------------------------------------------------------- 1 | !function(e){function t(t){for(var n,l,i=t[0],f=t[1],a=t[2],p=0,s=[];p { 13 | state.isFetching = true; 14 | }, 15 | loginSuccess: (state, action) => { 16 | state.isFetching = false; 17 | state.error = false; 18 | state.currentUser = action.payload; 19 | 20 | history.push("/"); 21 | history.go(0); 22 | }, 23 | loginFailure: (state) => { 24 | state.isFetching = false; 25 | state.error = true; 26 | }, 27 | logout: (state) => { 28 | state.currentUser = null; 29 | state.error = false; 30 | }, 31 | registerStart: (state) => { 32 | state.isFetching = true; 33 | }, 34 | registerSuccess: (state, action) => { 35 | state.isFetching = false; 36 | state.currentUser = action.payload; 37 | state.error = false; 38 | 39 | history.push("/"); 40 | history.go(0); 41 | }, 42 | registerFailure: (state) => { 43 | state.isFetching = false; 44 | state.error = true; 45 | }, 46 | }, 47 | }); 48 | 49 | export const { 50 | loginStart, 51 | loginSuccess, 52 | loginFailure, 53 | logout, 54 | registerStart, 55 | registerSuccess, 56 | registerFailure, 57 | } = userSlice.actions; 58 | 59 | export default userSlice.reducer; 60 | -------------------------------------------------------------------------------- /client/src/pages/UserPage/UserPage.styles.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Container = styled.div` 4 | display: flex; 5 | background-color: #eeeeee; 6 | `; 7 | 8 | export const UserContainer = styled.div` 9 | display: flex; 10 | flex-direction: column; 11 | position: relative; 12 | `; 13 | 14 | export const CoverPhoto = styled.img` 15 | width: 100%; 16 | height: 300px; 17 | object-fit: cover; 18 | cursor: pointer; 19 | `; 20 | 21 | export const ProfilePicture = styled.img` 22 | width: 250px; 23 | height: 250px; 24 | border-radius: 50%; 25 | border: 3px solid white; 26 | object-fit: cover; 27 | position: absolute; 28 | left: 0; 29 | right: 0; 30 | top: 150px; 31 | margin: auto; 32 | cursor: pointer; 33 | `; 34 | 35 | export const UserInfoContainer = styled.div` 36 | display: flex; 37 | flex-direction: column; 38 | align-items: center; 39 | justify-content: center; 40 | margin-top: 110px; 41 | margin-bottom: 15px; 42 | `; 43 | 44 | export const Username = styled.h3` 45 | font-size: 40px; 46 | `; 47 | 48 | export const SubmitButton = styled.button` 49 | background-color: blue; 50 | color: white; 51 | width: 150px; 52 | padding: 5px; 53 | border: none; 54 | border-radius: 5px; 55 | font-size: 18px; 56 | font-weight: 400; 57 | margin: 5px; 58 | cursor: pointer; 59 | `; 60 | 61 | export const UserMessage = styled.span` 62 | font-size: 24px; 63 | font-weight: 300; 64 | `; 65 | 66 | export const RightPageContainer = styled.div` 67 | flex: 4; 68 | `; 69 | 70 | export const BottomContainer = styled.div` 71 | display: flex; 72 | `; 73 | -------------------------------------------------------------------------------- /client/src/components/LeftContainer/LeftContainer.styles.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Container = styled.div` 4 | flex: 1; 5 | height: calc(100vh - 70px); 6 | top: 50px; 7 | position: sticky; 8 | overflow-y: scroll; 9 | width: 300px; 10 | z-index: 998; 11 | 12 | ::-webkit-scrollbar { 13 | width: 5px; 14 | } 15 | ::-webkit-scrollbar-track { 16 | background-color: #f1f1f1; 17 | } 18 | ::-webkit-scrollbar-thumb { 19 | background-color: rgb(179, 179, 179); 20 | } 21 | `; 22 | 23 | export const TopContainer = styled.div` 24 | margin-top: 20px; 25 | margin-left: 20px; 26 | `; 27 | 28 | export const List = styled.ul` 29 | list-style: none; 30 | `; 31 | 32 | export const ListItem = styled.li` 33 | margin-bottom: 20px; 34 | display: flex; 35 | cursor: pointer; 36 | height: 27px; 37 | 38 | &:hover { 39 | background-color: #d6d6d6; 40 | border-radius: 5px; 41 | } 42 | `; 43 | 44 | export const Span = styled.div` 45 | font-size: 20px; 46 | margin-left: 10px; 47 | `; 48 | 49 | export const ShowMore = styled.button` 50 | border: none; 51 | border-radius: 5px; 52 | background-color: #d4d4d4; 53 | font-size: 16px; 54 | font-weight: 500; 55 | width: 120px; 56 | height: 40px; 57 | cursor: pointer; 58 | `; 59 | 60 | export const CenterContainer = styled.div` 61 | display: flex; 62 | align-items: center; 63 | height: 50px; 64 | margin-left: 20px; 65 | `; 66 | 67 | export const Line = styled.div` 68 | width: 90%; 69 | height: 0.5px; 70 | background-color: black; 71 | `; 72 | 73 | export const BottomContainer = styled.div` 74 | margin-left: 20px; 75 | `; 76 | -------------------------------------------------------------------------------- /client/src/components/Navbar/Navbar.styles.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Container = styled.div` 4 | height: 50px; 5 | width: 100%; 6 | background-color: #4267b2; 7 | display: flex; 8 | align-items: center; 9 | position: sticky; 10 | top: 0; 11 | z-index: 999; 12 | `; 13 | 14 | export const Left = styled.div` 15 | flex: 1; 16 | margin-left: 20px; 17 | `; 18 | 19 | export const Logo = styled.h1` 20 | font-size: 24px; 21 | color: white; 22 | cursor: pointer; 23 | width: max-content; 24 | `; 25 | 26 | export const Center = styled.div` 27 | flex: 2; 28 | display: flex; 29 | align-items: center; 30 | `; 31 | 32 | export const SearchBar = styled.div` 33 | padding: 0 10px; 34 | align-items: center; 35 | border-radius: 30px; 36 | width: 70%; 37 | height: 30px; 38 | background-color: white; 39 | display: flex; 40 | `; 41 | 42 | export const SearchInput = styled.input` 43 | width: 90%; 44 | border: none; 45 | outline: none; 46 | margin-left: 10px; 47 | font-size: 16px; 48 | `; 49 | 50 | export const Span = styled.span` 51 | color: white; 52 | margin-left: 15px; 53 | font-size: 17px; 54 | cursor: pointer; 55 | `; 56 | 57 | export const Right = styled.div` 58 | flex: 0.5; 59 | margin-right: 20px; 60 | display: flex; 61 | align-items: center; 62 | `; 63 | 64 | export const ListItem = styled.div` 65 | color: white; 66 | font-size: 40px; 67 | cursor: pointer; 68 | margin-right: 10px; 69 | position: relative; 70 | `; 71 | 72 | export const PersonNotification = styled.div` 73 | position: absolute; 74 | top: 5px; 75 | right: -4px; 76 | display: flex; 77 | align-items: center; 78 | justify-content: center; 79 | font-size: 12px; 80 | width: 15px; 81 | height: 15px; 82 | background-color: crimson; 83 | border-radius: 50%; 84 | `; 85 | 86 | export const Profile = styled.img` 87 | width: 40px; 88 | height: 40px; 89 | border-radius: 50%; 90 | object-fit: cover; 91 | margin-left: 50px; 92 | cursor: pointer; 93 | `; 94 | -------------------------------------------------------------------------------- /client/src/pages/Register/Register.styles.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Container = styled.div` 4 | display: flex; 5 | background-color: #e9e9e9; 6 | `; 7 | 8 | export const LeftContainer = styled.div` 9 | height: 100vh; 10 | flex: 1; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | `; 15 | 16 | export const LeftWrapper = styled.div` 17 | display: flex; 18 | flex-direction: column; 19 | justify-content: center; 20 | width: 500px; 21 | `; 22 | 23 | export const LeftTitle = styled.h1` 24 | font-size: 50px; 25 | color: #4267b2; 26 | margin-bottom: 10px; 27 | `; 28 | 29 | export const LeftDesc = styled.span` 30 | font-size: 28px; 31 | `; 32 | 33 | export const RightContainer = styled.div` 34 | flex: 1; 35 | display: flex; 36 | flex-direction: column; 37 | align-items: center; 38 | justify-content: center; 39 | `; 40 | 41 | export const RightWrapper = styled.form` 42 | display: flex; 43 | flex-direction: column; 44 | align-items: center; 45 | justify-content: center; 46 | width: 500px; 47 | padding: 50px 5px; 48 | background-color: white; 49 | border-radius: 20px; 50 | `; 51 | 52 | export const RightInput = styled.input` 53 | font-size: 18px; 54 | margin: 10px 0px; 55 | padding: 5px 20px; 56 | width: 80%; 57 | height: 50px; 58 | border: none; 59 | border: 1px solid gray; 60 | outline: none; 61 | border-radius: 10px; 62 | `; 63 | 64 | export const LoginButton = styled.button` 65 | font-size: 24px; 66 | margin: 20px 0px; 67 | padding: 15px 20px; 68 | width: 80%; 69 | border: none; 70 | border-radius: 10px; 71 | background-color: #4267b2; 72 | color: white; 73 | cursor: pointer; 74 | `; 75 | 76 | export const ForgotPassword = styled.span` 77 | color: #0273be; 78 | cursor: pointer; 79 | `; 80 | 81 | export const CreateButton = styled.button` 82 | font-size: 24px; 83 | margin: 20px 0px; 84 | padding: 15px 20px; 85 | width: 60%; 86 | border: none; 87 | border-radius: 10px; 88 | background-color: #197e00; 89 | color: white; 90 | cursor: pointer; 91 | `; 92 | -------------------------------------------------------------------------------- /client/build/index.html: -------------------------------------------------------------------------------- 1 | React Social Media App
-------------------------------------------------------------------------------- /client/src/pages/Login/Login.styles.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Container = styled.div` 4 | display: flex; 5 | background-color: #e9e9e9; 6 | `; 7 | 8 | export const LeftContainer = styled.div` 9 | height: 100vh; 10 | flex: 1; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | `; 15 | 16 | export const LeftWrapper = styled.div` 17 | display: flex; 18 | flex-direction: column; 19 | justify-content: center; 20 | width: 500px; 21 | `; 22 | 23 | export const LeftTitle = styled.h1` 24 | font-size: 50px; 25 | color: #4267b2; 26 | margin-bottom: 10px; 27 | `; 28 | 29 | export const LeftDesc = styled.span` 30 | font-size: 28px; 31 | `; 32 | 33 | export const RightContainer = styled.div` 34 | flex: 1; 35 | display: flex; 36 | flex-direction: column; 37 | align-items: center; 38 | justify-content: center; 39 | `; 40 | 41 | export const RightWrapper = styled.form` 42 | display: flex; 43 | flex-direction: column; 44 | align-items: center; 45 | justify-content: center; 46 | width: 500px; 47 | padding: 50px 5px; 48 | background-color: white; 49 | border-radius: 20px; 50 | `; 51 | 52 | export const RightInput = styled.input` 53 | font-size: 18px; 54 | margin: 10px 0px; 55 | padding: 5px 20px; 56 | width: 80%; 57 | height: 50px; 58 | border: none; 59 | border: 1px solid gray; 60 | outline: none; 61 | border-radius: 10px; 62 | `; 63 | 64 | export const LoginButton = styled.button` 65 | font-size: 24px; 66 | margin: 20px 0px; 67 | padding: 15px 20px; 68 | width: 80%; 69 | border: none; 70 | border-radius: 10px; 71 | background-color: #4267b2; 72 | color: white; 73 | cursor: pointer; 74 | `; 75 | 76 | export const ForgotPassword = styled.span` 77 | color: #0273be; 78 | cursor: pointer; 79 | `; 80 | 81 | export const CreateButton = styled.button` 82 | font-size: 24px; 83 | margin: 20px 0px; 84 | padding: 15px 20px; 85 | width: 60%; 86 | border: none; 87 | border-radius: 10px; 88 | background-color: #197e00; 89 | color: white; 90 | cursor: pointer; 91 | `; 92 | 93 | export const ErrorSpan = styled.span ` 94 | font-size: 12px; 95 | color: red; 96 | margin: 5px 0px; 97 | ` -------------------------------------------------------------------------------- /client/src/pages/Login/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | // Redux 3 | import { useDispatch, useSelector } from "react-redux"; 4 | import { login } from "../../redux/apiCalls"; 5 | // Custom History 6 | import history from "../../history"; 7 | // Styled Components 8 | import { 9 | Container, 10 | CreateButton, 11 | ErrorSpan, 12 | ForgotPassword, 13 | LeftContainer, 14 | LeftDesc, 15 | LeftTitle, 16 | LeftWrapper, 17 | LoginButton, 18 | RightContainer, 19 | RightInput, 20 | RightWrapper, 21 | } from "./Login.styles"; 22 | 23 | const Login = () => { 24 | const dispatch = useDispatch(); 25 | const userError = useSelector((state) => state.user.error); 26 | 27 | const [username, setUsername] = useState(""); 28 | const [password, setPassword] = useState(""); 29 | 30 | const handleClick = (event) => { 31 | event.preventDefault(); 32 | 33 | const user = { 34 | username, 35 | password, 36 | }; 37 | 38 | login(dispatch, user); 39 | }; 40 | 41 | const handleCreate = () => { 42 | history.push("/register"); 43 | history.go(0); 44 | }; 45 | 46 | return ( 47 | 48 | 49 | 50 | Ozkan's Social 51 | 52 | Connect with friends and the world around you on Ozkan's Social 53 | 54 | 55 | 56 | 57 | 58 | setUsername(event.target.value)} 62 | /> 63 | setPassword(event.target.value)} 68 | /> 69 | Log In 70 | Forgot Password? 71 | {userError && Wrong Credentials!} 72 | 73 | Create a New Account 74 | 75 | 76 | 77 | 78 | ); 79 | }; 80 | 81 | export default Login; 82 | -------------------------------------------------------------------------------- /client/src/components/Post/Post.styles.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Container = styled.div` 4 | width: 90%; 5 | margin-bottom: 50px; 6 | display: flex; 7 | flex-direction: column; 8 | background-color: white; 9 | border-radius: 10px; 10 | `; 11 | 12 | export const TopContainer = styled.div` 13 | display: flex; 14 | justify-content: space-between; 15 | margin-top: 20px; 16 | `; 17 | 18 | export const UserContainer = styled.div` 19 | display: flex; 20 | align-items: center; 21 | margin-left: 20px; 22 | `; 23 | 24 | export const ProfilePicture = styled.img` 25 | width: 50px; 26 | height: 50px; 27 | border-radius: 50%; 28 | object-fit: cover; 29 | cursor: pointer; 30 | `; 31 | 32 | export const Username = styled.span` 33 | font-size: 18px; 34 | margin-left: 10px; 35 | font-weight: 600; 36 | cursor: pointer; 37 | `; 38 | 39 | export const HourAgo = styled.span` 40 | font-size: 13px; 41 | margin-left: 10px; 42 | `; 43 | 44 | export const MoreContainer = styled.div` 45 | margin: 0px 5px; 46 | `; 47 | 48 | export const CenterContainer = styled.div` 49 | margin: 20px 0px 20px 20px; 50 | `; 51 | 52 | export const Desc = styled.span` 53 | margin-bottom: 20px; 54 | `; 55 | 56 | export const PostImage = styled.img` 57 | width: 95%; 58 | height: 90%; 59 | object-fit: cover; 60 | margin-top: 20px; 61 | `; 62 | 63 | export const BottomContainer = styled.div` 64 | display: flex; 65 | justify-content: space-between; 66 | margin: 0px 20px; 67 | margin-bottom: 20px; 68 | `; 69 | 70 | export const LikeContainer = styled.div` 71 | display: flex; 72 | align-items: center; 73 | `; 74 | 75 | export const LikeIcon = styled.img` 76 | width: 25px; 77 | height: 25px; 78 | border-radius: 50%; 79 | object-fit: cover; 80 | cursor: pointer; 81 | margin-right: 7px; 82 | `; 83 | 84 | export const HeartIcon = styled.img` 85 | width: 25px; 86 | height: 25px; 87 | border-radius: 50%; 88 | object-fit: cover; 89 | cursor: pointer; 90 | `; 91 | 92 | export const LikeInfo = styled.span` 93 | margin-left: 10px; 94 | font-weight: 500; 95 | `; 96 | 97 | export const Comment = styled.span` 98 | cursor: pointer; 99 | text-decoration: underline; 100 | `; 101 | -------------------------------------------------------------------------------- /client/src/components/LeftContainer/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // Material UI Icons 3 | import { 4 | RssFeed, 5 | Chat, 6 | PlayCircleFilledOutlined, 7 | Group, 8 | Bookmark, 9 | HelpOutline, 10 | WorkOutline, 11 | Event, 12 | School, 13 | } from "@material-ui/icons"; 14 | // Dummy Data 15 | import { Users } from "../../dummyData"; 16 | // Styled Components 17 | import { 18 | BottomContainer, 19 | CenterContainer, 20 | Container, 21 | Line, 22 | List, 23 | ListItem, 24 | ShowMore, 25 | Span, 26 | TopContainer, 27 | } from "./LeftContainer.styles"; 28 | import LeftContainerFriends from "../LeftContainerFriends"; 29 | 30 | const LeftContainer = () => { 31 | return ( 32 | 33 | 34 | 35 | 36 | 37 | Feed 38 | 39 | 40 | 41 | Chats 42 | 43 | 44 | 45 | Videos 46 | 47 | 48 | 49 | Groups 50 | 51 | 52 | 53 | Bookmarks 54 | 55 | 56 | 57 | Questions 58 | 59 | 60 | 61 | Jobs 62 | 63 | 64 | 65 | Events 66 | 67 | 68 | 69 | Courses 70 | 71 | 72 | Show More 73 | 74 | 75 | 76 | 77 | 78 | {Users.map((user) => ( 79 | 84 | ))} 85 | 86 | 87 | ); 88 | }; 89 | 90 | export default LeftContainer; 91 | -------------------------------------------------------------------------------- /client/src/components/Navbar/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // Matererial UI Icons 3 | import { Person, Notifications, Message, Search } from "@material-ui/icons"; 4 | // Image 5 | // import Image from "../../assets/person/1.jpeg"; 6 | // Reacr Router 7 | import { Link } from "react-router-dom"; 8 | // Redux 9 | import { useDispatch, useSelector } from "react-redux"; 10 | import { logout } from "../../redux/userRedux"; 11 | // Styled Components 12 | import { 13 | Center, 14 | Container, 15 | Left, 16 | ListItem, 17 | Logo, 18 | PersonNotification, 19 | Profile, 20 | Right, 21 | SearchBar, 22 | SearchInput, 23 | Span, 24 | } from "./Navbar.styles"; 25 | 26 | const Navbar = () => { 27 | const dispatch = useDispatch(); 28 | const user = useSelector((state) => state.user.currentUser); 29 | 30 | const handleLogout = () => { 31 | dispatch(logout()); 32 | }; 33 | 34 | return ( 35 | 36 | 37 | 38 | Ozkan's Social 39 | 40 | 41 |
42 | 43 | 44 | 45 | 46 | 50 | Homepage 51 | 52 | 53 | Timeline 54 | 55 |
56 | 57 | 58 | 1 59 | 60 | 61 | 62 | 5 63 | 64 | 65 | 66 | 2 67 | 68 | 69 | 70 | 71 | 72 | Logout 73 | 74 | 75 | ); 76 | }; 77 | 78 | export default Navbar; 79 | -------------------------------------------------------------------------------- /client/src/components/CenterContainer/CenterContainer.styles.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Container = styled.div` 4 | flex: 3; 5 | display: flex; 6 | flex-direction: column; 7 | align-items: center; 8 | 9 | `; 10 | 11 | export const AddFriendContainer = styled.div ` 12 | display: flex; 13 | flex-direction: column; 14 | margin: 10px 0px; 15 | text-align:center; 16 | ` 17 | 18 | export const FriendTitle = styled.h1 ` 19 | font-size: 24px; 20 | font-weight: 400; 21 | margin: 5px 0px; 22 | ` 23 | 24 | export const Friends = styled.span ` 25 | font-size: 18px; 26 | margin: 2px 0px; 27 | cursor:pointer; 28 | ` 29 | 30 | export const PostContainer = styled.div` 31 | width: 90%; 32 | height: 200px; 33 | margin-top: 25px; 34 | margin-bottom: 50px; 35 | background-color: white; 36 | display: flex; 37 | flex-direction: column; 38 | `; 39 | 40 | export const TopPostContainer = styled.div` 41 | margin-top: 20px; 42 | display: flex; 43 | align-items: center; 44 | justify-content: center; 45 | `; 46 | 47 | export const ProfilePicture = styled.img` 48 | width: 50px; 49 | height: 50px; 50 | border-radius: 50%; 51 | object-fit: cover; 52 | margin-left: 20px; 53 | `; 54 | 55 | export const PostInput = styled.input` 56 | width: 90%; 57 | margin-left: 20px; 58 | font-size: 18px; 59 | border: none; 60 | outline: none; 61 | `; 62 | 63 | export const LineContainer = styled.div` 64 | display: flex; 65 | align-items: center; 66 | justify-content: center; 67 | margin: 25px 0px; 68 | `; 69 | 70 | export const PostLine = styled.div` 71 | width: 90%; 72 | height: 0.1px; 73 | background-color: #a1a1a1; 74 | `; 75 | 76 | export const BottomPostContainer = styled.div` 77 | display: flex; 78 | justify-content: space-between; 79 | margin: 10px 50px; 80 | `; 81 | 82 | export const List = styled.ul` 83 | display: flex; 84 | align-items: center; 85 | list-style: none; 86 | `; 87 | 88 | export const ListItem = styled.li` 89 | margin-left: 2px; 90 | margin-right: 25px; 91 | font-size: 18px; 92 | cursor: pointer; 93 | `; 94 | 95 | export const PostButton = styled.button` 96 | background-color: green; 97 | color: white; 98 | font-size: 16px; 99 | border: none; 100 | border-radius: 5px; 101 | width: 70px; 102 | height: 35px; 103 | cursor: pointer; 104 | `; 105 | -------------------------------------------------------------------------------- /client/src/components/RightContainer/RightContainer.styles.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Container = styled.div` 4 | flex: 1; 5 | padding: 20px; 6 | `; 7 | 8 | export const BirthdayContainer = styled.div` 9 | display: flex; 10 | align-items: center; 11 | `; 12 | 13 | export const BirthdayIcon = styled.img` 14 | width: 40px; 15 | height: 42px; 16 | margin-right: 10px; 17 | `; 18 | 19 | export const Span = styled.span` 20 | font-size: 18px; 21 | `; 22 | 23 | export const AdContainer = styled.div` 24 | margin: 20px 0px; 25 | `; 26 | 27 | export const AdImage = styled.img` 28 | width: 450px; 29 | height: 300px; 30 | border-radius: 30px; 31 | `; 32 | 33 | export const OnlineContainer = styled.div` 34 | margin-top: 20px; 35 | `; 36 | 37 | export const Title = styled.span` 38 | font-size: 24px; 39 | font-weight: 500; 40 | `; 41 | 42 | export const FollowContainer = styled.div` 43 | margin: 20px 0px; 44 | 45 | `; 46 | 47 | export const FollowButton = styled.button` 48 | background-color: blue; 49 | color: white; 50 | font-size: 16px; 51 | border: none; 52 | border-radius: 5px; 53 | width: 70px; 54 | height: 35px; 55 | cursor: pointer; 56 | `; 57 | 58 | export const UserInfoContainer = styled.div` 59 | display: flex; 60 | flex-direction: column; 61 | `; 62 | 63 | export const UserInfoTitle = styled.h3` 64 | margin-bottom: 10px; 65 | `; 66 | 67 | export const UserInfo = styled.div` 68 | display: flex; 69 | margin-bottom: 5px; 70 | `; 71 | 72 | export const UserInfoName = styled.span` 73 | color: #696969; 74 | font-weight: 500; 75 | margin-right: 10px; 76 | `; 77 | 78 | export const UserInfoDetail = styled.p` 79 | color: #8f8f8f; 80 | font-weight: 300; 81 | `; 82 | 83 | export const UserFriendsContainer = styled.div` 84 | display: flex; 85 | flex-direction: column; 86 | `; 87 | 88 | export const UserFriendsTitle = styled.h3` 89 | margin-top: 20px; 90 | `; 91 | 92 | export const UserFriends = styled.div` 93 | display: flex; 94 | flex-wrap: wrap; 95 | `; 96 | 97 | export const User = styled.div` 98 | width: 120px; 99 | height: 120px; 100 | display: flex; 101 | flex-direction: column; 102 | margin: 15px 0px; 103 | cursor: pointer; 104 | `; 105 | 106 | export const UserFriendsPhotos = styled.img` 107 | width: 100px; 108 | height: 100px; 109 | border-radius: 5px; 110 | object-fit: cover; 111 | `; 112 | 113 | export const UserFriendsUsernames = styled.span` 114 | margin-top: 5px; 115 | `; 116 | -------------------------------------------------------------------------------- /backend/routes/posts.js: -------------------------------------------------------------------------------- 1 | const router = require("express").Router(); 2 | const Post = require("../models/Post"); 3 | const User = require("../models/User"); 4 | 5 | // Create a Post 6 | router.post("/", async (req, res) => { 7 | const newPost = new Post(req.body); 8 | 9 | try { 10 | const savedPost = await newPost.save(); 11 | res.status(200).json(savedPost); 12 | } catch (err) { 13 | res.status(500).json(err); 14 | } 15 | }); 16 | 17 | // Update a Post 18 | router.put("/:id", async (req, res) => { 19 | try { 20 | const post = await Post.findById(req.params.id); 21 | 22 | if (post.userId === req.body.userId) { 23 | await post.updateOne({ $set: req.body }); 24 | res.status(200).json("Post has been updated!"); 25 | } else { 26 | res.status(403).json("You cannot update this post!"); 27 | } 28 | } catch (err) { 29 | res.status(500).json(err); 30 | } 31 | }); 32 | 33 | // Delete a Post 34 | router.delete("/:id", async (req, res) => { 35 | try { 36 | const post = await Post.findById(req.params.id); 37 | 38 | if (post.userId === req.body.userId) { 39 | await post.deleteOne(); 40 | res.status(200).json("Post has been deleted!"); 41 | } else { 42 | res.status(403).json("You cannot delete this post!"); 43 | } 44 | } catch (err) { 45 | res.status(500).json(err); 46 | } 47 | }); 48 | 49 | // Like/Unlike a Post 50 | router.put("/:id/like", async (req, res) => { 51 | try { 52 | const post = await Post.findById(req.params.id); 53 | 54 | if (!post.likes.includes(req.body.userId)) { 55 | await post.updateOne({ $push: { likes: req.body.userId } }); 56 | 57 | res.status(200).json("Post has been liked!" + post); 58 | } else { 59 | await post.updateOne({ $pull: { likes: req.body.userId } }); 60 | 61 | res.status(200).json("Post has been unliked!"); 62 | } 63 | } catch (err) { 64 | res.status(500).json(err); 65 | } 66 | }); 67 | 68 | // Get a Post 69 | router.get("/:id", async (req, res) => { 70 | try { 71 | const post = await Post.findById(req.params.id); 72 | 73 | res.status(200).json(post); 74 | } catch (err) { 75 | res.status(500).json(err); 76 | } 77 | }); 78 | 79 | // Get Timeline Posts 80 | router.get("/timeline/:userId", async (req, res) => { 81 | try { 82 | const currentUser = await User.findById(req.params.userId); 83 | const userPosts = await Post.find({ userId: currentUser._id }); 84 | const friendPosts = await Promise.all( 85 | currentUser.followings.map((friendId) => { 86 | return Post.find({ userId: friendId }); 87 | }) 88 | ); 89 | 90 | res.status(200).json(userPosts.concat(...friendPosts)); 91 | } catch (err) { 92 | res.status(500).json(err); 93 | } 94 | }); 95 | 96 | module.exports = router; 97 | -------------------------------------------------------------------------------- /client/src/pages/Register/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | // Redux 3 | import { useDispatch } from "react-redux"; 4 | import { register } from "../../redux/apiCalls"; 5 | // Styled Components 6 | import { 7 | Container, 8 | CreateButton, 9 | LeftContainer, 10 | LeftDesc, 11 | LeftTitle, 12 | LeftWrapper, 13 | RightContainer, 14 | RightInput, 15 | RightWrapper, 16 | } from "./Register.styles"; 17 | 18 | const Register = () => { 19 | const dispatch = useDispatch(); 20 | 21 | const [values, setValues] = useState({ 22 | username: "", 23 | email: "", 24 | password: "", 25 | confirmPassword: "", 26 | }); 27 | 28 | const inputs = [ 29 | { 30 | id: 1, 31 | name: "username", 32 | type: "text", 33 | placeholder: "Username", 34 | title: 35 | "Username should be 3-16 characters and shouldn't include any special character!", 36 | // regex code for only letter and numbers 37 | pattern: "^[A-Za-z0-9]{3,16}$", 38 | required: true, 39 | }, 40 | { 41 | id: 2, 42 | name: "email", 43 | type: "email", 44 | placeholder: "Email", 45 | title: "It should be a valid email address!", 46 | required: true, 47 | }, 48 | { 49 | id: 3, 50 | name: "password", 51 | type: "password", 52 | placeholder: "Password", 53 | title: 54 | " Passwrod should be 8-16 characters and include at least 1 letter, 1 number and 1 special character!", 55 | pattern: 56 | "^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,20}$", 57 | required: true, 58 | }, 59 | { 60 | id: 4, 61 | name: "confirmPassword", 62 | type: "password", 63 | placeholder: "Confirm Password", 64 | title: "Password don't match!", 65 | pattern: values.password, 66 | required: true, 67 | }, 68 | ]; 69 | 70 | const handleChange = (event) => { 71 | setValues((prev) => { 72 | return { ...prev, [event.target.name]: event.target.value }; 73 | }); 74 | }; 75 | 76 | const handleClick = (event) => { 77 | event.preventDefault(); 78 | 79 | const user = { ...values }; 80 | register(dispatch, user); 81 | }; 82 | 83 | return ( 84 | 85 | 86 | 87 | Ozkan's Social 88 | 89 | Connect with friends and the world around you on Ozkan's Social 90 | 91 | 92 | 93 | 94 | 95 | {inputs.map((input) => ( 96 | 102 | ))} 103 | 104 | Create a New Account 105 | 106 | 107 | 108 | 109 | ); 110 | }; 111 | 112 | export default Register; 113 | -------------------------------------------------------------------------------- /client/src/components/Post/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | // Dummy Data 3 | // import { Users } from "../../dummyData"; 4 | // Timeago.js 5 | import { format } from "timeago.js"; 6 | // Axios 7 | import { publicRequest } from "../../requestMethods"; 8 | // Images 9 | import LikeIconPng from "../../assets/like.png"; 10 | import HeartIconPng from "../../assets/heart.png"; 11 | // Material UI Icons 12 | import { MoreVert } from "@material-ui/icons"; 13 | // Styled Components 14 | import { 15 | BottomContainer, 16 | CenterContainer, 17 | Comment, 18 | Container, 19 | Desc, 20 | HeartIcon, 21 | HourAgo, 22 | LikeContainer, 23 | LikeIcon, 24 | LikeInfo, 25 | MoreContainer, 26 | PostImage, 27 | ProfilePicture, 28 | TopContainer, 29 | UserContainer, 30 | Username, 31 | } from "./Post.styles"; 32 | import { Link } from "react-router-dom"; 33 | 34 | const Post = ({ desc, photo, date, userId, like, comment, id }) => { 35 | const [postData, setPostData] = useState(null); 36 | const [likeNumber, setLikeNumber] = useState(like); 37 | const [preLikeNumber, setPreLikeNumber] = useState(false); 38 | 39 | const handleLike = async () => { 40 | setLikeNumber(preLikeNumber ? likeNumber - 1 : likeNumber + 1); 41 | setPreLikeNumber(!preLikeNumber); 42 | 43 | try { 44 | await publicRequest.put(`/posts/${id}/like`, { userId }); 45 | } catch (err) { 46 | console.log(err); 47 | } 48 | }; 49 | 50 | useEffect(() => { 51 | const getPost = async () => { 52 | try { 53 | const response = await publicRequest.get(`/users/${userId}`); 54 | 55 | setPostData(response.data); 56 | } catch (err) { 57 | console.log(err); 58 | } 59 | }; 60 | 61 | getPost(); 62 | }, []); 63 | 64 | return ( 65 | 66 | 67 | 68 | {postData && ( 69 | <> 70 | 71 | 72 | 73 | 77 | 78 | {postData.username.charAt(0).toUpperCase() + 79 | postData.username.slice(1)} 80 | 81 | 82 | 83 | )} 84 | {format(date)} 85 | 86 | 87 | 88 | 89 | 90 | 91 | {desc} 92 | {photo && } 93 | 94 | 95 | 96 | 97 | 98 | {likeNumber} people like it 99 | 100 | {comment ? `${comment} comments` : "0 comment"} 101 | 102 | 103 | ); 104 | }; 105 | 106 | export default Post; 107 | -------------------------------------------------------------------------------- /client/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `yarn start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `yarn test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `yarn build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `yarn eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `yarn build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /backend/routes/users.js: -------------------------------------------------------------------------------- 1 | const router = require("express").Router(); 2 | const User = require("../models/User"); 3 | const dotenv = require("dotenv"); 4 | const CryptoJS = require("crypto-js"); 5 | 6 | dotenv.config(); 7 | 8 | // Update User 9 | router.put("/:id", async (req, res) => { 10 | if (req.body.userId === req.params.id || req.body.isAdmin) { 11 | if (req.body.password) { 12 | try { 13 | req.body.password = CryptoJS.AES.encrypt( 14 | req.body.password, 15 | process.env.PASS_SEC 16 | ).toString(); 17 | } catch (err) { 18 | res.status(500).json(err); 19 | } 20 | } 21 | try { 22 | await User.findByIdAndUpdate(req.params.id, { 23 | $set: req.body, 24 | }); 25 | 26 | res.status(200).json("Account has been updated!"); 27 | } catch (err) { 28 | return res.status(500).json(err); 29 | } 30 | } else { 31 | return res.status(403).json("You can update only your account!"); 32 | } 33 | }); 34 | 35 | // Delete User 36 | router.delete("/:id", async (req, res) => { 37 | if (req.body.userId === req.params.id || req.body.isAdmin === true) { 38 | try { 39 | await User.findByIdAndDelete(req.params.id); 40 | 41 | res.status(200).json("Account has been deleted!"); 42 | } catch (err) { 43 | return res.status(500).json(err); 44 | } 45 | } else { 46 | return res.status(403).json("You can delete only your account!"); 47 | } 48 | }); 49 | 50 | // Get a User 51 | router.get("/:id", async (req, res) => { 52 | try { 53 | const user = await User.findById(req.params.id); 54 | 55 | const { password, updatedAt, createdAt, isAdmin, ...others } = user._doc; 56 | res.status(200).json(others); 57 | } catch (err) { 58 | res.status(500).json(err); 59 | } 60 | }); 61 | 62 | // Follow a User 63 | router.put("/:id/follow", async (req, res) => { 64 | if (req.body.userId !== req.params.id) { 65 | try { 66 | const user = await User.findById(req.params.id); 67 | const currentUser = await User.findById(req.body.userId); 68 | 69 | if (!user.followers.includes(req.body.userId)) { 70 | await user.updateOne({ $push: { followers: req.body.userId } }); 71 | await currentUser.updateOne({ $push: { followings: req.params.id } }); 72 | 73 | res.status(200).json("User has been followed!"); 74 | } else { 75 | res.status(403).json("You are already following this user!"); 76 | } 77 | } catch (err) { 78 | res.status(500).json(err); 79 | } 80 | } else { 81 | res.status(403).json("You cannot follow yourself!"); 82 | } 83 | }); 84 | 85 | // Unfollow a User 86 | router.put("/:id/unfollow", async (req, res) => { 87 | if (req.body.userId !== req.params.id) { 88 | try { 89 | const user = await User.findById(req.params.id); 90 | const currentUser = await User.findById(req.body.userId); 91 | 92 | if (user.followers.includes(req.body.userId)) { 93 | await user.updateOne({ $pull: { followers: req.body.userId } }); 94 | await currentUser.updateOne({ $pull: { followings: req.params.id } }); 95 | 96 | res.status(200).json("User has been unfollowed!"); 97 | } else { 98 | res.status(403).json("You alreay not following this user!"); 99 | } 100 | } catch (err) { 101 | res.status(500).json(err); 102 | } 103 | } else { 104 | res.status(403).json("You cannot unfollow yourself!"); 105 | } 106 | }); 107 | 108 | module.exports = router; 109 | -------------------------------------------------------------------------------- /client/src/components/RightContainer/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // Image 3 | import Gift from "../../assets/gift.png"; 4 | import Ad from "../../assets/ad.png"; 5 | // Custom History 6 | import history from "../../history"; 7 | // Components 8 | import LeftContainerFriends from "../LeftContainerFriends"; 9 | // React Router 10 | import { useParams } from "react-router-dom"; 11 | // Axios 12 | import { publicRequest } from "../../requestMethods"; 13 | // Redux 14 | import { useSelector } from "react-redux"; 15 | // Dummy Data 16 | import { Users } from "../../dummyData"; 17 | // Styled Components 18 | import { 19 | AdContainer, 20 | AdImage, 21 | BirthdayContainer, 22 | BirthdayIcon, 23 | Container, 24 | FollowButton, 25 | FollowContainer, 26 | OnlineContainer, 27 | Span, 28 | Title, 29 | User, 30 | UserFriends, 31 | UserFriendsContainer, 32 | UserFriendsPhotos, 33 | UserFriendsTitle, 34 | UserFriendsUsernames, 35 | UserInfo, 36 | UserInfoContainer, 37 | UserInfoDetail, 38 | UserInfoName, 39 | UserInfoTitle, 40 | } from "./RightContainer.styles"; 41 | 42 | const RightContainer = ({ page, city, from, relationShip }) => { 43 | const params = useParams(); 44 | const userId = useSelector((state) => state.user.currentUser._id); 45 | 46 | const handleFollow = async () => { 47 | try { 48 | await publicRequest.put(`/users/${params.id}/follow`, { userId }); 49 | 50 | history.push("/"); 51 | history.go(0); 52 | } catch (err) { 53 | console.log(err); 54 | } 55 | }; 56 | 57 | return ( 58 | 59 | {page === "home" ? ( 60 | <> 61 | 62 | 63 | 64 | Pola Foster and 3 other friends have a birthday 65 | today. 66 | 67 | 68 | 69 | 70 | 71 | Online Friends 72 | 73 | {Users.map((user) => ( 74 | 80 | ))} 81 | 82 | 83 | ) : ( 84 | <> 85 | 86 | Follow 87 | 88 | 89 | User Information 90 | 91 | City: 92 | {city} 93 | 94 | 95 | From: 96 | {from} 97 | 98 | 99 | Relationship: 100 | {relationShip} 101 | 102 | 103 | 104 | User Friends 105 | 106 | {Users.map((user) => ( 107 | 108 | 109 | {user.username} 110 | 111 | ))} 112 | 113 | 114 | 115 | )} 116 | 117 | ); 118 | }; 119 | 120 | export default RightContainer; 121 | -------------------------------------------------------------------------------- /client/src/dummyData.js: -------------------------------------------------------------------------------- 1 | export const Users = [ 2 | { 3 | id:1, 4 | profilePicture: "https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80", 5 | username: "Ozkan Selcuk", 6 | }, 7 | { 8 | id:2, 9 | profilePicture: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80", 10 | username: "Janell Shrum", 11 | }, 12 | { 13 | id:3, 14 | profilePicture: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80", 15 | username: "Alex Durden", 16 | }, 17 | { 18 | id:4, 19 | profilePicture: "https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80", 20 | username: "Dora Hawks", 21 | }, 22 | { 23 | id:5, 24 | profilePicture: "https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80", 25 | username: "Thomas Holden", 26 | }, 27 | { 28 | id:6, 29 | profilePicture: "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80", 30 | username: "Shirley Beauchamp", 31 | }, 32 | { 33 | id:7, 34 | profilePicture: "https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80", 35 | username: "Travis Bennett", 36 | }, 37 | { 38 | id:8, 39 | profilePicture: "https://images.unsplash.com/photo-1533227268428-f9ed0900fb3b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=971&q=80", 40 | username: "Kristen Thomas", 41 | }, 42 | { 43 | id:9, 44 | profilePicture: "https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80", 45 | username: "Gary Duty", 46 | }, 47 | { 48 | id:10, 49 | profilePicture: "https://images.unsplash.com/photo-1504439904031-93ded9f93e4e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=736&q=80", 50 | username: "Jane Iverson", 51 | }, 52 | ]; 53 | 54 | export const Posts = [ 55 | { 56 | id: 1, 57 | desc: "Love For All, Hatred For None.", 58 | photo: "assets/post/1.jpeg", 59 | date: "5 mins ago", 60 | userId: 1, 61 | like: 32, 62 | comment: 9, 63 | }, 64 | { 65 | id: 2, 66 | photo: "assets/post/2.jpeg", 67 | date: "15 mins ago", 68 | userId: 2, 69 | like: 2, 70 | comment: 1, 71 | }, 72 | { 73 | id: 3, 74 | desc: "Every moment is a fresh beginning.", 75 | photo: "assets/post/3.jpeg", 76 | date: "1 hour ago", 77 | userId: 3, 78 | like: 61, 79 | comment: 2, 80 | }, 81 | { 82 | id: 4, 83 | photo: "assets/post/4.jpeg", 84 | date: "4 hours ago", 85 | userId: 4, 86 | like: 7, 87 | comment: 3, 88 | }, 89 | { 90 | id: 5, 91 | photo: "assets/post/5.jpeg", 92 | date: "5 hours ago", 93 | userId: 5, 94 | like: 23, 95 | comment: 5, 96 | }, 97 | { 98 | id: 6, 99 | photo: "assets/post/6.jpeg", 100 | date: "1 day ago", 101 | userId: 6, 102 | like: 44, 103 | comment: 6, 104 | }, 105 | { 106 | id: 7, 107 | desc: "Never regret anything that made you smile.", 108 | photo: "assets/post/7.jpeg", 109 | date: "2 days ago", 110 | userId: 7, 111 | like: 52, 112 | comment: 3, 113 | }, 114 | { 115 | id: 8, 116 | photo: "assets/post/8.jpeg", 117 | date: "3 days ago", 118 | userId: 8, 119 | like: 15, 120 | comment: 1, 121 | }, 122 | { 123 | id: 9, 124 | desc: "Change the world by being yourself.", 125 | photo: "assets/post/9.jpeg", 126 | date: "5 days ago", 127 | userId: 9, 128 | like: 11, 129 | comment: 2, 130 | }, 131 | { 132 | id: 10, 133 | photo: "assets/post/10.jpeg", 134 | date: "1 week ago", 135 | userId: 10, 136 | like: 104, 137 | comment: 12, 138 | }, 139 | ]; -------------------------------------------------------------------------------- /client/build/static/js/2.87b51020.chunk.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /** 8 | * @license 9 | * Copyright 2017 Google LLC 10 | * 11 | * Licensed under the Apache License, Version 2.0 (the "License"); 12 | * you may not use this file except in compliance with the License. 13 | * You may obtain a copy of the License at 14 | * 15 | * http://www.apache.org/licenses/LICENSE-2.0 16 | * 17 | * Unless required by applicable law or agreed to in writing, software 18 | * distributed under the License is distributed on an "AS IS" BASIS, 19 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 20 | * See the License for the specific language governing permissions and 21 | * limitations under the License. 22 | */ 23 | 24 | /** 25 | * @license 26 | * Copyright 2019 Google LLC 27 | * 28 | * Licensed under the Apache License, Version 2.0 (the "License"); 29 | * you may not use this file except in compliance with the License. 30 | * You may obtain a copy of the License at 31 | * 32 | * http://www.apache.org/licenses/LICENSE-2.0 33 | * 34 | * Unless required by applicable law or agreed to in writing, software 35 | * distributed under the License is distributed on an "AS IS" BASIS, 36 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 37 | * See the License for the specific language governing permissions and 38 | * limitations under the License. 39 | */ 40 | 41 | /** 42 | * @license 43 | * Copyright 2020 Google LLC 44 | * 45 | * Licensed under the Apache License, Version 2.0 (the "License"); 46 | * you may not use this file except in compliance with the License. 47 | * You may obtain a copy of the License at 48 | * 49 | * http://www.apache.org/licenses/LICENSE-2.0 50 | * 51 | * Unless required by applicable law or agreed to in writing, software 52 | * distributed under the License is distributed on an "AS IS" BASIS, 53 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 54 | * See the License for the specific language governing permissions and 55 | * limitations under the License. 56 | */ 57 | 58 | /** 59 | * @license 60 | * Copyright 2021 Google LLC 61 | * 62 | * Licensed under the Apache License, Version 2.0 (the "License"); 63 | * you may not use this file except in compliance with the License. 64 | * You may obtain a copy of the License at 65 | * 66 | * http://www.apache.org/licenses/LICENSE-2.0 67 | * 68 | * Unless required by applicable law or agreed to in writing, software 69 | * distributed under the License is distributed on an "AS IS" BASIS, 70 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 71 | * See the License for the specific language governing permissions and 72 | * limitations under the License. 73 | */ 74 | 75 | /** 76 | * A better abstraction over CSS. 77 | * 78 | * @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present 79 | * @website https://github.com/cssinjs/jss 80 | * @license MIT 81 | */ 82 | 83 | /** 84 | * React Router DOM v6.0.2 85 | * 86 | * Copyright (c) Remix Software Inc. 87 | * 88 | * This source code is licensed under the MIT license found in the 89 | * LICENSE.md file in the root directory of this source tree. 90 | * 91 | * @license MIT 92 | */ 93 | 94 | /** 95 | * React Router v6.0.2 96 | * 97 | * Copyright (c) Remix Software Inc. 98 | * 99 | * This source code is licensed under the MIT license found in the 100 | * LICENSE.md file in the root directory of this source tree. 101 | * 102 | * @license MIT 103 | */ 104 | 105 | /** @license React v0.20.2 106 | * scheduler.production.min.js 107 | * 108 | * Copyright (c) Facebook, Inc. and its affiliates. 109 | * 110 | * This source code is licensed under the MIT license found in the 111 | * LICENSE file in the root directory of this source tree. 112 | */ 113 | 114 | /** @license React v16.13.1 115 | * react-is.production.min.js 116 | * 117 | * Copyright (c) Facebook, Inc. and its affiliates. 118 | * 119 | * This source code is licensed under the MIT license found in the 120 | * LICENSE file in the root directory of this source tree. 121 | */ 122 | 123 | /** @license React v17.0.2 124 | * react-dom.production.min.js 125 | * 126 | * Copyright (c) Facebook, Inc. and its affiliates. 127 | * 128 | * This source code is licensed under the MIT license found in the 129 | * LICENSE file in the root directory of this source tree. 130 | */ 131 | 132 | /** @license React v17.0.2 133 | * react-is.production.min.js 134 | * 135 | * Copyright (c) Facebook, Inc. and its affiliates. 136 | * 137 | * This source code is licensed under the MIT license found in the 138 | * LICENSE file in the root directory of this source tree. 139 | */ 140 | 141 | /** @license React v17.0.2 142 | * react-jsx-runtime.production.min.js 143 | * 144 | * Copyright (c) Facebook, Inc. and its affiliates. 145 | * 146 | * This source code is licensed under the MIT license found in the 147 | * LICENSE file in the root directory of this source tree. 148 | */ 149 | 150 | /** @license React v17.0.2 151 | * react.production.min.js 152 | * 153 | * Copyright (c) Facebook, Inc. and its affiliates. 154 | * 155 | * This source code is licensed under the MIT license found in the 156 | * LICENSE file in the root directory of this source tree. 157 | */ 158 | -------------------------------------------------------------------------------- /client/build/static/js/2.efe0c240.chunk.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /** 8 | * @license 9 | * Copyright 2017 Google LLC 10 | * 11 | * Licensed under the Apache License, Version 2.0 (the "License"); 12 | * you may not use this file except in compliance with the License. 13 | * You may obtain a copy of the License at 14 | * 15 | * http://www.apache.org/licenses/LICENSE-2.0 16 | * 17 | * Unless required by applicable law or agreed to in writing, software 18 | * distributed under the License is distributed on an "AS IS" BASIS, 19 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 20 | * See the License for the specific language governing permissions and 21 | * limitations under the License. 22 | */ 23 | 24 | /** 25 | * @license 26 | * Copyright 2019 Google LLC 27 | * 28 | * Licensed under the Apache License, Version 2.0 (the "License"); 29 | * you may not use this file except in compliance with the License. 30 | * You may obtain a copy of the License at 31 | * 32 | * http://www.apache.org/licenses/LICENSE-2.0 33 | * 34 | * Unless required by applicable law or agreed to in writing, software 35 | * distributed under the License is distributed on an "AS IS" BASIS, 36 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 37 | * See the License for the specific language governing permissions and 38 | * limitations under the License. 39 | */ 40 | 41 | /** 42 | * @license 43 | * Copyright 2020 Google LLC 44 | * 45 | * Licensed under the Apache License, Version 2.0 (the "License"); 46 | * you may not use this file except in compliance with the License. 47 | * You may obtain a copy of the License at 48 | * 49 | * http://www.apache.org/licenses/LICENSE-2.0 50 | * 51 | * Unless required by applicable law or agreed to in writing, software 52 | * distributed under the License is distributed on an "AS IS" BASIS, 53 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 54 | * See the License for the specific language governing permissions and 55 | * limitations under the License. 56 | */ 57 | 58 | /** 59 | * @license 60 | * Copyright 2021 Google LLC 61 | * 62 | * Licensed under the Apache License, Version 2.0 (the "License"); 63 | * you may not use this file except in compliance with the License. 64 | * You may obtain a copy of the License at 65 | * 66 | * http://www.apache.org/licenses/LICENSE-2.0 67 | * 68 | * Unless required by applicable law or agreed to in writing, software 69 | * distributed under the License is distributed on an "AS IS" BASIS, 70 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 71 | * See the License for the specific language governing permissions and 72 | * limitations under the License. 73 | */ 74 | 75 | /** 76 | * A better abstraction over CSS. 77 | * 78 | * @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present 79 | * @website https://github.com/cssinjs/jss 80 | * @license MIT 81 | */ 82 | 83 | /** 84 | * React Router DOM v6.0.2 85 | * 86 | * Copyright (c) Remix Software Inc. 87 | * 88 | * This source code is licensed under the MIT license found in the 89 | * LICENSE.md file in the root directory of this source tree. 90 | * 91 | * @license MIT 92 | */ 93 | 94 | /** 95 | * React Router v6.0.2 96 | * 97 | * Copyright (c) Remix Software Inc. 98 | * 99 | * This source code is licensed under the MIT license found in the 100 | * LICENSE.md file in the root directory of this source tree. 101 | * 102 | * @license MIT 103 | */ 104 | 105 | /** @license React v0.20.2 106 | * scheduler.production.min.js 107 | * 108 | * Copyright (c) Facebook, Inc. and its affiliates. 109 | * 110 | * This source code is licensed under the MIT license found in the 111 | * LICENSE file in the root directory of this source tree. 112 | */ 113 | 114 | /** @license React v16.13.1 115 | * react-is.production.min.js 116 | * 117 | * Copyright (c) Facebook, Inc. and its affiliates. 118 | * 119 | * This source code is licensed under the MIT license found in the 120 | * LICENSE file in the root directory of this source tree. 121 | */ 122 | 123 | /** @license React v17.0.2 124 | * react-dom.production.min.js 125 | * 126 | * Copyright (c) Facebook, Inc. and its affiliates. 127 | * 128 | * This source code is licensed under the MIT license found in the 129 | * LICENSE file in the root directory of this source tree. 130 | */ 131 | 132 | /** @license React v17.0.2 133 | * react-is.production.min.js 134 | * 135 | * Copyright (c) Facebook, Inc. and its affiliates. 136 | * 137 | * This source code is licensed under the MIT license found in the 138 | * LICENSE file in the root directory of this source tree. 139 | */ 140 | 141 | /** @license React v17.0.2 142 | * react-jsx-runtime.production.min.js 143 | * 144 | * Copyright (c) Facebook, Inc. and its affiliates. 145 | * 146 | * This source code is licensed under the MIT license found in the 147 | * LICENSE file in the root directory of this source tree. 148 | */ 149 | 150 | /** @license React v17.0.2 151 | * react.production.min.js 152 | * 153 | * Copyright (c) Facebook, Inc. and its affiliates. 154 | * 155 | * This source code is licensed under the MIT license found in the 156 | * LICENSE file in the root directory of this source tree. 157 | */ 158 | -------------------------------------------------------------------------------- /client/src/components/CenterContainer/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState, useRef } from "react"; 2 | // Material UI Icons 3 | import { PermMedia, Label, Room, EmojiEmotions } from "@material-ui/icons"; 4 | // Firebase 5 | import { 6 | getStorage, 7 | ref, 8 | uploadBytesResumable, 9 | getDownloadURL, 10 | } from "firebase/storage"; 11 | import app from "../../firebase"; 12 | // Axios 13 | import { publicRequest } from "../../requestMethods"; 14 | // Components 15 | import Post from "../Post"; 16 | // Redux 17 | import { useSelector } from "react-redux"; 18 | // React Router 19 | import { Link, useParams } from "react-router-dom"; 20 | // Styled Components 21 | import { 22 | AddFriendContainer, 23 | BottomPostContainer, 24 | Container, 25 | Friends, 26 | FriendTitle, 27 | LineContainer, 28 | List, 29 | ListItem, 30 | PostButton, 31 | PostContainer, 32 | PostInput, 33 | PostLine, 34 | ProfilePicture, 35 | TopPostContainer, 36 | } from "./CenterContainer.styles"; 37 | 38 | const CenterContainer = () => { 39 | const inputRef = useRef(); 40 | const user = useSelector((state) => state.user.currentUser); 41 | const params = useParams(); 42 | const [posts, setPosts] = useState([]); 43 | const [file, setFile] = useState(null); 44 | const [newPost, setNewPost] = useState(""); 45 | const userId = user._id; 46 | 47 | useEffect(() => { 48 | const getAllPost = async () => { 49 | try { 50 | const response = await publicRequest.get(`/posts/timeline/${userId}`); 51 | 52 | const sortedData = response.data.sort((a, b) => { 53 | const dateA = new Date(a.createdAt).getTime(); 54 | const dateB = new Date(b.createdAt).getTime(); 55 | 56 | return dateB - dateA; 57 | }); 58 | 59 | setPosts(sortedData); 60 | } catch (err) { 61 | console.log(err); 62 | } 63 | }; 64 | 65 | getAllPost(); 66 | }, []); 67 | 68 | const handleNewPost = async () => { 69 | if (file) { 70 | const fileName = new Date().getTime() + file.name; 71 | const storage = getStorage(app); 72 | const storageRef = ref(storage, fileName); 73 | 74 | const uploadTask = uploadBytesResumable(storageRef, file); 75 | 76 | // Register three observers: 77 | // 1. 'state_changed' observer, called any time the state changes 78 | // 2. Error observer, called on failure 79 | // 3. Completion observer, called on successful completion 80 | uploadTask.on( 81 | "state_changed", 82 | (snapshot) => { 83 | // Observe state change events such as progress, pause, and resume 84 | // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded 85 | const progress = 86 | (snapshot.bytesTransferred / snapshot.totalBytes) * 100; 87 | console.log("Upload is " + progress + "% done"); 88 | switch (snapshot.state) { 89 | case "paused": 90 | console.log("Upload is paused"); 91 | break; 92 | case "running": 93 | console.log("Upload is running"); 94 | break; 95 | default: 96 | } 97 | }, 98 | (error) => { 99 | // Handle unsuccessful uploads 100 | }, 101 | () => { 102 | // Handle successful uploads on complete 103 | // For instance, get the download URL: https://firebasestorage.googleapis.com/... 104 | getDownloadURL(uploadTask.snapshot.ref).then(async (downloadURL) => { 105 | const userId = user._id; 106 | 107 | const postDetails = { 108 | userId, 109 | desc: newPost, 110 | img: downloadURL, 111 | }; 112 | try { 113 | await publicRequest.post("/posts", postDetails); 114 | 115 | window.location.reload(false); 116 | } catch (err) { 117 | console.log(err); 118 | } 119 | }); 120 | } 121 | ); 122 | } else { 123 | const postDetails = { 124 | userId, 125 | desc: newPost, 126 | }; 127 | try { 128 | await publicRequest.post("/posts", postDetails); 129 | 130 | window.location.reload(false); 131 | } catch (err) { 132 | console.log(err); 133 | } 134 | } 135 | }; 136 | 137 | const handleFileInput = () => { 138 | inputRef.current.click(); 139 | }; 140 | 141 | return ( 142 | 143 | {(userId === params.id || params.id === undefined) && ( 144 | <> 145 | 146 | No Friends? Add these people first! 147 | 151 | Jane 152 | 153 | 157 | Ozkan Selcuk 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | setNewPost(event.target.value)} 171 | /> 172 | 173 | 174 | 175 | 176 | 177 | 178 | setFile(event.target.files[0])} 183 | /> 184 | 188 | Photo or Video 189 | 198 | Share 199 | 200 | 201 | 202 | )} 203 | {posts.map((post) => ( 204 | 214 | ))} 215 | 216 | ); 217 | }; 218 | 219 | export default CenterContainer; 220 | -------------------------------------------------------------------------------- /client/build/static/js/runtime-main.900dd88b.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../webpack/bootstrap"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","Object","prototype","hasOwnProperty","call","installedChunks","push","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","1","exports","module","l","m","c","d","name","getter","o","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","p","jsonpArray","this","oldJsonpFunction","slice"],"mappings":"aACE,SAASA,EAAqBC,GAQ7B,IAPA,IAMIC,EAAUC,EANVC,EAAWH,EAAK,GAChBI,EAAcJ,EAAK,GACnBK,EAAiBL,EAAK,GAIHM,EAAI,EAAGC,EAAW,GACpCD,EAAIH,EAASK,OAAQF,IACzBJ,EAAUC,EAASG,GAChBG,OAAOC,UAAUC,eAAeC,KAAKC,EAAiBX,IAAYW,EAAgBX,IACpFK,EAASO,KAAKD,EAAgBX,GAAS,IAExCW,EAAgBX,GAAW,EAE5B,IAAID,KAAYG,EACZK,OAAOC,UAAUC,eAAeC,KAAKR,EAAaH,KACpDc,EAAQd,GAAYG,EAAYH,IAKlC,IAFGe,GAAqBA,EAAoBhB,GAEtCO,EAASC,QACdD,EAASU,OAATV,GAOD,OAHAW,EAAgBJ,KAAKK,MAAMD,EAAiBb,GAAkB,IAGvDe,IAER,SAASA,IAER,IADA,IAAIC,EACIf,EAAI,EAAGA,EAAIY,EAAgBV,OAAQF,IAAK,CAG/C,IAFA,IAAIgB,EAAiBJ,EAAgBZ,GACjCiB,GAAY,EACRC,EAAI,EAAGA,EAAIF,EAAed,OAAQgB,IAAK,CAC9C,IAAIC,EAAQH,EAAeE,GACG,IAA3BX,EAAgBY,KAAcF,GAAY,GAE3CA,IACFL,EAAgBQ,OAAOpB,IAAK,GAC5Be,EAASM,EAAoBA,EAAoBC,EAAIN,EAAe,KAItE,OAAOD,EAIR,IAAIQ,EAAmB,GAKnBhB,EAAkB,CACrBiB,EAAG,GAGAZ,EAAkB,GAGtB,SAASS,EAAoB1B,GAG5B,GAAG4B,EAAiB5B,GACnB,OAAO4B,EAAiB5B,GAAU8B,QAGnC,IAAIC,EAASH,EAAiB5B,GAAY,CACzCK,EAAGL,EACHgC,GAAG,EACHF,QAAS,IAUV,OANAhB,EAAQd,GAAUW,KAAKoB,EAAOD,QAASC,EAAQA,EAAOD,QAASJ,GAG/DK,EAAOC,GAAI,EAGJD,EAAOD,QAKfJ,EAAoBO,EAAInB,EAGxBY,EAAoBQ,EAAIN,EAGxBF,EAAoBS,EAAI,SAASL,EAASM,EAAMC,GAC3CX,EAAoBY,EAAER,EAASM,IAClC5B,OAAO+B,eAAeT,EAASM,EAAM,CAAEI,YAAY,EAAMC,IAAKJ,KAKhEX,EAAoBgB,EAAI,SAASZ,GACX,qBAAXa,QAA0BA,OAAOC,aAC1CpC,OAAO+B,eAAeT,EAASa,OAAOC,YAAa,CAAEC,MAAO,WAE7DrC,OAAO+B,eAAeT,EAAS,aAAc,CAAEe,OAAO,KAQvDnB,EAAoBoB,EAAI,SAASD,EAAOE,GAEvC,GADU,EAAPA,IAAUF,EAAQnB,EAAoBmB,IAC/B,EAAPE,EAAU,OAAOF,EACpB,GAAW,EAAPE,GAA8B,kBAAVF,GAAsBA,GAASA,EAAMG,WAAY,OAAOH,EAChF,IAAII,EAAKzC,OAAO0C,OAAO,MAGvB,GAFAxB,EAAoBgB,EAAEO,GACtBzC,OAAO+B,eAAeU,EAAI,UAAW,CAAET,YAAY,EAAMK,MAAOA,IACtD,EAAPE,GAA4B,iBAATF,EAAmB,IAAI,IAAIM,KAAON,EAAOnB,EAAoBS,EAAEc,EAAIE,EAAK,SAASA,GAAO,OAAON,EAAMM,IAAQC,KAAK,KAAMD,IAC9I,OAAOF,GAIRvB,EAAoB2B,EAAI,SAAStB,GAChC,IAAIM,EAASN,GAAUA,EAAOiB,WAC7B,WAAwB,OAAOjB,EAAgB,SAC/C,WAA8B,OAAOA,GAEtC,OADAL,EAAoBS,EAAEE,EAAQ,IAAKA,GAC5BA,GAIRX,EAAoBY,EAAI,SAASgB,EAAQC,GAAY,OAAO/C,OAAOC,UAAUC,eAAeC,KAAK2C,EAAQC,IAGzG7B,EAAoB8B,EAAI,IAExB,IAAIC,EAAaC,KAAyB,mBAAIA,KAAyB,oBAAK,GACxEC,EAAmBF,EAAW5C,KAAKuC,KAAKK,GAC5CA,EAAW5C,KAAOf,EAClB2D,EAAaA,EAAWG,QACxB,IAAI,IAAIvD,EAAI,EAAGA,EAAIoD,EAAWlD,OAAQF,IAAKP,EAAqB2D,EAAWpD,IAC3E,IAAIU,EAAsB4C,EAI1BxC,I","file":"static/js/runtime-main.900dd88b.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t1: 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/\";\n\n \tvar jsonpArray = this[\"webpackJsonpclient\"] = this[\"webpackJsonpclient\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// run deferred modules from other chunks\n \tcheckDeferredModules();\n"],"sourceRoot":""} -------------------------------------------------------------------------------- /client/src/pages/UserPage/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState, useRef } from "react"; 2 | // Firebase 3 | import { 4 | getStorage, 5 | ref, 6 | uploadBytesResumable, 7 | getDownloadURL, 8 | } from "firebase/storage"; 9 | import app from "../../firebase"; 10 | // Components 11 | import LeftContainer from "../../components/LeftContainer"; 12 | import CenterContainer from "../../components/CenterContainer"; 13 | import Navbar from "../../components/Navbar"; 14 | import RightContainer from "../../components/RightContainer"; 15 | // Axios 16 | import { publicRequest } from "../../requestMethods"; 17 | // React Router 18 | import { useParams } from "react-router-dom"; 19 | // Styled Components 20 | import { 21 | BottomContainer, 22 | Container, 23 | CoverPhoto, 24 | ProfilePicture, 25 | RightPageContainer, 26 | SubmitButton, 27 | UserContainer, 28 | UserInfoContainer, 29 | UserMessage, 30 | Username, 31 | } from "./UserPage.styles"; 32 | import { useSelector } from "react-redux"; 33 | 34 | const UserPage = () => { 35 | const initialState = { 36 | username: "", 37 | profilePicture: "", 38 | coverPicture: "", 39 | city: "", 40 | from: "", 41 | realationShip: "", 42 | }; 43 | 44 | const params = useParams(); 45 | const userId = params.id; 46 | const currentUser = useSelector((state) => state.user.currentUser._id); 47 | 48 | const [user, setUser] = useState(initialState); 49 | const [file, setFile] = useState(null); 50 | const inputRef = useRef(); 51 | 52 | useEffect(() => { 53 | const getUser = async () => { 54 | try { 55 | const response = await publicRequest.get(`/users/${userId}`); 56 | 57 | console.log(response.data); 58 | setUser(response.data); 59 | } catch (err) { 60 | console.log(err); 61 | } 62 | }; 63 | 64 | getUser(); 65 | }, []); 66 | 67 | const handleProfilePicture = async () => { 68 | const fileName = new Date().getTime() + file.name; 69 | const storage = getStorage(app); 70 | const storageRef = ref(storage, fileName); 71 | 72 | const uploadTask = uploadBytesResumable(storageRef, file); 73 | 74 | // Register three observers: 75 | // 1. 'state_changed' observer, called any time the state changes 76 | // 2. Error observer, called on failure 77 | // 3. Completion observer, called on successful completion 78 | uploadTask.on( 79 | "state_changed", 80 | (snapshot) => { 81 | // Observe state change events such as progress, pause, and resume 82 | // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded 83 | const progress = 84 | (snapshot.bytesTransferred / snapshot.totalBytes) * 100; 85 | console.log("Upload is " + progress + "% done"); 86 | switch (snapshot.state) { 87 | case "paused": 88 | console.log("Upload is paused"); 89 | break; 90 | case "running": 91 | console.log("Upload is running"); 92 | break; 93 | default: 94 | } 95 | }, 96 | (error) => { 97 | // Handle unsuccessful uploads 98 | }, 99 | () => { 100 | // Handle successful uploads on complete 101 | // For instance, get the download URL: https://firebasestorage.googleapis.com/... 102 | getDownloadURL(uploadTask.snapshot.ref).then(async (downloadURL) => { 103 | const userId = user._id; 104 | 105 | const postDetails = { 106 | userId, 107 | profilePicture: downloadURL, 108 | }; 109 | try { 110 | await publicRequest.put(`/users/${userId}`, postDetails); 111 | 112 | window.location.reload(false); 113 | } catch (err) { 114 | console.log(err); 115 | } 116 | }); 117 | } 118 | ); 119 | }; 120 | 121 | const handleCoverPicture = async () => { 122 | const fileName = new Date().getTime() + file.name; 123 | const storage = getStorage(app); 124 | const storageRef = ref(storage, fileName); 125 | 126 | const uploadTask = uploadBytesResumable(storageRef, file); 127 | 128 | // Register three observers: 129 | // 1. 'state_changed' observer, called any time the state changes 130 | // 2. Error observer, called on failure 131 | // 3. Completion observer, called on successful completion 132 | uploadTask.on( 133 | "state_changed", 134 | (snapshot) => { 135 | // Observe state change events such as progress, pause, and resume 136 | // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded 137 | const progress = 138 | (snapshot.bytesTransferred / snapshot.totalBytes) * 100; 139 | console.log("Upload is " + progress + "% done"); 140 | switch (snapshot.state) { 141 | case "paused": 142 | console.log("Upload is paused"); 143 | break; 144 | case "running": 145 | console.log("Upload is running"); 146 | break; 147 | default: 148 | } 149 | }, 150 | (error) => { 151 | // Handle unsuccessful uploads 152 | }, 153 | () => { 154 | // Handle successful uploads on complete 155 | // For instance, get the download URL: https://firebasestorage.googleapis.com/... 156 | getDownloadURL(uploadTask.snapshot.ref).then(async (downloadURL) => { 157 | const userId = user._id; 158 | 159 | const postDetails = { 160 | userId, 161 | coverPicture: downloadURL, 162 | }; 163 | try { 164 | await publicRequest.put(`/users/${userId}`, postDetails); 165 | 166 | window.location.reload(false); 167 | } catch (err) { 168 | console.log(err); 169 | } 170 | }); 171 | } 172 | ); 173 | }; 174 | 175 | const handleFileInput = () => { 176 | inputRef.current.click(); 177 | }; 178 | 179 | return ( 180 | <> 181 | 182 | 183 | 184 | {user && ( 185 | 186 | 187 | 188 | 189 | 190 | 191 | {user.username.charAt(0).toUpperCase() + 192 | user.username.slice(1)} 193 | 194 | {user.desc} 195 | 196 | 197 | setFile(event.target.files[0])} 202 | /> 203 | {userId === currentUser && ( 204 | <> 205 | Add Photo 206 | 207 | Change Profile Picture 208 | 209 | 210 | Change Cover Image 211 | 212 | 213 | )} 214 | 215 | 216 | 222 | 223 | 224 | )} 225 | 226 | 227 | ); 228 | }; 229 | 230 | export default UserPage; 231 | -------------------------------------------------------------------------------- /client/build/static/js/main.0a0cd988.chunk.js: -------------------------------------------------------------------------------- 1 | (this.webpackJsonpclient=this.webpackJsonpclient||[]).push([[0],{98:function(e,n,t){"use strict";t.r(n);var r,c,i,a,o,s,l,d,j,p,b,x,u,h,f,O,g,m,w,v,y,k,z,S,C,D,P,H,M,A,B,U,F,G,I,q,T,V,W,_,Y,E,J,L,R,$,N,Z,K,Q,X,ee,ne,te,re,ce,ie,ae,oe,se,le,de,je,pe,be,xe,ue,he,fe,Oe,ge,me,we,ve,ye,ke,ze,Se,Ce,De,Pe,He,Me,Ae,Be,Ue,Fe,Ge,Ie,qe,Te,Ve,We,_e,Ye,Ee,Je,Le,Re,$e,Ne,Ze,Ke,Qe,Xe,en,nn,tn,rn,cn=t(1),an=t(42),on=t.n(an),sn=t(15),ln=t(18),dn=t(7),jn=t(5),pn=t.n(jn),bn=t(10),xn=t(9),un=t(111),hn=t(112),fn=t(113),On=t(114),gn=t(20),mn=t(58),wn=Object(mn.a)({apiKey:"AIzaSyCOvTYeicrCgrs52TV-ApqesUAGeWf-V2A",authDomain:"shop-e412d.firebaseapp.com",projectId:"shop-e412d",storageBucket:"shop-e412d.appspot.com",messagingSenderId:"379033798897",appId:"1:379033798897:web:195de3b1bb5485100dc150"}),vn=wn,yn=t(47),kn=t.n(yn),zn="https://social-media-mern-applications.herokuapp.com/api/",Sn=kn.a.create({baseURL:zn}),Cn=(kn.a.create({baseURL:zn}),t(64)),Dn=t.p+"static/media/like.be1d10c9.png",Pn=t.p+"static/media/heart.d03a6207.png",Hn=t(110),Mn=t(2),An=t(3),Bn=An.a.div(r||(r=Object(Mn.a)(["\n width: 90%;\n margin-bottom: 50px;\n display: flex;\n flex-direction: column;\n background-color: white;\n border-radius: 10px;\n"]))),Un=An.a.div(c||(c=Object(Mn.a)(["\n display: flex;\n justify-content: space-between;\n margin-top: 20px;\n"]))),Fn=An.a.div(i||(i=Object(Mn.a)(["\n display: flex;\n align-items: center;\n margin-left: 20px;\n"]))),Gn=An.a.img(a||(a=Object(Mn.a)(["\n width: 50px;\n height: 50px;\n border-radius: 50%;\n object-fit: cover;\n cursor: pointer;\n"]))),In=An.a.span(o||(o=Object(Mn.a)(["\n font-size: 18px;\n margin-left: 10px;\n font-weight: 600;\n cursor: pointer;\n"]))),qn=An.a.span(s||(s=Object(Mn.a)(["\n font-size: 13px;\n margin-left: 10px;\n"]))),Tn=An.a.div(l||(l=Object(Mn.a)(["\n margin: 0px 5px;\n"]))),Vn=An.a.div(d||(d=Object(Mn.a)(["\n margin: 20px 0px 20px 20px;\n"]))),Wn=An.a.span(j||(j=Object(Mn.a)(["\n margin-bottom: 20px;\n"]))),_n=An.a.img(p||(p=Object(Mn.a)(["\n width: 95%;\n height: 90%;\n object-fit: cover;\n margin-top: 20px;\n"]))),Yn=An.a.div(b||(b=Object(Mn.a)(["\n display: flex;\n justify-content: space-between;\n margin: 0px 20px;\n margin-bottom: 20px;\n"]))),En=An.a.div(x||(x=Object(Mn.a)(["\n display: flex;\n align-items: center;\n"]))),Jn=An.a.img(u||(u=Object(Mn.a)(["\n width: 25px;\n height: 25px;\n border-radius: 50%;\n object-fit: cover;\n cursor: pointer;\n margin-right: 7px;\n"]))),Ln=An.a.img(h||(h=Object(Mn.a)(["\n width: 25px;\n height: 25px;\n border-radius: 50%;\n object-fit: cover;\n cursor: pointer;\n"]))),Rn=An.a.span(f||(f=Object(Mn.a)(["\n margin-left: 10px;\n font-weight: 500;\n"]))),$n=An.a.span(O||(O=Object(Mn.a)(["\n cursor: pointer;\n text-decoration: underline;\n"]))),Nn=t(0),Zn=function(e){var n=e.desc,t=e.photo,r=e.date,c=e.userId,i=e.like,a=e.comment,o=e.id,s=Object(cn.useState)(null),l=Object(xn.a)(s,2),d=l[0],j=l[1],p=Object(cn.useState)(i),b=Object(xn.a)(p,2),x=b[0],u=b[1],h=Object(cn.useState)(!1),f=Object(xn.a)(h,2),O=f[0],g=f[1],m=function(){var e=Object(bn.a)(pn.a.mark((function e(){return pn.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return u(O?x-1:x+1),g(!O),e.prev=2,e.next=5,Sn.put("/posts/".concat(o,"/like"),{userId:c});case 5:e.next=10;break;case 7:e.prev=7,e.t0=e.catch(2),console.log(e.t0);case 10:case"end":return e.stop()}}),e,null,[[2,7]])})));return function(){return e.apply(this,arguments)}}();return Object(cn.useEffect)((function(){(function(){var e=Object(bn.a)(pn.a.mark((function e(){var n;return pn.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,e.next=3,Sn.get("/users/".concat(c));case 3:n=e.sent,j(n.data),e.next=10;break;case 7:e.prev=7,e.t0=e.catch(0),console.log(e.t0);case 10:case"end":return e.stop()}}),e,null,[[0,7]])})));return function(){return e.apply(this,arguments)}})()()}),[]),Object(Nn.jsxs)(Bn,{children:[Object(Nn.jsxs)(Un,{children:[Object(Nn.jsxs)(Fn,{children:[d&&Object(Nn.jsxs)(Nn.Fragment,{children:[Object(Nn.jsx)(ln.b,{to:"/user/".concat(c),children:Object(Nn.jsx)(Gn,{src:d.profilePicture})}),Object(Nn.jsx)(ln.b,{to:"/user/".concat(c),style:{textDecoration:"none",color:"black"},children:Object(Nn.jsx)(In,{children:d.username.charAt(0).toUpperCase()+d.username.slice(1)})})]}),Object(Nn.jsx)(qn,{children:Object(Cn.a)(r)})]}),Object(Nn.jsx)(Tn,{children:Object(Nn.jsx)(Hn.a,{style:{cursor:"pointer"}})})]}),Object(Nn.jsxs)(Vn,{children:[Object(Nn.jsx)(Wn,{children:n}),t&&Object(Nn.jsx)(_n,{src:t})]}),Object(Nn.jsxs)(Yn,{children:[Object(Nn.jsxs)(En,{children:[Object(Nn.jsx)(Jn,{src:Dn,onClick:m}),Object(Nn.jsx)(Ln,{src:Pn,onClick:m}),Object(Nn.jsxs)(Rn,{children:[x," people like it"]})]}),Object(Nn.jsx)($n,{children:a?"".concat(a," comments"):"0 comment"})]})]})},Kn=An.a.div(g||(g=Object(Mn.a)(["\n flex: 3;\n display: flex;\n flex-direction: column;\n align-items: center;\n \n"]))),Qn=An.a.div(m||(m=Object(Mn.a)(["\n display: flex;\n flex-direction: column;\n margin: 10px 0px;\n text-align:center;\n"]))),Xn=An.a.h1(w||(w=Object(Mn.a)(["\n font-size: 24px;\n font-weight: 400;\n margin: 5px 0px;\n"]))),et=An.a.span(v||(v=Object(Mn.a)(["\n font-size: 18px;\n margin: 2px 0px;\n cursor:pointer;\n"]))),nt=An.a.div(y||(y=Object(Mn.a)(["\n width: 90%;\n height: 200px;\n margin-top: 25px;\n margin-bottom: 50px;\n background-color: white;\n display: flex;\n flex-direction: column;\n"]))),tt=An.a.div(k||(k=Object(Mn.a)(["\n margin-top: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n"]))),rt=An.a.img(z||(z=Object(Mn.a)(["\n width: 50px;\n height: 50px;\n border-radius: 50%;\n object-fit: cover;\n margin-left: 20px;\n"]))),ct=An.a.input(S||(S=Object(Mn.a)(["\n width: 90%;\n margin-left: 20px;\n font-size: 18px;\n border: none;\n outline: none;\n"]))),it=An.a.div(C||(C=Object(Mn.a)(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 25px 0px;\n"]))),at=An.a.div(D||(D=Object(Mn.a)(["\n width: 90%;\n height: 0.1px;\n background-color: #a1a1a1;\n"]))),ot=An.a.div(P||(P=Object(Mn.a)(["\n display: flex;\n justify-content: space-between;\n margin: 10px 50px;\n"]))),st=An.a.ul(H||(H=Object(Mn.a)(["\n display: flex;\n align-items: center;\n list-style: none;\n"]))),lt=An.a.li(M||(M=Object(Mn.a)(["\n margin-left: 2px;\n margin-right: 25px;\n font-size: 18px;\n cursor: pointer;\n"]))),dt=An.a.button(A||(A=Object(Mn.a)(["\n background-color: green;\n color: white;\n font-size: 16px;\n border: none;\n border-radius: 5px;\n width: 70px;\n height: 35px;\n cursor: pointer;\n"]))),jt=function(){var e=Object(cn.useRef)(),n=Object(sn.c)((function(e){return e.user.currentUser})),t=Object(dn.h)(),r=Object(cn.useState)([]),c=Object(xn.a)(r,2),i=c[0],a=c[1],o=Object(cn.useState)(null),s=Object(xn.a)(o,2),l=s[0],d=s[1],j=Object(cn.useState)(""),p=Object(xn.a)(j,2),b=p[0],x=p[1],u=n._id;Object(cn.useEffect)((function(){(function(){var e=Object(bn.a)(pn.a.mark((function e(){var n,t;return pn.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,e.next=3,Sn.get("/posts/timeline/".concat(u));case 3:n=e.sent,t=n.data.sort((function(e,n){var t=new Date(e.createdAt).getTime();return new Date(n.createdAt).getTime()-t})),a(t),e.next=11;break;case 8:e.prev=8,e.t0=e.catch(0),console.log(e.t0);case 11:case"end":return e.stop()}}),e,null,[[0,8]])})));return function(){return e.apply(this,arguments)}})()()}),[]);var h=function(){var e=Object(bn.a)(pn.a.mark((function e(){var t,r,c,i,a;return pn.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(!l){e.next=8;break}t=(new Date).getTime()+l.name,r=Object(gn.b)(vn),c=Object(gn.c)(r,t),(i=Object(gn.d)(c,l)).on("state_changed",(function(e){var n=e.bytesTransferred/e.totalBytes*100;switch(console.log("Upload is "+n+"% done"),e.state){case"paused":console.log("Upload is paused");break;case"running":console.log("Upload is running")}}),(function(e){}),(function(){Object(gn.a)(i.snapshot.ref).then(function(){var e=Object(bn.a)(pn.a.mark((function e(t){var r,c;return pn.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return r=n._id,c={userId:r,desc:b,img:t},e.prev=2,e.next=5,Sn.post("/posts",c);case 5:window.location.reload(!1),e.next=11;break;case 8:e.prev=8,e.t0=e.catch(2),console.log(e.t0);case 11:case"end":return e.stop()}}),e,null,[[2,8]])})));return function(n){return e.apply(this,arguments)}}())})),e.next=18;break;case 8:return a={userId:u,desc:b},e.prev=9,e.next=12,Sn.post("/posts",a);case 12:window.location.reload(!1),e.next=18;break;case 15:e.prev=15,e.t0=e.catch(9),console.log(e.t0);case 18:case"end":return e.stop()}}),e,null,[[9,15]])})));return function(){return e.apply(this,arguments)}}(),f=function(){e.current.click()};return Object(Nn.jsxs)(Kn,{children:[(u===t.id||void 0===t.id)&&Object(Nn.jsxs)(Nn.Fragment,{children:[Object(Nn.jsxs)(Qn,{children:[Object(Nn.jsx)(Xn,{children:"No Friends? Add these people first!"}),Object(Nn.jsx)(ln.b,{style:{textDecoration:"none",color:"black"},to:"/user/61b9245908565465138e85bd",children:Object(Nn.jsx)(et,{children:"Jane"})}),Object(Nn.jsx)(ln.b,{style:{textDecoration:"none",color:"black"},to:"/user/61b25fce2cd53769d8abb7c1",children:Object(Nn.jsx)(et,{children:"Ozkan Selcuk"})})]}),Object(Nn.jsxs)(nt,{children:[Object(Nn.jsxs)(tt,{children:[Object(Nn.jsx)(ln.b,{to:"/user/".concat(n._id),children:Object(Nn.jsx)(rt,{src:n.profilePicture})}),Object(Nn.jsx)(ct,{placeholder:"What's in your mind ".concat(n.username.charAt(0).toUpperCase()+n.username.slice(1),"?"),value:b,onChange:function(e){return x(e.target.value)}})]}),Object(Nn.jsx)(it,{children:Object(Nn.jsx)(at,{})}),Object(Nn.jsxs)(ot,{children:[Object(Nn.jsxs)(st,{children:[Object(Nn.jsx)("input",{type:"file",ref:e,style:{display:"none"},onChange:function(e){return d(e.target.files[0])}}),Object(Nn.jsx)(un.a,{onClick:f,style:{color:"tomato",cursor:"pointer"}}),Object(Nn.jsx)(lt,{onClick:f,children:"Photo or Video"}),Object(Nn.jsx)(hn.a,{style:{color:"blue",cursor:"pointer"}}),Object(Nn.jsx)(lt,{children:"Tag"}),Object(Nn.jsx)(fn.a,{style:{color:"green",cursor:"pointer"}}),Object(Nn.jsx)(lt,{children:"Location"}),Object(Nn.jsx)(On.a,{style:{color:"goldenrod",cursor:"pointer"}}),Object(Nn.jsx)(lt,{children:"Feelings"})]}),Object(Nn.jsx)(dt,{onClick:h,children:"Share"})]})]})]}),i.map((function(e){return Object(Nn.jsx)(Zn,{id:e._id,desc:e.desc,photo:e.img,date:e.createdAt,userId:e.userId,like:e.likes.length,comment:e.comment},e._id)}))]})},pt=t(115),bt=t(116),xt=t(117),ut=t(118),ht=t(119),ft=t(120),Ot=t(121),gt=t(122),mt=t(123),wt=[{id:1,profilePicture:"https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",username:"Ozkan Selcuk"},{id:2,profilePicture:"https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80",username:"Janell Shrum"},{id:3,profilePicture:"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",username:"Alex Durden"},{id:4,profilePicture:"https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",username:"Dora Hawks"},{id:5,profilePicture:"https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",username:"Thomas Holden"},{id:6,profilePicture:"https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",username:"Shirley Beauchamp"},{id:7,profilePicture:"https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",username:"Travis Bennett"},{id:8,profilePicture:"https://images.unsplash.com/photo-1533227268428-f9ed0900fb3b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=971&q=80",username:"Kristen Thomas"},{id:9,profilePicture:"https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",username:"Gary Duty"},{id:10,profilePicture:"https://images.unsplash.com/photo-1504439904031-93ded9f93e4e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=736&q=80",username:"Jane Iverson"}],vt=An.a.div(B||(B=Object(Mn.a)(["\n flex: 1;\n height: calc(100vh - 70px);\n top: 50px;\n position: sticky;\n overflow-y: scroll;\n width: 300px;\n z-index: 998;\n\n ::-webkit-scrollbar {\n width: 5px;\n }\n ::-webkit-scrollbar-track {\n background-color: #f1f1f1;\n }\n ::-webkit-scrollbar-thumb {\n background-color: rgb(179, 179, 179);\n }\n"]))),yt=An.a.div(U||(U=Object(Mn.a)(["\n margin-top: 20px;\n margin-left: 20px;\n"]))),kt=An.a.ul(F||(F=Object(Mn.a)(["\n list-style: none;\n"]))),zt=An.a.li(G||(G=Object(Mn.a)(["\n margin-bottom: 20px;\n display: flex;\n cursor: pointer;\n height: 27px;\n\n &:hover {\n background-color: #d6d6d6;\n border-radius: 5px;\n }\n"]))),St=An.a.div(I||(I=Object(Mn.a)(["\n font-size: 20px;\n margin-left: 10px;\n"]))),Ct=An.a.button(q||(q=Object(Mn.a)(["\n border: none;\n border-radius: 5px;\n background-color: #d4d4d4;\n font-size: 16px;\n font-weight: 500;\n width: 120px;\n height: 40px;\n cursor: pointer;\n"]))),Dt=An.a.div(T||(T=Object(Mn.a)(["\n display: flex;\n align-items: center;\n height: 50px;\n margin-left: 20px;\n"]))),Pt=An.a.div(V||(V=Object(Mn.a)(["\n width: 90%;\n height: 0.5px;\n background-color: black;\n"]))),Ht=An.a.div(W||(W=Object(Mn.a)(["\n margin-left: 20px;\n"]))),Mt=An.a.div(_||(_=Object(Mn.a)(["\n height: 50px;\n width: 100%;\n display: flex;\n align-items: center;\n position: relative;\n cursor: pointer;\n margin-bottom: 5px;\n"]))),At=An.a.img(Y||(Y=Object(Mn.a)(["\n width: 40px;\n height: 40px;\n border-radius: 50%;\n margin-right: 10px;\n object-fit: cover;\n"]))),Bt=An.a.span(E||(E=Object(Mn.a)(["\n font-size: 18px;\n"]))),Ut=An.a.div(J||(J=Object(Mn.a)(["\n position: absolute;\n background-color: #00b600;\n width: 12px;\n height: 12px;\n border: 0.3px solid white;\n border-radius: 50%;\n left: 27px;\n top: 2px;\n"]))),Ft=function(e){var n=e.name,t=e.image,r=e.online;return Object(Nn.jsxs)(Mt,{children:[Object(Nn.jsx)(At,{src:t}),Object(Nn.jsx)(Bt,{children:n}),"online"===r&&Object(Nn.jsx)(Ut,{})]})},Gt=function(){return Object(Nn.jsxs)(vt,{children:[Object(Nn.jsxs)(yt,{children:[Object(Nn.jsxs)(kt,{children:[Object(Nn.jsxs)(zt,{children:[Object(Nn.jsx)(pt.a,{}),Object(Nn.jsx)(St,{children:"Feed"})]}),Object(Nn.jsxs)(zt,{children:[Object(Nn.jsx)(bt.a,{}),Object(Nn.jsx)(St,{children:"Chats"})]}),Object(Nn.jsxs)(zt,{children:[Object(Nn.jsx)(xt.a,{}),Object(Nn.jsx)(St,{children:"Videos"})]}),Object(Nn.jsxs)(zt,{children:[Object(Nn.jsx)(ut.a,{}),Object(Nn.jsx)(St,{children:"Groups"})]}),Object(Nn.jsxs)(zt,{children:[Object(Nn.jsx)(ht.a,{}),Object(Nn.jsx)(St,{children:"Bookmarks"})]}),Object(Nn.jsxs)(zt,{children:[Object(Nn.jsx)(ft.a,{}),Object(Nn.jsx)(St,{children:"Questions"})]}),Object(Nn.jsxs)(zt,{children:[Object(Nn.jsx)(Ot.a,{}),Object(Nn.jsx)(St,{children:"Jobs"})]}),Object(Nn.jsxs)(zt,{children:[Object(Nn.jsx)(gt.a,{}),Object(Nn.jsx)(St,{children:"Events"})]}),Object(Nn.jsxs)(zt,{children:[Object(Nn.jsx)(mt.a,{}),Object(Nn.jsx)(St,{children:"Courses"})]})]}),Object(Nn.jsx)(Ct,{children:"Show More"})]}),Object(Nn.jsx)(Dt,{children:Object(Nn.jsx)(Pt,{})}),Object(Nn.jsx)(Ht,{children:wt.map((function(e){return Object(Nn.jsx)(Ft,{name:e.username,image:e.profilePicture},e.id)}))})]})},It=t(124),qt=t(125),Tt=t(126),Vt=t(127),Wt=An.a.div(L||(L=Object(Mn.a)(["\n height: 50px;\n width: 100%;\n background-color: #4267b2;\n display: flex;\n align-items: center;\n position: sticky;\n top: 0;\n z-index: 999;\n"]))),_t=An.a.div(R||(R=Object(Mn.a)(["\n flex: 1;\n margin-left: 20px;\n"]))),Yt=An.a.h1($||($=Object(Mn.a)(["\n font-size: 24px;\n color: white;\n cursor: pointer;\n width: max-content;\n"]))),Et=An.a.div(N||(N=Object(Mn.a)(["\n flex: 2;\n display: flex;\n align-items: center;\n"]))),Jt=An.a.div(Z||(Z=Object(Mn.a)(["\n padding: 0 10px;\n align-items: center;\n border-radius: 30px;\n width: 70%;\n height: 30px;\n background-color: white;\n display: flex;\n"]))),Lt=An.a.input(K||(K=Object(Mn.a)(["\n width: 90%;\n border: none;\n outline: none;\n margin-left: 10px;\n font-size: 16px;\n"]))),Rt=An.a.span(Q||(Q=Object(Mn.a)(["\n color: white;\n margin-left: 15px;\n font-size: 17px;\n cursor: pointer;\n"]))),$t=An.a.div(X||(X=Object(Mn.a)(["\n flex: 0.5;\n margin-right: 20px;\n display: flex;\n align-items: center;\n"]))),Nt=An.a.div(ee||(ee=Object(Mn.a)(["\n color: white;\n font-size: 40px;\n cursor: pointer;\n margin-right: 10px;\n position: relative;\n"]))),Zt=An.a.div(ne||(ne=Object(Mn.a)(["\n position: absolute;\n top: 5px;\n right: -4px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n width: 15px;\n height: 15px;\n background-color: crimson;\n border-radius: 50%;\n"]))),Kt=An.a.img(te||(te=Object(Mn.a)(["\n width: 40px;\n height: 40px;\n border-radius: 50%;\n object-fit: cover;\n margin-left: 50px;\n cursor: pointer;\n"]))),Qt=t(44),Xt=t(17),er=Object(Xt.b)(),nr=Object(Qt.b)({name:"user",initialState:{currentUser:null,isFetching:!1,error:!1},reducers:{loginStart:function(e){e.isFetching=!0},loginSuccess:function(e,n){e.isFetching=!1,e.error=!1,e.currentUser=n.payload,er.push("/"),er.go(0)},loginFailure:function(e){e.isFetching=!1,e.error=!0},logout:function(e){e.currentUser=null,e.error=!1},registerStart:function(e){e.isFetching=!0},registerSuccess:function(e,n){e.isFetching=!1,e.currentUser=n.payload,e.error=!1,er.push("/"),er.go(0)},registerFailure:function(e){e.isFetching=!1,e.error=!0}}}),tr=nr.actions,rr=tr.loginStart,cr=tr.loginSuccess,ir=tr.loginFailure,ar=tr.logout,or=tr.registerStart,sr=tr.registerSuccess,lr=tr.registerFailure,dr=nr.reducer,jr=function(){var e=Object(sn.b)(),n=Object(sn.c)((function(e){return e.user.currentUser}));return Object(Nn.jsxs)(Wt,{children:[Object(Nn.jsx)(_t,{children:Object(Nn.jsx)(ln.b,{to:"/",style:{textDecoration:"none"},children:Object(Nn.jsx)(Yt,{children:"Ozkan's Social"})})}),Object(Nn.jsxs)(Et,{children:[Object(Nn.jsxs)(Jt,{children:[Object(Nn.jsx)(It.a,{}),Object(Nn.jsx)(Lt,{placeholder:"Search for friend, post or video"})]}),Object(Nn.jsx)(Rt,{children:"Homepage"}),Object(Nn.jsx)(Rt,{children:"Timeline"})]}),Object(Nn.jsxs)($t,{children:[Object(Nn.jsxs)(Nt,{children:[Object(Nn.jsx)(Zt,{children:"1"}),Object(Nn.jsx)(qt.a,{style:{fontSize:"28px"}})]}),Object(Nn.jsxs)(Nt,{children:[Object(Nn.jsx)(Zt,{children:"5"}),Object(Nn.jsx)(Tt.a,{style:{fontSize:"28px"}})]}),Object(Nn.jsxs)(Nt,{children:[Object(Nn.jsx)(Zt,{children:"2"}),Object(Nn.jsx)(Vt.a,{style:{fontSize:"28px"}})]}),Object(Nn.jsx)(ln.b,{to:"/user/".concat(n._id),children:Object(Nn.jsx)(Kt,{src:n.profilePicture})}),Object(Nn.jsx)(Rt,{onClick:function(){e(ar())},children:"Logout"})]})]})},pr=t.p+"static/media/gift.4a9c4d62.png",br=t.p+"static/media/ad.833b6750.png",xr=An.a.div(re||(re=Object(Mn.a)(["\n flex: 1;\n padding: 20px;\n"]))),ur=An.a.div(ce||(ce=Object(Mn.a)(["\n display: flex;\n align-items: center;\n"]))),hr=An.a.img(ie||(ie=Object(Mn.a)(["\n width: 40px;\n height: 42px;\n margin-right: 10px;\n"]))),fr=An.a.span(ae||(ae=Object(Mn.a)(["\n font-size: 18px;\n"]))),Or=An.a.div(oe||(oe=Object(Mn.a)(["\n margin: 20px 0px;\n"]))),gr=An.a.img(se||(se=Object(Mn.a)(["\n width: 450px;\n height: 300px;\n border-radius: 30px;\n"]))),mr=An.a.div(le||(le=Object(Mn.a)(["\n margin-top: 20px;\n"]))),wr=An.a.span(de||(de=Object(Mn.a)(["\n font-size: 24px;\n font-weight: 500;\n"]))),vr=An.a.div(je||(je=Object(Mn.a)(["\n margin: 20px 0px;\n\n"]))),yr=An.a.button(pe||(pe=Object(Mn.a)(["\n background-color: blue;\n color: white;\n font-size: 16px;\n border: none;\n border-radius: 5px;\n width: 70px;\n height: 35px;\n cursor: pointer;\n"]))),kr=An.a.div(be||(be=Object(Mn.a)(["\n display: flex;\n flex-direction: column;\n"]))),zr=An.a.h3(xe||(xe=Object(Mn.a)(["\n margin-bottom: 10px;\n"]))),Sr=An.a.div(ue||(ue=Object(Mn.a)(["\n display: flex;\n margin-bottom: 5px;\n"]))),Cr=An.a.span(he||(he=Object(Mn.a)(["\n color: #696969;\n font-weight: 500;\n margin-right: 10px;\n"]))),Dr=An.a.p(fe||(fe=Object(Mn.a)(["\n color: #8f8f8f;\n font-weight: 300;\n"]))),Pr=An.a.div(Oe||(Oe=Object(Mn.a)(["\n display: flex;\n flex-direction: column;\n"]))),Hr=An.a.h3(ge||(ge=Object(Mn.a)(["\n margin-top: 20px;\n"]))),Mr=An.a.div(me||(me=Object(Mn.a)(["\n display: flex;\n flex-wrap: wrap;\n"]))),Ar=An.a.div(we||(we=Object(Mn.a)(["\n width: 120px;\n height: 120px;\n display: flex;\n flex-direction: column;\n margin: 15px 0px;\n cursor: pointer;\n"]))),Br=An.a.img(ve||(ve=Object(Mn.a)(["\n width: 100px;\n height: 100px;\n border-radius: 5px;\n object-fit: cover;\n"]))),Ur=An.a.span(ye||(ye=Object(Mn.a)(["\n margin-top: 5px;\n"]))),Fr=function(e){var n=e.page,t=e.city,r=e.from,c=e.relationShip,i=Object(dn.h)(),a=Object(sn.c)((function(e){return e.user.currentUser._id})),o=function(){var e=Object(bn.a)(pn.a.mark((function e(){return pn.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,e.next=3,Sn.put("/users/".concat(i.id,"/follow"),{userId:a});case 3:er.push("/"),er.go(0),e.next=10;break;case 7:e.prev=7,e.t0=e.catch(0),console.log(e.t0);case 10:case"end":return e.stop()}}),e,null,[[0,7]])})));return function(){return e.apply(this,arguments)}}();return Object(Nn.jsx)(xr,{children:"home"===n?Object(Nn.jsxs)(Nn.Fragment,{children:[Object(Nn.jsxs)(ur,{children:[Object(Nn.jsx)(hr,{src:pr}),Object(Nn.jsxs)(fr,{children:[Object(Nn.jsx)("b",{children:"Pola Foster"})," and ",Object(Nn.jsx)("b",{children:"3 other friends"})," have a birthday today."]})]}),Object(Nn.jsx)(Or,{children:Object(Nn.jsx)(gr,{src:br})}),Object(Nn.jsx)(wr,{children:"Online Friends"}),Object(Nn.jsx)(mr,{children:wt.map((function(e){return Object(Nn.jsx)(Ft,{name:e.username,image:e.profilePicture,online:"online"},e.id)}))})]}):Object(Nn.jsxs)(Nn.Fragment,{children:[Object(Nn.jsx)(vr,{children:Object(Nn.jsx)(yr,{onClick:o,children:"Follow"})}),Object(Nn.jsxs)(kr,{children:[Object(Nn.jsx)(zr,{children:"User Information"}),Object(Nn.jsxs)(Sr,{children:[Object(Nn.jsx)(Cr,{children:"City:"}),Object(Nn.jsx)(Dr,{children:t})]}),Object(Nn.jsxs)(Sr,{children:[Object(Nn.jsx)(Cr,{children:"From:"}),Object(Nn.jsx)(Dr,{children:r})]}),Object(Nn.jsxs)(Sr,{children:[Object(Nn.jsx)(Cr,{children:"Relationship:"}),Object(Nn.jsx)(Dr,{children:c})]})]}),Object(Nn.jsxs)(Pr,{children:[Object(Nn.jsx)(Hr,{children:"User Friends"}),Object(Nn.jsx)(Mr,{children:wt.map((function(e){return Object(Nn.jsxs)(Ar,{children:[Object(Nn.jsx)(Br,{src:e.profilePicture}),Object(Nn.jsx)(Ur,{children:e.username})]},e.id)}))})]})]})})},Gr=An.a.div(ke||(ke=Object(Mn.a)(["\n display: flex;\n background-color: #eeeeee;\n"]))),Ir=function(){return Object(Nn.jsxs)(Nn.Fragment,{children:[Object(Nn.jsx)(jr,{}),Object(Nn.jsxs)(Gr,{children:[Object(Nn.jsx)(Gt,{}),Object(Nn.jsx)(jt,{}),Object(Nn.jsx)(Fr,{page:"home"})]})]})},qr=function(){var e=Object(bn.a)(pn.a.mark((function e(n,t){var r;return pn.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return n(rr()),e.prev=1,e.next=4,Sn.post("/auth/login",t);case 4:r=e.sent,n(cr(r.data)),e.next=11;break;case 8:e.prev=8,e.t0=e.catch(1),n(ir());case 11:case"end":return e.stop()}}),e,null,[[1,8]])})));return function(n,t){return e.apply(this,arguments)}}(),Tr=function(){var e=Object(bn.a)(pn.a.mark((function e(n,t){var r;return pn.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return n(or()),e.prev=1,e.next=4,Sn.post("/auth/register",t);case 4:r=e.sent,n(sr(r.data)),e.next=11;break;case 8:e.prev=8,e.t0=e.catch(1),n(lr());case 11:case"end":return e.stop()}}),e,null,[[1,8]])})));return function(n,t){return e.apply(this,arguments)}}(),Vr=An.a.div(ze||(ze=Object(Mn.a)(["\n display: flex;\n background-color: #e9e9e9;\n"]))),Wr=An.a.div(Se||(Se=Object(Mn.a)(["\n height: 100vh;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n"]))),_r=An.a.div(Ce||(Ce=Object(Mn.a)(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 500px;\n"]))),Yr=An.a.h1(De||(De=Object(Mn.a)(["\n font-size: 50px;\n color: #4267b2;\n margin-bottom: 10px;\n"]))),Er=An.a.span(Pe||(Pe=Object(Mn.a)(["\n font-size: 28px;\n"]))),Jr=An.a.div(He||(He=Object(Mn.a)(["\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"]))),Lr=An.a.form(Me||(Me=Object(Mn.a)(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 500px;\n padding: 50px 5px;\n background-color: white;\n border-radius: 20px;\n"]))),Rr=An.a.input(Ae||(Ae=Object(Mn.a)(["\n font-size: 18px;\n margin: 10px 0px;\n padding: 5px 20px;\n width: 80%;\n height: 50px;\n border: none;\n border: 1px solid gray;\n outline: none;\n border-radius: 10px;\n"]))),$r=An.a.button(Be||(Be=Object(Mn.a)(["\n font-size: 24px;\n margin: 20px 0px;\n padding: 15px 20px;\n width: 80%;\n border: none;\n border-radius: 10px;\n background-color: #4267b2;\n color: white;\n cursor: pointer;\n"]))),Nr=An.a.span(Ue||(Ue=Object(Mn.a)(["\n color: #0273be;\n cursor: pointer;\n"]))),Zr=An.a.button(Fe||(Fe=Object(Mn.a)(["\n font-size: 24px;\n margin: 20px 0px;\n padding: 15px 20px;\n width: 60%;\n border: none;\n border-radius: 10px;\n background-color: #197e00;\n color: white;\n cursor: pointer;\n"]))),Kr=An.a.span(Ge||(Ge=Object(Mn.a)(["\n font-size: 12px;\n color: red;\n margin: 5px 0px;\n"]))),Qr=function(){var e=Object(sn.b)(),n=Object(sn.c)((function(e){return e.user.error})),t=Object(cn.useState)(""),r=Object(xn.a)(t,2),c=r[0],i=r[1],a=Object(cn.useState)(""),o=Object(xn.a)(a,2),s=o[0],l=o[1];return Object(Nn.jsxs)(Vr,{children:[Object(Nn.jsx)(Wr,{children:Object(Nn.jsxs)(_r,{children:[Object(Nn.jsx)(Yr,{children:"Ozkan's Social"}),Object(Nn.jsx)(Er,{children:"Connect with friends and the world around you on Ozkan's Social"})]})}),Object(Nn.jsx)(Jr,{children:Object(Nn.jsxs)(Lr,{onSubmit:function(n){n.preventDefault(),qr(e,{username:c,password:s})},children:[Object(Nn.jsx)(Rr,{placeholder:"Username",value:c,onChange:function(e){return i(e.target.value)}}),Object(Nn.jsx)(Rr,{type:"password",placeholder:"Password",value:s,onChange:function(e){return l(e.target.value)}}),Object(Nn.jsx)($r,{children:"Log In"}),Object(Nn.jsx)(Nr,{children:"Forgot Password?"}),n&&Object(Nn.jsx)(Kr,{children:"Wrong Credentials!"}),Object(Nn.jsx)(Zr,{onClick:function(){er.push("/register"),er.go(0)},children:"Create a New Account"})]})})]})},Xr=t(6),ec=t(35),nc=An.a.div(Ie||(Ie=Object(Mn.a)(["\n display: flex;\n background-color: #e9e9e9;\n"]))),tc=An.a.div(qe||(qe=Object(Mn.a)(["\n height: 100vh;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n"]))),rc=An.a.div(Te||(Te=Object(Mn.a)(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 500px;\n"]))),cc=An.a.h1(Ve||(Ve=Object(Mn.a)(["\n font-size: 50px;\n color: #4267b2;\n margin-bottom: 10px;\n"]))),ic=An.a.span(We||(We=Object(Mn.a)(["\n font-size: 28px;\n"]))),ac=An.a.div(_e||(_e=Object(Mn.a)(["\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"]))),oc=An.a.form(Ye||(Ye=Object(Mn.a)(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 500px;\n padding: 50px 5px;\n background-color: white;\n border-radius: 20px;\n"]))),sc=An.a.input(Ee||(Ee=Object(Mn.a)(["\n font-size: 18px;\n margin: 10px 0px;\n padding: 5px 20px;\n width: 80%;\n height: 50px;\n border: none;\n border: 1px solid gray;\n outline: none;\n border-radius: 10px;\n"]))),lc=(An.a.button(Je||(Je=Object(Mn.a)(["\n font-size: 24px;\n margin: 20px 0px;\n padding: 15px 20px;\n width: 80%;\n border: none;\n border-radius: 10px;\n background-color: #4267b2;\n color: white;\n cursor: pointer;\n"]))),An.a.span(Le||(Le=Object(Mn.a)(["\n color: #0273be;\n cursor: pointer;\n"]))),An.a.button(Re||(Re=Object(Mn.a)(["\n font-size: 24px;\n margin: 20px 0px;\n padding: 15px 20px;\n width: 60%;\n border: none;\n border-radius: 10px;\n background-color: #197e00;\n color: white;\n cursor: pointer;\n"])))),dc=function(){var e=Object(sn.b)(),n=Object(cn.useState)({username:"",email:"",password:"",confirmPassword:""}),t=Object(xn.a)(n,2),r=t[0],c=t[1],i=[{id:1,name:"username",type:"text",placeholder:"Username",title:"Username should be 3-16 characters and shouldn't include any special character!",pattern:"^[A-Za-z0-9]{3,16}$",required:!0},{id:2,name:"email",type:"email",placeholder:"Email",title:"It should be a valid email address!",required:!0},{id:3,name:"password",type:"password",placeholder:"Password",title:" Passwrod should be 8-16 characters and include at least 1 letter, 1 number and 1 special character!",pattern:"^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,20}$",required:!0},{id:4,name:"confirmPassword",type:"password",placeholder:"Confirm Password",title:"Password don't match!",pattern:r.password,required:!0}],a=function(e){c((function(n){return Object(ec.a)(Object(ec.a)({},n),{},Object(Xr.a)({},e.target.name,e.target.value))}))};return Object(Nn.jsxs)(nc,{children:[Object(Nn.jsx)(tc,{children:Object(Nn.jsxs)(rc,{children:[Object(Nn.jsx)(cc,{children:"Ozkan's Social"}),Object(Nn.jsx)(ic,{children:"Connect with friends and the world around you on Ozkan's Social"})]})}),Object(Nn.jsx)(ac,{children:Object(Nn.jsxs)(oc,{onSubmit:function(n){n.preventDefault();var t=Object(ec.a)({},r);Tr(e,t)},children:[i.map((function(e){return Object(Nn.jsx)(sc,Object(ec.a)(Object(ec.a)({},e),{},{value:r[e.name],onChange:a}),e.id)})),Object(Nn.jsx)(lc,{children:"Create a New Account"})]})})]})},jc=An.a.div($e||($e=Object(Mn.a)(["\n display: flex;\n background-color: #eeeeee;\n"]))),pc=An.a.div(Ne||(Ne=Object(Mn.a)(["\n display: flex;\n flex-direction: column;\n position: relative;\n"]))),bc=An.a.img(Ze||(Ze=Object(Mn.a)(["\n width: 100%;\n height: 300px;\n object-fit: cover;\n cursor: pointer;\n"]))),xc=An.a.img(Ke||(Ke=Object(Mn.a)(["\n width: 250px;\n height: 250px;\n border-radius: 50%;\n border: 3px solid white;\n object-fit: cover;\n position: absolute;\n left: 0;\n right: 0;\n top: 150px;\n margin: auto;\n cursor: pointer;\n"]))),uc=An.a.div(Qe||(Qe=Object(Mn.a)(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n margin-top: 110px;\n margin-bottom: 15px;\n"]))),hc=An.a.h3(Xe||(Xe=Object(Mn.a)(["\n font-size: 40px;\n"]))),fc=An.a.button(en||(en=Object(Mn.a)(["\n background-color: blue;\n color: white;\n width: 150px;\n padding: 5px;\n border: none;\n border-radius: 5px;\n font-size: 18px;\n font-weight: 400;\n margin: 5px;\n cursor: pointer;\n"]))),Oc=An.a.span(nn||(nn=Object(Mn.a)(["\n font-size: 24px;\n font-weight: 300;\n"]))),gc=An.a.div(tn||(tn=Object(Mn.a)(["\n flex: 4;\n"]))),mc=An.a.div(rn||(rn=Object(Mn.a)(["\n display: flex;\n"]))),wc=function(){var e=Object(dn.h)().id,n=Object(cn.useState)({username:"",profilePicture:"",coverPicture:"",city:"",from:"",realationShip:""}),t=Object(xn.a)(n,2),r=t[0],c=t[1],i=Object(cn.useState)(null),a=Object(xn.a)(i,2),o=a[0],s=a[1],l=Object(cn.useRef)();Object(cn.useEffect)((function(){(function(){var n=Object(bn.a)(pn.a.mark((function n(){var t;return pn.a.wrap((function(n){for(;;)switch(n.prev=n.next){case 0:return n.prev=0,n.next=3,Sn.get("/users/".concat(e));case 3:t=n.sent,console.log(t.data),c(t.data),n.next=11;break;case 8:n.prev=8,n.t0=n.catch(0),console.log(n.t0);case 11:case"end":return n.stop()}}),n,null,[[0,8]])})));return function(){return n.apply(this,arguments)}})()()}),[]);var d=function(){var e=Object(bn.a)(pn.a.mark((function e(){var n,t,c,i;return pn.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:n=(new Date).getTime()+o.name,t=Object(gn.b)(vn),c=Object(gn.c)(t,n),(i=Object(gn.d)(c,o)).on("state_changed",(function(e){var n=e.bytesTransferred/e.totalBytes*100;switch(console.log("Upload is "+n+"% done"),e.state){case"paused":console.log("Upload is paused");break;case"running":console.log("Upload is running")}}),(function(e){}),(function(){Object(gn.a)(i.snapshot.ref).then(function(){var e=Object(bn.a)(pn.a.mark((function e(n){var t,c;return pn.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return t=r._id,c={userId:t,profilePicture:n},e.prev=2,e.next=5,Sn.put("/users/".concat(t),c);case 5:window.location.reload(!1),e.next=11;break;case 8:e.prev=8,e.t0=e.catch(2),console.log(e.t0);case 11:case"end":return e.stop()}}),e,null,[[2,8]])})));return function(n){return e.apply(this,arguments)}}())}));case 5:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}(),j=function(){var e=Object(bn.a)(pn.a.mark((function e(){var n,t,c,i;return pn.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:n=(new Date).getTime()+o.name,t=Object(gn.b)(vn),c=Object(gn.c)(t,n),(i=Object(gn.d)(c,o)).on("state_changed",(function(e){var n=e.bytesTransferred/e.totalBytes*100;switch(console.log("Upload is "+n+"% done"),e.state){case"paused":console.log("Upload is paused");break;case"running":console.log("Upload is running")}}),(function(e){}),(function(){Object(gn.a)(i.snapshot.ref).then(function(){var e=Object(bn.a)(pn.a.mark((function e(n){var t,c;return pn.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return t=r._id,c={userId:t,coverPicture:n},e.prev=2,e.next=5,Sn.put("/users/".concat(t),c);case 5:window.location.reload(!1),e.next=11;break;case 8:e.prev=8,e.t0=e.catch(2),console.log(e.t0);case 11:case"end":return e.stop()}}),e,null,[[2,8]])})));return function(n){return e.apply(this,arguments)}}())}));case 5:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}();return Object(Nn.jsxs)(Nn.Fragment,{children:[Object(Nn.jsx)(jr,{}),Object(Nn.jsxs)(jc,{children:[Object(Nn.jsx)(Gt,{}),r&&Object(Nn.jsxs)(gc,{children:[Object(Nn.jsxs)(pc,{children:[Object(Nn.jsx)(bc,{src:r.coverPicture}),Object(Nn.jsx)(xc,{src:r.profilePicture}),Object(Nn.jsxs)(uc,{children:[Object(Nn.jsx)(hc,{children:r.username.charAt(0).toUpperCase()+r.username.slice(1)}),Object(Nn.jsx)(Oc,{children:r.desc})]})]}),Object(Nn.jsx)("input",{type:"file",ref:l,style:{display:"none"},onChange:function(e){return s(e.target.files[0])}}),Object(Nn.jsx)(fc,{onClick:function(){l.current.click()},children:"Add Photo"}),Object(Nn.jsx)(fc,{onClick:d,children:"Change Profile Picture"}),Object(Nn.jsx)(fc,{onClick:j,children:"Change Cover Image"}),Object(Nn.jsxs)(mc,{children:[Object(Nn.jsx)(jt,{}),Object(Nn.jsx)(Fr,{page:"user",city:r.city,from:r.from,relationShip:r.relationShip})]})]})]})]})},vc=function(){var e=Object(sn.c)((function(e){return e.user.currentUser}));return Object(Nn.jsx)(ln.a,{children:Object(Nn.jsx)(Nn.Fragment,{children:Object(Nn.jsxs)(dn.d,{children:[Object(Nn.jsx)(dn.b,{path:"/",element:e?Object(Nn.jsx)(Ir,{}):Object(Nn.jsx)(dn.a,{to:"/login"})}),Object(Nn.jsx)(dn.b,{path:"/user/:id",element:e?Object(Nn.jsx)(wc,{}):Object(Nn.jsx)(dn.a,{to:"/login"})}),Object(Nn.jsx)(dn.b,{path:"/login",element:Object(Nn.jsx)(Qr,{})}),Object(Nn.jsx)(dn.b,{path:"/register",element:Object(Nn.jsx)(dc,{})})]})})})},yc=t(19),kc=t(25),zc=t(62),Sc={key:"root",version:1,storage:t.n(zc).a},Cc=Object(yc.b)({user:dr}),Dc=Object(kc.g)(Sc,Cc),Pc=Object(Qt.a)({reducer:Dc,middleware:function(e){return e({serializableCheck:{ignoredActions:[kc.a,kc.f,kc.b,kc.c,kc.d,kc.e]}})}}),Hc=Object(kc.h)(Pc),Mc=t(63);on.a.render(Object(Nn.jsx)(sn.a,{store:Pc,children:Object(Nn.jsx)(Mc.a,{loading:null,persistor:Hc,children:Object(Nn.jsx)(vc,{})})}),document.getElementById("root"))}},[[98,1,2]]]); 2 | //# sourceMappingURL=main.0a0cd988.chunk.js.map -------------------------------------------------------------------------------- /client/build/static/js/main.1c60124a.chunk.js: -------------------------------------------------------------------------------- 1 | (this.webpackJsonpclient=this.webpackJsonpclient||[]).push([[0],{98:function(e,n,t){"use strict";t.r(n);var r,c,i,a,o,s,l,d,j,p,b,x,u,h,f,O,g,m,w,v,y,k,z,S,D,C,P,H,M,A,U,B,F,G,I,q,T,V,_,W,Y,E,J,L,R,$,N,Z,K,Q,X,ee,ne,te,re,ce,ie,ae,oe,se,le,de,je,pe,be,xe,ue,he,fe,Oe,ge,me,we,ve,ye,ke,ze,Se,De,Ce,Pe,He,Me,Ae,Ue,Be,Fe,Ge,Ie,qe,Te,Ve,_e,We,Ye,Ee,Je,Le,Re,$e,Ne,Ze,Ke,Qe,Xe,en,nn,tn,rn,cn=t(1),an=t(42),on=t.n(an),sn=t(13),ln=t(17),dn=t(7),jn=t(5),pn=t.n(jn),bn=t(10),xn=t(9),un=t(111),hn=t(112),fn=t(113),On=t(114),gn=t(20),mn=t(58),wn=Object(mn.a)({apiKey:"AIzaSyCOvTYeicrCgrs52TV-ApqesUAGeWf-V2A",authDomain:"shop-e412d.firebaseapp.com",projectId:"shop-e412d",storageBucket:"shop-e412d.appspot.com",messagingSenderId:"379033798897",appId:"1:379033798897:web:195de3b1bb5485100dc150"}),vn=wn,yn=t(47),kn=t.n(yn),zn="https://social-media-mern-applications.herokuapp.com/api/",Sn=kn.a.create({baseURL:zn}),Dn=(kn.a.create({baseURL:zn}),t(64)),Cn=t.p+"static/media/like.be1d10c9.png",Pn=t.p+"static/media/heart.d03a6207.png",Hn=t(110),Mn=t(2),An=t(3),Un=An.a.div(r||(r=Object(Mn.a)(["\n width: 90%;\n margin-bottom: 50px;\n display: flex;\n flex-direction: column;\n background-color: white;\n border-radius: 10px;\n"]))),Bn=An.a.div(c||(c=Object(Mn.a)(["\n display: flex;\n justify-content: space-between;\n margin-top: 20px;\n"]))),Fn=An.a.div(i||(i=Object(Mn.a)(["\n display: flex;\n align-items: center;\n margin-left: 20px;\n"]))),Gn=An.a.img(a||(a=Object(Mn.a)(["\n width: 50px;\n height: 50px;\n border-radius: 50%;\n object-fit: cover;\n cursor: pointer;\n"]))),In=An.a.span(o||(o=Object(Mn.a)(["\n font-size: 18px;\n margin-left: 10px;\n font-weight: 600;\n cursor: pointer;\n"]))),qn=An.a.span(s||(s=Object(Mn.a)(["\n font-size: 13px;\n margin-left: 10px;\n"]))),Tn=An.a.div(l||(l=Object(Mn.a)(["\n margin: 0px 5px;\n"]))),Vn=An.a.div(d||(d=Object(Mn.a)(["\n margin: 20px 0px 20px 20px;\n"]))),_n=An.a.span(j||(j=Object(Mn.a)(["\n margin-bottom: 20px;\n"]))),Wn=An.a.img(p||(p=Object(Mn.a)(["\n width: 95%;\n height: 90%;\n object-fit: cover;\n margin-top: 20px;\n"]))),Yn=An.a.div(b||(b=Object(Mn.a)(["\n display: flex;\n justify-content: space-between;\n margin: 0px 20px;\n margin-bottom: 20px;\n"]))),En=An.a.div(x||(x=Object(Mn.a)(["\n display: flex;\n align-items: center;\n"]))),Jn=An.a.img(u||(u=Object(Mn.a)(["\n width: 25px;\n height: 25px;\n border-radius: 50%;\n object-fit: cover;\n cursor: pointer;\n margin-right: 7px;\n"]))),Ln=An.a.img(h||(h=Object(Mn.a)(["\n width: 25px;\n height: 25px;\n border-radius: 50%;\n object-fit: cover;\n cursor: pointer;\n"]))),Rn=An.a.span(f||(f=Object(Mn.a)(["\n margin-left: 10px;\n font-weight: 500;\n"]))),$n=An.a.span(O||(O=Object(Mn.a)(["\n cursor: pointer;\n text-decoration: underline;\n"]))),Nn=t(0),Zn=function(e){var n=e.desc,t=e.photo,r=e.date,c=e.userId,i=e.like,a=e.comment,o=e.id,s=Object(cn.useState)(null),l=Object(xn.a)(s,2),d=l[0],j=l[1],p=Object(cn.useState)(i),b=Object(xn.a)(p,2),x=b[0],u=b[1],h=Object(cn.useState)(!1),f=Object(xn.a)(h,2),O=f[0],g=f[1],m=function(){var e=Object(bn.a)(pn.a.mark((function e(){return pn.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return u(O?x-1:x+1),g(!O),e.prev=2,e.next=5,Sn.put("/posts/".concat(o,"/like"),{userId:c});case 5:e.next=10;break;case 7:e.prev=7,e.t0=e.catch(2),console.log(e.t0);case 10:case"end":return e.stop()}}),e,null,[[2,7]])})));return function(){return e.apply(this,arguments)}}();return Object(cn.useEffect)((function(){(function(){var e=Object(bn.a)(pn.a.mark((function e(){var n;return pn.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,e.next=3,Sn.get("/users/".concat(c));case 3:n=e.sent,j(n.data),e.next=10;break;case 7:e.prev=7,e.t0=e.catch(0),console.log(e.t0);case 10:case"end":return e.stop()}}),e,null,[[0,7]])})));return function(){return e.apply(this,arguments)}})()()}),[]),Object(Nn.jsxs)(Un,{children:[Object(Nn.jsxs)(Bn,{children:[Object(Nn.jsxs)(Fn,{children:[d&&Object(Nn.jsxs)(Nn.Fragment,{children:[Object(Nn.jsx)(ln.b,{to:"/user/".concat(c),children:Object(Nn.jsx)(Gn,{src:d.profilePicture})}),Object(Nn.jsx)(ln.b,{to:"/user/".concat(c),style:{textDecoration:"none",color:"black"},children:Object(Nn.jsx)(In,{children:d.username.charAt(0).toUpperCase()+d.username.slice(1)})})]}),Object(Nn.jsx)(qn,{children:Object(Dn.a)(r)})]}),Object(Nn.jsx)(Tn,{children:Object(Nn.jsx)(Hn.a,{style:{cursor:"pointer"}})})]}),Object(Nn.jsxs)(Vn,{children:[Object(Nn.jsx)(_n,{children:n}),t&&Object(Nn.jsx)(Wn,{src:t})]}),Object(Nn.jsxs)(Yn,{children:[Object(Nn.jsxs)(En,{children:[Object(Nn.jsx)(Jn,{src:Cn,onClick:m}),Object(Nn.jsx)(Ln,{src:Pn,onClick:m}),Object(Nn.jsxs)(Rn,{children:[x," people like it"]})]}),Object(Nn.jsx)($n,{children:a?"".concat(a," comments"):"0 comment"})]})]})},Kn=An.a.div(g||(g=Object(Mn.a)(["\n flex: 3;\n display: flex;\n flex-direction: column;\n align-items: center;\n \n"]))),Qn=An.a.div(m||(m=Object(Mn.a)(["\n display: flex;\n flex-direction: column;\n margin: 10px 0px;\n text-align:center;\n"]))),Xn=An.a.h1(w||(w=Object(Mn.a)(["\n font-size: 24px;\n font-weight: 400;\n margin: 5px 0px;\n"]))),et=An.a.span(v||(v=Object(Mn.a)(["\n font-size: 18px;\n margin: 2px 0px;\n cursor:pointer;\n"]))),nt=An.a.div(y||(y=Object(Mn.a)(["\n width: 90%;\n height: 200px;\n margin-top: 25px;\n margin-bottom: 50px;\n background-color: white;\n display: flex;\n flex-direction: column;\n"]))),tt=An.a.div(k||(k=Object(Mn.a)(["\n margin-top: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n"]))),rt=An.a.img(z||(z=Object(Mn.a)(["\n width: 50px;\n height: 50px;\n border-radius: 50%;\n object-fit: cover;\n margin-left: 20px;\n"]))),ct=An.a.input(S||(S=Object(Mn.a)(["\n width: 90%;\n margin-left: 20px;\n font-size: 18px;\n border: none;\n outline: none;\n"]))),it=An.a.div(D||(D=Object(Mn.a)(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 25px 0px;\n"]))),at=An.a.div(C||(C=Object(Mn.a)(["\n width: 90%;\n height: 0.1px;\n background-color: #a1a1a1;\n"]))),ot=An.a.div(P||(P=Object(Mn.a)(["\n display: flex;\n justify-content: space-between;\n margin: 10px 50px;\n"]))),st=An.a.ul(H||(H=Object(Mn.a)(["\n display: flex;\n align-items: center;\n list-style: none;\n"]))),lt=An.a.li(M||(M=Object(Mn.a)(["\n margin-left: 2px;\n margin-right: 25px;\n font-size: 18px;\n cursor: pointer;\n"]))),dt=An.a.button(A||(A=Object(Mn.a)(["\n background-color: green;\n color: white;\n font-size: 16px;\n border: none;\n border-radius: 5px;\n width: 70px;\n height: 35px;\n cursor: pointer;\n"]))),jt=function(){var e=Object(cn.useRef)(),n=Object(sn.c)((function(e){return e.user.currentUser})),t=Object(dn.h)(),r=Object(cn.useState)([]),c=Object(xn.a)(r,2),i=c[0],a=c[1],o=Object(cn.useState)(null),s=Object(xn.a)(o,2),l=s[0],d=s[1],j=Object(cn.useState)(""),p=Object(xn.a)(j,2),b=p[0],x=p[1],u=n._id;Object(cn.useEffect)((function(){(function(){var e=Object(bn.a)(pn.a.mark((function e(){var n,t;return pn.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,e.next=3,Sn.get("/posts/timeline/".concat(u));case 3:n=e.sent,t=n.data.sort((function(e,n){var t=new Date(e.createdAt).getTime();return new Date(n.createdAt).getTime()-t})),a(t),e.next=11;break;case 8:e.prev=8,e.t0=e.catch(0),console.log(e.t0);case 11:case"end":return e.stop()}}),e,null,[[0,8]])})));return function(){return e.apply(this,arguments)}})()()}),[]);var h=function(){var e=Object(bn.a)(pn.a.mark((function e(){var t,r,c,i,a;return pn.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(!l){e.next=8;break}t=(new Date).getTime()+l.name,r=Object(gn.b)(vn),c=Object(gn.c)(r,t),(i=Object(gn.d)(c,l)).on("state_changed",(function(e){var n=e.bytesTransferred/e.totalBytes*100;switch(console.log("Upload is "+n+"% done"),e.state){case"paused":console.log("Upload is paused");break;case"running":console.log("Upload is running")}}),(function(e){}),(function(){Object(gn.a)(i.snapshot.ref).then(function(){var e=Object(bn.a)(pn.a.mark((function e(t){var r,c;return pn.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return r=n._id,c={userId:r,desc:b,img:t},e.prev=2,e.next=5,Sn.post("/posts",c);case 5:window.location.reload(!1),e.next=11;break;case 8:e.prev=8,e.t0=e.catch(2),console.log(e.t0);case 11:case"end":return e.stop()}}),e,null,[[2,8]])})));return function(n){return e.apply(this,arguments)}}())})),e.next=18;break;case 8:return a={userId:u,desc:b},e.prev=9,e.next=12,Sn.post("/posts",a);case 12:window.location.reload(!1),e.next=18;break;case 15:e.prev=15,e.t0=e.catch(9),console.log(e.t0);case 18:case"end":return e.stop()}}),e,null,[[9,15]])})));return function(){return e.apply(this,arguments)}}(),f=function(){e.current.click()};return Object(Nn.jsxs)(Kn,{children:[(u===t.id||void 0===t.id)&&Object(Nn.jsxs)(Nn.Fragment,{children:[Object(Nn.jsxs)(Qn,{children:[Object(Nn.jsx)(Xn,{children:"No Friends? Add these people first!"}),Object(Nn.jsx)(ln.b,{style:{textDecoration:"none",color:"black"},to:"/user/61b9245908565465138e85bd",children:Object(Nn.jsx)(et,{children:"Jane"})}),Object(Nn.jsx)(ln.b,{style:{textDecoration:"none",color:"black"},to:"/user/61b25fce2cd53769d8abb7c1",children:Object(Nn.jsx)(et,{children:"Ozkan Selcuk"})})]}),Object(Nn.jsxs)(nt,{children:[Object(Nn.jsxs)(tt,{children:[Object(Nn.jsx)(ln.b,{to:"/user/".concat(n._id),children:Object(Nn.jsx)(rt,{src:n.profilePicture})}),Object(Nn.jsx)(ct,{placeholder:"What's in your mind ".concat(n.username.charAt(0).toUpperCase()+n.username.slice(1),"?"),value:b,onChange:function(e){return x(e.target.value)}})]}),Object(Nn.jsx)(it,{children:Object(Nn.jsx)(at,{})}),Object(Nn.jsxs)(ot,{children:[Object(Nn.jsxs)(st,{children:[Object(Nn.jsx)("input",{type:"file",ref:e,style:{display:"none"},onChange:function(e){return d(e.target.files[0])}}),Object(Nn.jsx)(un.a,{onClick:f,style:{color:"tomato",cursor:"pointer"}}),Object(Nn.jsx)(lt,{onClick:f,children:"Photo or Video"}),Object(Nn.jsx)(hn.a,{style:{color:"blue",cursor:"pointer"}}),Object(Nn.jsx)(lt,{children:"Tag"}),Object(Nn.jsx)(fn.a,{style:{color:"green",cursor:"pointer"}}),Object(Nn.jsx)(lt,{children:"Location"}),Object(Nn.jsx)(On.a,{style:{color:"goldenrod",cursor:"pointer"}}),Object(Nn.jsx)(lt,{children:"Feelings"})]}),Object(Nn.jsx)(dt,{onClick:h,children:"Share"})]})]})]}),i.map((function(e){return Object(Nn.jsx)(Zn,{id:e._id,desc:e.desc,photo:e.img,date:e.createdAt,userId:e.userId,like:e.likes.length,comment:e.comment},e._id)}))]})},pt=t(115),bt=t(116),xt=t(117),ut=t(118),ht=t(119),ft=t(120),Ot=t(121),gt=t(122),mt=t(123),wt=[{id:1,profilePicture:"https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",username:"Ozkan Selcuk"},{id:2,profilePicture:"https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80",username:"Janell Shrum"},{id:3,profilePicture:"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",username:"Alex Durden"},{id:4,profilePicture:"https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",username:"Dora Hawks"},{id:5,profilePicture:"https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",username:"Thomas Holden"},{id:6,profilePicture:"https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",username:"Shirley Beauchamp"},{id:7,profilePicture:"https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",username:"Travis Bennett"},{id:8,profilePicture:"https://images.unsplash.com/photo-1533227268428-f9ed0900fb3b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=971&q=80",username:"Kristen Thomas"},{id:9,profilePicture:"https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",username:"Gary Duty"},{id:10,profilePicture:"https://images.unsplash.com/photo-1504439904031-93ded9f93e4e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=736&q=80",username:"Jane Iverson"}],vt=An.a.div(U||(U=Object(Mn.a)(["\n flex: 1;\n height: calc(100vh - 70px);\n top: 50px;\n position: sticky;\n overflow-y: scroll;\n width: 300px;\n z-index: 998;\n\n ::-webkit-scrollbar {\n width: 5px;\n }\n ::-webkit-scrollbar-track {\n background-color: #f1f1f1;\n }\n ::-webkit-scrollbar-thumb {\n background-color: rgb(179, 179, 179);\n }\n"]))),yt=An.a.div(B||(B=Object(Mn.a)(["\n margin-top: 20px;\n margin-left: 20px;\n"]))),kt=An.a.ul(F||(F=Object(Mn.a)(["\n list-style: none;\n"]))),zt=An.a.li(G||(G=Object(Mn.a)(["\n margin-bottom: 20px;\n display: flex;\n cursor: pointer;\n height: 27px;\n\n &:hover {\n background-color: #d6d6d6;\n border-radius: 5px;\n }\n"]))),St=An.a.div(I||(I=Object(Mn.a)(["\n font-size: 20px;\n margin-left: 10px;\n"]))),Dt=An.a.button(q||(q=Object(Mn.a)(["\n border: none;\n border-radius: 5px;\n background-color: #d4d4d4;\n font-size: 16px;\n font-weight: 500;\n width: 120px;\n height: 40px;\n cursor: pointer;\n"]))),Ct=An.a.div(T||(T=Object(Mn.a)(["\n display: flex;\n align-items: center;\n height: 50px;\n margin-left: 20px;\n"]))),Pt=An.a.div(V||(V=Object(Mn.a)(["\n width: 90%;\n height: 0.5px;\n background-color: black;\n"]))),Ht=An.a.div(_||(_=Object(Mn.a)(["\n margin-left: 20px;\n"]))),Mt=An.a.div(W||(W=Object(Mn.a)(["\n height: 50px;\n width: 100%;\n display: flex;\n align-items: center;\n position: relative;\n cursor: pointer;\n margin-bottom: 5px;\n"]))),At=An.a.img(Y||(Y=Object(Mn.a)(["\n width: 40px;\n height: 40px;\n border-radius: 50%;\n margin-right: 10px;\n object-fit: cover;\n"]))),Ut=An.a.span(E||(E=Object(Mn.a)(["\n font-size: 18px;\n"]))),Bt=An.a.div(J||(J=Object(Mn.a)(["\n position: absolute;\n background-color: #00b600;\n width: 12px;\n height: 12px;\n border: 0.3px solid white;\n border-radius: 50%;\n left: 27px;\n top: 2px;\n"]))),Ft=function(e){var n=e.name,t=e.image,r=e.online;return Object(Nn.jsxs)(Mt,{children:[Object(Nn.jsx)(At,{src:t}),Object(Nn.jsx)(Ut,{children:n}),"online"===r&&Object(Nn.jsx)(Bt,{})]})},Gt=function(){return Object(Nn.jsxs)(vt,{children:[Object(Nn.jsxs)(yt,{children:[Object(Nn.jsxs)(kt,{children:[Object(Nn.jsxs)(zt,{children:[Object(Nn.jsx)(pt.a,{}),Object(Nn.jsx)(St,{children:"Feed"})]}),Object(Nn.jsxs)(zt,{children:[Object(Nn.jsx)(bt.a,{}),Object(Nn.jsx)(St,{children:"Chats"})]}),Object(Nn.jsxs)(zt,{children:[Object(Nn.jsx)(xt.a,{}),Object(Nn.jsx)(St,{children:"Videos"})]}),Object(Nn.jsxs)(zt,{children:[Object(Nn.jsx)(ut.a,{}),Object(Nn.jsx)(St,{children:"Groups"})]}),Object(Nn.jsxs)(zt,{children:[Object(Nn.jsx)(ht.a,{}),Object(Nn.jsx)(St,{children:"Bookmarks"})]}),Object(Nn.jsxs)(zt,{children:[Object(Nn.jsx)(ft.a,{}),Object(Nn.jsx)(St,{children:"Questions"})]}),Object(Nn.jsxs)(zt,{children:[Object(Nn.jsx)(Ot.a,{}),Object(Nn.jsx)(St,{children:"Jobs"})]}),Object(Nn.jsxs)(zt,{children:[Object(Nn.jsx)(gt.a,{}),Object(Nn.jsx)(St,{children:"Events"})]}),Object(Nn.jsxs)(zt,{children:[Object(Nn.jsx)(mt.a,{}),Object(Nn.jsx)(St,{children:"Courses"})]})]}),Object(Nn.jsx)(Dt,{children:"Show More"})]}),Object(Nn.jsx)(Ct,{children:Object(Nn.jsx)(Pt,{})}),Object(Nn.jsx)(Ht,{children:wt.map((function(e){return Object(Nn.jsx)(Ft,{name:e.username,image:e.profilePicture},e.id)}))})]})},It=t(124),qt=t(125),Tt=t(126),Vt=t(127),_t=t(44),Wt=t(18),Yt=Object(Wt.b)(),Et=Object(_t.b)({name:"user",initialState:{currentUser:null,isFetching:!1,error:!1},reducers:{loginStart:function(e){e.isFetching=!0},loginSuccess:function(e,n){e.isFetching=!1,e.error=!1,e.currentUser=n.payload,Yt.push("/"),Yt.go(0)},loginFailure:function(e){e.isFetching=!1,e.error=!0},logout:function(e){e.currentUser=null,e.error=!1},registerStart:function(e){e.isFetching=!0},registerSuccess:function(e,n){e.isFetching=!1,e.currentUser=n.payload,e.error=!1,Yt.push("/"),Yt.go(0)},registerFailure:function(e){e.isFetching=!1,e.error=!0}}}),Jt=Et.actions,Lt=Jt.loginStart,Rt=Jt.loginSuccess,$t=Jt.loginFailure,Nt=Jt.logout,Zt=Jt.registerStart,Kt=Jt.registerSuccess,Qt=Jt.registerFailure,Xt=Et.reducer,er=An.a.div(L||(L=Object(Mn.a)(["\n height: 50px;\n width: 100%;\n background-color: #4267b2;\n display: flex;\n align-items: center;\n position: sticky;\n top: 0;\n z-index: 999;\n"]))),nr=An.a.div(R||(R=Object(Mn.a)(["\n flex: 1;\n margin-left: 20px;\n"]))),tr=An.a.h1($||($=Object(Mn.a)(["\n font-size: 24px;\n color: white;\n cursor: pointer;\n width: max-content;\n"]))),rr=An.a.div(N||(N=Object(Mn.a)(["\n flex: 2;\n display: flex;\n align-items: center;\n"]))),cr=An.a.div(Z||(Z=Object(Mn.a)(["\n padding: 0 10px;\n align-items: center;\n border-radius: 30px;\n width: 70%;\n height: 30px;\n background-color: white;\n display: flex;\n"]))),ir=An.a.input(K||(K=Object(Mn.a)(["\n width: 90%;\n border: none;\n outline: none;\n margin-left: 10px;\n font-size: 16px;\n"]))),ar=An.a.span(Q||(Q=Object(Mn.a)(["\n color: white;\n margin-left: 15px;\n font-size: 17px;\n cursor: pointer;\n"]))),or=An.a.div(X||(X=Object(Mn.a)(["\n flex: 0.5;\n margin-right: 20px;\n display: flex;\n align-items: center;\n"]))),sr=An.a.div(ee||(ee=Object(Mn.a)(["\n color: white;\n font-size: 40px;\n cursor: pointer;\n margin-right: 10px;\n position: relative;\n"]))),lr=An.a.div(ne||(ne=Object(Mn.a)(["\n position: absolute;\n top: 5px;\n right: -4px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n width: 15px;\n height: 15px;\n background-color: crimson;\n border-radius: 50%;\n"]))),dr=An.a.img(te||(te=Object(Mn.a)(["\n width: 40px;\n height: 40px;\n border-radius: 50%;\n object-fit: cover;\n margin-left: 50px;\n cursor: pointer;\n"]))),jr=function(){var e=Object(sn.b)(),n=Object(sn.c)((function(e){return e.user.currentUser}));return Object(Nn.jsxs)(er,{children:[Object(Nn.jsx)(nr,{children:Object(Nn.jsx)(ln.b,{to:"/",style:{textDecoration:"none"},children:Object(Nn.jsx)(tr,{children:"Ozkan's Social"})})}),Object(Nn.jsxs)(rr,{children:[Object(Nn.jsxs)(cr,{children:[Object(Nn.jsx)(It.a,{}),Object(Nn.jsx)(ir,{placeholder:"Search for friend, post or video"})]}),Object(Nn.jsx)(ln.b,{to:"/user/".concat(n._id),style:{textDecoration:"none",color:"white"},children:Object(Nn.jsx)(ar,{children:"Homepage"})}),Object(Nn.jsx)(ln.b,{to:"/",style:{textDecoration:"none",color:"white"},children:Object(Nn.jsx)(ar,{children:"Timeline"})})]}),Object(Nn.jsxs)(or,{children:[Object(Nn.jsxs)(sr,{children:[Object(Nn.jsx)(lr,{children:"1"}),Object(Nn.jsx)(qt.a,{style:{fontSize:"28px"}})]}),Object(Nn.jsxs)(sr,{children:[Object(Nn.jsx)(lr,{children:"5"}),Object(Nn.jsx)(Tt.a,{style:{fontSize:"28px"}})]}),Object(Nn.jsxs)(sr,{children:[Object(Nn.jsx)(lr,{children:"2"}),Object(Nn.jsx)(Vt.a,{style:{fontSize:"28px"}})]}),Object(Nn.jsx)(ln.b,{to:"/user/".concat(n._id),children:Object(Nn.jsx)(dr,{src:n.profilePicture})}),Object(Nn.jsx)(ar,{onClick:function(){e(Nt())},children:"Logout"})]})]})},pr=t.p+"static/media/gift.4a9c4d62.png",br=t.p+"static/media/ad.833b6750.png",xr=An.a.div(re||(re=Object(Mn.a)(["\n flex: 1;\n padding: 20px;\n"]))),ur=An.a.div(ce||(ce=Object(Mn.a)(["\n display: flex;\n align-items: center;\n"]))),hr=An.a.img(ie||(ie=Object(Mn.a)(["\n width: 40px;\n height: 42px;\n margin-right: 10px;\n"]))),fr=An.a.span(ae||(ae=Object(Mn.a)(["\n font-size: 18px;\n"]))),Or=An.a.div(oe||(oe=Object(Mn.a)(["\n margin: 20px 0px;\n"]))),gr=An.a.img(se||(se=Object(Mn.a)(["\n width: 450px;\n height: 300px;\n border-radius: 30px;\n"]))),mr=An.a.div(le||(le=Object(Mn.a)(["\n margin-top: 20px;\n"]))),wr=An.a.span(de||(de=Object(Mn.a)(["\n font-size: 24px;\n font-weight: 500;\n"]))),vr=An.a.div(je||(je=Object(Mn.a)(["\n margin: 20px 0px;\n\n"]))),yr=An.a.button(pe||(pe=Object(Mn.a)(["\n background-color: blue;\n color: white;\n font-size: 16px;\n border: none;\n border-radius: 5px;\n width: 70px;\n height: 35px;\n cursor: pointer;\n"]))),kr=An.a.div(be||(be=Object(Mn.a)(["\n display: flex;\n flex-direction: column;\n"]))),zr=An.a.h3(xe||(xe=Object(Mn.a)(["\n margin-bottom: 10px;\n"]))),Sr=An.a.div(ue||(ue=Object(Mn.a)(["\n display: flex;\n margin-bottom: 5px;\n"]))),Dr=An.a.span(he||(he=Object(Mn.a)(["\n color: #696969;\n font-weight: 500;\n margin-right: 10px;\n"]))),Cr=An.a.p(fe||(fe=Object(Mn.a)(["\n color: #8f8f8f;\n font-weight: 300;\n"]))),Pr=An.a.div(Oe||(Oe=Object(Mn.a)(["\n display: flex;\n flex-direction: column;\n"]))),Hr=An.a.h3(ge||(ge=Object(Mn.a)(["\n margin-top: 20px;\n"]))),Mr=An.a.div(me||(me=Object(Mn.a)(["\n display: flex;\n flex-wrap: wrap;\n"]))),Ar=An.a.div(we||(we=Object(Mn.a)(["\n width: 120px;\n height: 120px;\n display: flex;\n flex-direction: column;\n margin: 15px 0px;\n cursor: pointer;\n"]))),Ur=An.a.img(ve||(ve=Object(Mn.a)(["\n width: 100px;\n height: 100px;\n border-radius: 5px;\n object-fit: cover;\n"]))),Br=An.a.span(ye||(ye=Object(Mn.a)(["\n margin-top: 5px;\n"]))),Fr=function(e){var n=e.page,t=e.city,r=e.from,c=e.relationShip,i=Object(dn.h)(),a=Object(sn.c)((function(e){return e.user.currentUser._id})),o=function(){var e=Object(bn.a)(pn.a.mark((function e(){return pn.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,e.next=3,Sn.put("/users/".concat(i.id,"/follow"),{userId:a});case 3:Yt.push("/"),Yt.go(0),e.next=10;break;case 7:e.prev=7,e.t0=e.catch(0),console.log(e.t0);case 10:case"end":return e.stop()}}),e,null,[[0,7]])})));return function(){return e.apply(this,arguments)}}();return Object(Nn.jsx)(xr,{children:"home"===n?Object(Nn.jsxs)(Nn.Fragment,{children:[Object(Nn.jsxs)(ur,{children:[Object(Nn.jsx)(hr,{src:pr}),Object(Nn.jsxs)(fr,{children:[Object(Nn.jsx)("b",{children:"Pola Foster"})," and ",Object(Nn.jsx)("b",{children:"3 other friends"})," have a birthday today."]})]}),Object(Nn.jsx)(Or,{children:Object(Nn.jsx)(gr,{src:br})}),Object(Nn.jsx)(wr,{children:"Online Friends"}),Object(Nn.jsx)(mr,{children:wt.map((function(e){return Object(Nn.jsx)(Ft,{name:e.username,image:e.profilePicture,online:"online"},e.id)}))})]}):Object(Nn.jsxs)(Nn.Fragment,{children:[Object(Nn.jsx)(vr,{children:Object(Nn.jsx)(yr,{onClick:o,children:"Follow"})}),Object(Nn.jsxs)(kr,{children:[Object(Nn.jsx)(zr,{children:"User Information"}),Object(Nn.jsxs)(Sr,{children:[Object(Nn.jsx)(Dr,{children:"City:"}),Object(Nn.jsx)(Cr,{children:t})]}),Object(Nn.jsxs)(Sr,{children:[Object(Nn.jsx)(Dr,{children:"From:"}),Object(Nn.jsx)(Cr,{children:r})]}),Object(Nn.jsxs)(Sr,{children:[Object(Nn.jsx)(Dr,{children:"Relationship:"}),Object(Nn.jsx)(Cr,{children:c})]})]}),Object(Nn.jsxs)(Pr,{children:[Object(Nn.jsx)(Hr,{children:"User Friends"}),Object(Nn.jsx)(Mr,{children:wt.map((function(e){return Object(Nn.jsxs)(Ar,{children:[Object(Nn.jsx)(Ur,{src:e.profilePicture}),Object(Nn.jsx)(Br,{children:e.username})]},e.id)}))})]})]})})},Gr=An.a.div(ke||(ke=Object(Mn.a)(["\n display: flex;\n background-color: #eeeeee;\n"]))),Ir=function(){return Object(Nn.jsxs)(Nn.Fragment,{children:[Object(Nn.jsx)(jr,{}),Object(Nn.jsxs)(Gr,{children:[Object(Nn.jsx)(Gt,{}),Object(Nn.jsx)(jt,{}),Object(Nn.jsx)(Fr,{page:"home"})]})]})},qr=function(){var e=Object(bn.a)(pn.a.mark((function e(n,t){var r;return pn.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return n(Lt()),e.prev=1,e.next=4,Sn.post("/auth/login",t);case 4:r=e.sent,n(Rt(r.data)),e.next=11;break;case 8:e.prev=8,e.t0=e.catch(1),n($t());case 11:case"end":return e.stop()}}),e,null,[[1,8]])})));return function(n,t){return e.apply(this,arguments)}}(),Tr=function(){var e=Object(bn.a)(pn.a.mark((function e(n,t){var r;return pn.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return n(Zt()),e.prev=1,e.next=4,Sn.post("/auth/register",t);case 4:r=e.sent,n(Kt(r.data)),e.next=11;break;case 8:e.prev=8,e.t0=e.catch(1),n(Qt());case 11:case"end":return e.stop()}}),e,null,[[1,8]])})));return function(n,t){return e.apply(this,arguments)}}(),Vr=An.a.div(ze||(ze=Object(Mn.a)(["\n display: flex;\n background-color: #e9e9e9;\n"]))),_r=An.a.div(Se||(Se=Object(Mn.a)(["\n height: 100vh;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n"]))),Wr=An.a.div(De||(De=Object(Mn.a)(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 500px;\n"]))),Yr=An.a.h1(Ce||(Ce=Object(Mn.a)(["\n font-size: 50px;\n color: #4267b2;\n margin-bottom: 10px;\n"]))),Er=An.a.span(Pe||(Pe=Object(Mn.a)(["\n font-size: 28px;\n"]))),Jr=An.a.div(He||(He=Object(Mn.a)(["\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"]))),Lr=An.a.form(Me||(Me=Object(Mn.a)(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 500px;\n padding: 50px 5px;\n background-color: white;\n border-radius: 20px;\n"]))),Rr=An.a.input(Ae||(Ae=Object(Mn.a)(["\n font-size: 18px;\n margin: 10px 0px;\n padding: 5px 20px;\n width: 80%;\n height: 50px;\n border: none;\n border: 1px solid gray;\n outline: none;\n border-radius: 10px;\n"]))),$r=An.a.button(Ue||(Ue=Object(Mn.a)(["\n font-size: 24px;\n margin: 20px 0px;\n padding: 15px 20px;\n width: 80%;\n border: none;\n border-radius: 10px;\n background-color: #4267b2;\n color: white;\n cursor: pointer;\n"]))),Nr=An.a.span(Be||(Be=Object(Mn.a)(["\n color: #0273be;\n cursor: pointer;\n"]))),Zr=An.a.button(Fe||(Fe=Object(Mn.a)(["\n font-size: 24px;\n margin: 20px 0px;\n padding: 15px 20px;\n width: 60%;\n border: none;\n border-radius: 10px;\n background-color: #197e00;\n color: white;\n cursor: pointer;\n"]))),Kr=An.a.span(Ge||(Ge=Object(Mn.a)(["\n font-size: 12px;\n color: red;\n margin: 5px 0px;\n"]))),Qr=function(){var e=Object(sn.b)(),n=Object(sn.c)((function(e){return e.user.error})),t=Object(cn.useState)(""),r=Object(xn.a)(t,2),c=r[0],i=r[1],a=Object(cn.useState)(""),o=Object(xn.a)(a,2),s=o[0],l=o[1];return Object(Nn.jsxs)(Vr,{children:[Object(Nn.jsx)(_r,{children:Object(Nn.jsxs)(Wr,{children:[Object(Nn.jsx)(Yr,{children:"Ozkan's Social"}),Object(Nn.jsx)(Er,{children:"Connect with friends and the world around you on Ozkan's Social"})]})}),Object(Nn.jsx)(Jr,{children:Object(Nn.jsxs)(Lr,{onSubmit:function(n){n.preventDefault(),qr(e,{username:c,password:s})},children:[Object(Nn.jsx)(Rr,{placeholder:"Username",value:c,onChange:function(e){return i(e.target.value)}}),Object(Nn.jsx)(Rr,{type:"password",placeholder:"Password",value:s,onChange:function(e){return l(e.target.value)}}),Object(Nn.jsx)($r,{children:"Log In"}),Object(Nn.jsx)(Nr,{children:"Forgot Password?"}),n&&Object(Nn.jsx)(Kr,{children:"Wrong Credentials!"}),Object(Nn.jsx)(Zr,{onClick:function(){Yt.push("/register"),Yt.go(0)},children:"Create a New Account"})]})})]})},Xr=t(6),ec=t(35),nc=An.a.div(Ie||(Ie=Object(Mn.a)(["\n display: flex;\n background-color: #e9e9e9;\n"]))),tc=An.a.div(qe||(qe=Object(Mn.a)(["\n height: 100vh;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n"]))),rc=An.a.div(Te||(Te=Object(Mn.a)(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 500px;\n"]))),cc=An.a.h1(Ve||(Ve=Object(Mn.a)(["\n font-size: 50px;\n color: #4267b2;\n margin-bottom: 10px;\n"]))),ic=An.a.span(_e||(_e=Object(Mn.a)(["\n font-size: 28px;\n"]))),ac=An.a.div(We||(We=Object(Mn.a)(["\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n"]))),oc=An.a.form(Ye||(Ye=Object(Mn.a)(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 500px;\n padding: 50px 5px;\n background-color: white;\n border-radius: 20px;\n"]))),sc=An.a.input(Ee||(Ee=Object(Mn.a)(["\n font-size: 18px;\n margin: 10px 0px;\n padding: 5px 20px;\n width: 80%;\n height: 50px;\n border: none;\n border: 1px solid gray;\n outline: none;\n border-radius: 10px;\n"]))),lc=(An.a.button(Je||(Je=Object(Mn.a)(["\n font-size: 24px;\n margin: 20px 0px;\n padding: 15px 20px;\n width: 80%;\n border: none;\n border-radius: 10px;\n background-color: #4267b2;\n color: white;\n cursor: pointer;\n"]))),An.a.span(Le||(Le=Object(Mn.a)(["\n color: #0273be;\n cursor: pointer;\n"]))),An.a.button(Re||(Re=Object(Mn.a)(["\n font-size: 24px;\n margin: 20px 0px;\n padding: 15px 20px;\n width: 60%;\n border: none;\n border-radius: 10px;\n background-color: #197e00;\n color: white;\n cursor: pointer;\n"])))),dc=function(){var e=Object(sn.b)(),n=Object(cn.useState)({username:"",email:"",password:"",confirmPassword:""}),t=Object(xn.a)(n,2),r=t[0],c=t[1],i=[{id:1,name:"username",type:"text",placeholder:"Username",title:"Username should be 3-16 characters and shouldn't include any special character!",pattern:"^[A-Za-z0-9]{3,16}$",required:!0},{id:2,name:"email",type:"email",placeholder:"Email",title:"It should be a valid email address!",required:!0},{id:3,name:"password",type:"password",placeholder:"Password",title:" Passwrod should be 8-16 characters and include at least 1 letter, 1 number and 1 special character!",pattern:"^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,20}$",required:!0},{id:4,name:"confirmPassword",type:"password",placeholder:"Confirm Password",title:"Password don't match!",pattern:r.password,required:!0}],a=function(e){c((function(n){return Object(ec.a)(Object(ec.a)({},n),{},Object(Xr.a)({},e.target.name,e.target.value))}))};return Object(Nn.jsxs)(nc,{children:[Object(Nn.jsx)(tc,{children:Object(Nn.jsxs)(rc,{children:[Object(Nn.jsx)(cc,{children:"Ozkan's Social"}),Object(Nn.jsx)(ic,{children:"Connect with friends and the world around you on Ozkan's Social"})]})}),Object(Nn.jsx)(ac,{children:Object(Nn.jsxs)(oc,{onSubmit:function(n){n.preventDefault();var t=Object(ec.a)({},r);Tr(e,t)},children:[i.map((function(e){return Object(Nn.jsx)(sc,Object(ec.a)(Object(ec.a)({},e),{},{value:r[e.name],onChange:a}),e.id)})),Object(Nn.jsx)(lc,{children:"Create a New Account"})]})})]})},jc=An.a.div($e||($e=Object(Mn.a)(["\n display: flex;\n background-color: #eeeeee;\n"]))),pc=An.a.div(Ne||(Ne=Object(Mn.a)(["\n display: flex;\n flex-direction: column;\n position: relative;\n"]))),bc=An.a.img(Ze||(Ze=Object(Mn.a)(["\n width: 100%;\n height: 300px;\n object-fit: cover;\n cursor: pointer;\n"]))),xc=An.a.img(Ke||(Ke=Object(Mn.a)(["\n width: 250px;\n height: 250px;\n border-radius: 50%;\n border: 3px solid white;\n object-fit: cover;\n position: absolute;\n left: 0;\n right: 0;\n top: 150px;\n margin: auto;\n cursor: pointer;\n"]))),uc=An.a.div(Qe||(Qe=Object(Mn.a)(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n margin-top: 110px;\n margin-bottom: 15px;\n"]))),hc=An.a.h3(Xe||(Xe=Object(Mn.a)(["\n font-size: 40px;\n"]))),fc=An.a.button(en||(en=Object(Mn.a)(["\n background-color: blue;\n color: white;\n width: 150px;\n padding: 5px;\n border: none;\n border-radius: 5px;\n font-size: 18px;\n font-weight: 400;\n margin: 5px;\n cursor: pointer;\n"]))),Oc=An.a.span(nn||(nn=Object(Mn.a)(["\n font-size: 24px;\n font-weight: 300;\n"]))),gc=An.a.div(tn||(tn=Object(Mn.a)(["\n flex: 4;\n"]))),mc=An.a.div(rn||(rn=Object(Mn.a)(["\n display: flex;\n"]))),wc=function(){var e=Object(dn.h)().id,n=Object(sn.c)((function(e){return e.user.currentUser._id})),t=Object(cn.useState)({username:"",profilePicture:"",coverPicture:"",city:"",from:"",realationShip:""}),r=Object(xn.a)(t,2),c=r[0],i=r[1],a=Object(cn.useState)(null),o=Object(xn.a)(a,2),s=o[0],l=o[1],d=Object(cn.useRef)();Object(cn.useEffect)((function(){(function(){var n=Object(bn.a)(pn.a.mark((function n(){var t;return pn.a.wrap((function(n){for(;;)switch(n.prev=n.next){case 0:return n.prev=0,n.next=3,Sn.get("/users/".concat(e));case 3:t=n.sent,console.log(t.data),i(t.data),n.next=11;break;case 8:n.prev=8,n.t0=n.catch(0),console.log(n.t0);case 11:case"end":return n.stop()}}),n,null,[[0,8]])})));return function(){return n.apply(this,arguments)}})()()}),[]);var j=function(){var e=Object(bn.a)(pn.a.mark((function e(){var n,t,r,i;return pn.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:n=(new Date).getTime()+s.name,t=Object(gn.b)(vn),r=Object(gn.c)(t,n),(i=Object(gn.d)(r,s)).on("state_changed",(function(e){var n=e.bytesTransferred/e.totalBytes*100;switch(console.log("Upload is "+n+"% done"),e.state){case"paused":console.log("Upload is paused");break;case"running":console.log("Upload is running")}}),(function(e){}),(function(){Object(gn.a)(i.snapshot.ref).then(function(){var e=Object(bn.a)(pn.a.mark((function e(n){var t,r;return pn.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return t=c._id,r={userId:t,profilePicture:n},e.prev=2,e.next=5,Sn.put("/users/".concat(t),r);case 5:window.location.reload(!1),e.next=11;break;case 8:e.prev=8,e.t0=e.catch(2),console.log(e.t0);case 11:case"end":return e.stop()}}),e,null,[[2,8]])})));return function(n){return e.apply(this,arguments)}}())}));case 5:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}(),p=function(){var e=Object(bn.a)(pn.a.mark((function e(){var n,t,r,i;return pn.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:n=(new Date).getTime()+s.name,t=Object(gn.b)(vn),r=Object(gn.c)(t,n),(i=Object(gn.d)(r,s)).on("state_changed",(function(e){var n=e.bytesTransferred/e.totalBytes*100;switch(console.log("Upload is "+n+"% done"),e.state){case"paused":console.log("Upload is paused");break;case"running":console.log("Upload is running")}}),(function(e){}),(function(){Object(gn.a)(i.snapshot.ref).then(function(){var e=Object(bn.a)(pn.a.mark((function e(n){var t,r;return pn.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return t=c._id,r={userId:t,coverPicture:n},e.prev=2,e.next=5,Sn.put("/users/".concat(t),r);case 5:window.location.reload(!1),e.next=11;break;case 8:e.prev=8,e.t0=e.catch(2),console.log(e.t0);case 11:case"end":return e.stop()}}),e,null,[[2,8]])})));return function(n){return e.apply(this,arguments)}}())}));case 5:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}();return Object(Nn.jsxs)(Nn.Fragment,{children:[Object(Nn.jsx)(jr,{}),Object(Nn.jsxs)(jc,{children:[Object(Nn.jsx)(Gt,{}),c&&Object(Nn.jsxs)(gc,{children:[Object(Nn.jsxs)(pc,{children:[Object(Nn.jsx)(bc,{src:c.coverPicture}),Object(Nn.jsx)(xc,{src:c.profilePicture}),Object(Nn.jsxs)(uc,{children:[Object(Nn.jsx)(hc,{children:c.username.charAt(0).toUpperCase()+c.username.slice(1)}),Object(Nn.jsx)(Oc,{children:c.desc})]})]}),Object(Nn.jsx)("input",{type:"file",ref:d,style:{display:"none"},onChange:function(e){return l(e.target.files[0])}}),e===n&&Object(Nn.jsxs)(Nn.Fragment,{children:[Object(Nn.jsx)(fc,{onClick:function(){d.current.click()},children:"Add Photo"}),Object(Nn.jsx)(fc,{onClick:j,children:"Change Profile Picture"}),Object(Nn.jsx)(fc,{onClick:p,children:"Change Cover Image"})]}),Object(Nn.jsxs)(mc,{children:[Object(Nn.jsx)(jt,{}),Object(Nn.jsx)(Fr,{page:"user",city:c.city,from:c.from,relationShip:c.relationShip})]})]})]})]})},vc=function(){var e=Object(sn.c)((function(e){return e.user.currentUser}));return Object(Nn.jsx)(ln.a,{children:Object(Nn.jsx)(Nn.Fragment,{children:Object(Nn.jsxs)(dn.d,{children:[Object(Nn.jsx)(dn.b,{path:"/",element:e?Object(Nn.jsx)(Ir,{}):Object(Nn.jsx)(dn.a,{to:"/login"})}),Object(Nn.jsx)(dn.b,{path:"/user/:id",element:e?Object(Nn.jsx)(wc,{}):Object(Nn.jsx)(dn.a,{to:"/login"})}),Object(Nn.jsx)(dn.b,{path:"/login",element:Object(Nn.jsx)(Qr,{})}),Object(Nn.jsx)(dn.b,{path:"/register",element:Object(Nn.jsx)(dc,{})})]})})})},yc=t(19),kc=t(25),zc=t(62),Sc={key:"root",version:1,storage:t.n(zc).a},Dc=Object(yc.b)({user:Xt}),Cc=Object(kc.g)(Sc,Dc),Pc=Object(_t.a)({reducer:Cc,middleware:function(e){return e({serializableCheck:{ignoredActions:[kc.a,kc.f,kc.b,kc.c,kc.d,kc.e]}})}}),Hc=Object(kc.h)(Pc),Mc=t(63);on.a.render(Object(Nn.jsx)(sn.a,{store:Pc,children:Object(Nn.jsx)(Mc.a,{loading:null,persistor:Hc,children:Object(Nn.jsx)(vc,{})})}),document.getElementById("root"))}},[[98,1,2]]]); 2 | //# sourceMappingURL=main.1c60124a.chunk.js.map --------------------------------------------------------------------------------