CS322-spring22 · bmwise · May 7, 2022 · May 8, 2022 · May 8, 2022 · May 8, 2022
diff --git a/.env b/.env
@@ -1,2 +1 @@
 MONGO_URL = mongodb+srv://atrieu:Copycopy27@band.mrp7y.mongodb.net/social?retryWrites=true&w=majority
-REACT_APP_PUBLIC_FOLDER = https://localhost:8800/images/
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1 @@
 node_modules
-build/
diff --git a/index.js → anbm-api/index.js b/index.js → anbm-api/index.js
@@ -48,12 +48,6 @@ app.use("/api/users", userRoute);
 app.use("/api/auth", authRoute);
 app.use("/api/posts", postRoute);
 
-app.use(express.static(path.join(__dirname,"/anbm/build")));
-
-app.get('*',(req,res)=>{
-    res.sendFile(path.join(__dirname,'/anbm/build','index.html'));
-});
-
-app.listen(process.env.PORT || 8800, () => {
+app.listen(8800, () => {
     console.log("Backend sever is running!")
 }) 
diff --git a/models/Post.js → anbm-api/models/Post.js b/models/Post.js → anbm-api/models/Post.js
diff --git a/models/User.js → anbm-api/models/User.js b/models/User.js → anbm-api/models/User.js
diff --git a/public/images/dislike.jpg → anbm-api/public/images/dislike.jpg b/public/images/dislike.jpg → anbm-api/public/images/dislike.jpg
diff --git a/public/images/like.jpg → anbm-api/public/images/like.jpg b/public/images/like.jpg → anbm-api/public/images/like.jpg
diff --git a/public/images/post/post1.jpg → anbm-api/public/images/post/post1.jpg b/public/images/post/post1.jpg → anbm-api/public/images/post/post1.jpg
diff --git a/public/images/post/post2.jpg → anbm-api/public/images/post/post2.jpg b/public/images/post/post2.jpg → anbm-api/public/images/post/post2.jpg
diff --git a/public/images/post/post3.jpg → anbm-api/public/images/post/post3.jpg b/public/images/post/post3.jpg → anbm-api/public/images/post/post3.jpg
diff --git a/public/images/profile/photo1.jpg → anbm-api/public/images/profile/photo1.jpg b/public/images/profile/photo1.jpg → anbm-api/public/images/profile/photo1.jpg
diff --git a/public/images/profile/photo2.jpg → anbm-api/public/images/profile/photo2.jpg b/public/images/profile/photo2.jpg → anbm-api/public/images/profile/photo2.jpg
diff --git a/public/images/profile/photo3.jpg → anbm-api/public/images/profile/photo3.jpg b/public/images/profile/photo3.jpg → anbm-api/public/images/profile/photo3.jpg
diff --git a/public/images/profile/template_3.jpg → ...-api/public/images/profile/template_3.jpg b/public/images/profile/template_3.jpg → ...-api/public/images/profile/template_3.jpg
diff --git a/routes/auth.js → anbm-api/routes/auth.js b/routes/auth.js → anbm-api/routes/auth.js
@@ -38,7 +38,6 @@ router.post("/login", async (req, res) => {
 
         res.status(200).json(user);
     } catch (err) {
-        console.log(err);
         res.status(500).json(err);
     }
 });

diff --git a/routes/posts.js → anbm-api/routes/posts.js b/routes/posts.js → anbm-api/routes/posts.js
diff --git a/routes/users.js → anbm-api/routes/users.js b/routes/users.js → anbm-api/routes/users.js
diff --git a/anbm/package.json b/anbm/package.json
@@ -18,7 +18,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "GENERATE_SOURCEMAP=false && react-scripts build",
+    "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

diff --git a/anbm/public/favicon.ico b/anbm/public/favicon.ico
diff --git a/anbm/public/index.html b/anbm/public/index.html
@@ -10,7 +10,7 @@
     <link 
       href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" 
       rel="stylesheet">
-      <link rel="stylesheet" href="/assets/style.css">
+      <link rel="stylesheet" href="http://localhost:3000/assets/style.css">
     <title>Social App</title>
   </head>
   <body>

diff --git a/anbm/src/apiCalls.js b/anbm/src/apiCalls.js
@@ -1,9 +1,9 @@
-import { axiosInstance } from "./config";
+import axios from "axios";
 
 export const loginCall = async (userCredentials, dispatch) => {
     dispatch ({ type: "LOGIN_START"});
     try{
-        const res = await axiosInstance.post("auth/login", userCredentials);
+        const res = await axios.post("auth/login", userCredentials);
         dispatch ({ type: "LOGIN_SUCCESS", payload: res.data});
     } catch (err){
         dispatch ({ type: "LOGIN_FAILURE", payload: err});

diff --git a/anbm/src/components/mainfeed/Feed.jsx b/anbm/src/components/mainfeed/Feed.jsx
@@ -2,17 +2,17 @@ import "./feed.css";
 import Post from "../post/Post";
 import Share from "../share/Share";
 import { useContext, useEffect, useState } from "react";
+import axios from "axios"
 import { AuthContext } from "../../context/AuthContext";
-import { axiosInstance } from "../../config";
 
 export default function Feed({ username }) {
     const [posts, setPosts] = useState([])
     const { user } = useContext(AuthContext)
     useEffect(() => {
         const fetchPosts = async () => {
             const res = username
-                ? await axiosInstance.get("/posts/profile/" + username)
-                : await axiosInstance.get("posts/timeline/" + user._id)
+                ? await axios.get("/posts/profile/" + username)
+                : await axios.get("posts/timeline/" + user._id)
             setPosts(res.data)
         };
         fetchPosts();

diff --git a/anbm/src/components/post/Post.jsx b/anbm/src/components/post/Post.jsx
@@ -1,10 +1,10 @@
 import "./post.css"
 import { MoreVert, ThumbDown, ThumbUp, Comment, Save, Share } from "@material-ui/icons"
 import { useState, useEffect, useContext } from "react";
+import axios from "axios"
 import { format } from "timeago.js"
 import { Link } from "react-router-dom";
 import { AuthContext } from "../../context/AuthContext";
-import { axiosInstance } from "../../config";
 
 export default function Post({ post }) {
     const [like, setLike] = useState(post.likes.length)
@@ -13,7 +13,7 @@ export default function Post({ post }) {
     const { user: currentUser } = useContext(AuthContext)
     const likeHandler = () => {
         try {
-            axiosInstance.put("/posts/" + post._id + "/like", { userId: currentUser._id })
+            axios.put("/posts/" + post._id + "/like", { userId: currentUser._id })
         } catch (err) {
 
         }
@@ -24,7 +24,7 @@ export default function Post({ post }) {
     const [isDisliked, setIsDisliked] = useState(false)
     const dislikeHandler = () => {
         try {
-            axiosInstance.put("/posts/" + post._id + "/dislike", { userId: currentUser._id })
+            axios.put("/posts/" + post._id + "/dislike", { userId: currentUser._id })
         } catch (err) {
 
         }
@@ -40,7 +40,7 @@ export default function Post({ post }) {
 
     useEffect(() => {
         const fetchUser = async () => {
-            const res = await axiosInstance.get(`/users?userId=${post.userId}`)
+            const res = await axios.get(`/users?userId=${post.userId}`)
             setUser(res.data)
         };
         fetchUser();
@@ -52,7 +52,7 @@ export default function Post({ post }) {
                 <div className="postLeft">
                     <div className="postLeftTop">
                         <div className="postLeftTopLeft">
-                            <Link to={`/profile/${user.username}`}>
+                            <Link to={`profile/${user.username}`}>
                                 <img
                                     className="postProfileImg"
                                     src={user.profilePicture ? PF + user.profilePicture : PF + "profile/noAvatar.png"}

diff --git a/anbm/src/components/rightsidebar/Rightsidebar.jsx b/anbm/src/components/rightsidebar/Rightsidebar.jsx
@@ -110,4 +110,4 @@ export default function Rightsidebar({ user }) {
             </div>
         </div>
     );
-}
+}
diff --git a/anbm/src/components/share/Share.jsx b/anbm/src/components/share/Share.jsx
@@ -1,24 +1,73 @@
 import "./share.css"
-import { PermMedia, Label, Room, EmojiEmotions } from "@material-ui/icons"
+import { PermMedia, Label, Room, EmojiEmotions, Cancel } from "@material-ui/icons"
+import { useContext, useRef, useState } from "react";
+import { AuthContext } from "../../context/AuthContext";
+import axios from "axios";
 
 export default function Share() {
+  const { user } = useContext(AuthContext);
+  const PF = process.env.REACT_APP_PUBLIC_FOLDER;
+  const desc = useRef();
+  const [file, setFile] = useState(null);
+
+  const submitHandler = async (e) => {
+    e.preventDefault()
+    const newPost = {
+      userId: user._id,
+      desc: desc.current.value
+    }
+    if (file) {
+      const data = new FormData();
+      const fileName = Date.now() + file.name;
+      data.append("file", file)
+      data.append("name", fileName);
+      newPost.img = fileName;
+      try {
+        await axios.post("/upload", data)
+      } catch (err) {
+        console.log(err)
+      }
+    }
+
+    try {
+
+      await axios.post("/posts", newPost)
+      window.location.reload()
+    } catch (err) {
+
+    }
+  }
   return (
     <div className="share">
       <div className="shareWrapper">
         <div className="shareTop">
-          <img className="shareProfileImg" src="/assets/profile/template_3.jpg" alt="" />
+          <img className="shareProfileImg" src={user.profilePicture ? PF + user.profilePicture : PF + "profile/noAvatar.png"} alt="" />
           <input
-            placeholder="what's in your mind Safak?"
+            placeholder={"what's in your mind" + user.username + "?"}
             className="shareInput"
+            ref={desc}
           />
         </div>
         <hr className="shareHr" />
-        <div className="shareBottom">
+        {file && (
+          <div className="shareImgContainer">
+            <img className="shareImg" src={URL.createObjectURL(file)} alt="" />
+            <Cancel className="shareCancelImg" onClick={() => setFile(null)} />
+          </div>
+        )}
+        <form className="shareBottom" onSubmit={submitHandler}>
           <div className="shareOptions">
-            <div className="shareOption">
+            <label htmlFor="file" className="shareOption">
               <PermMedia htmlColor="tomato" className="shareIcon" />
               <span className="shareOptionText">Photo or Video</span>
-            </div>
+              <input
+                style={{ display: "none" }}
+                type="file"
+                id="file"
+                accept=".png,.jpeg,.jpg"
+                onChange={(e) => setFile(e.target.files[0])}
+              />
+            </label>
             <div className="shareOption">
               <Label htmlColor="blue" className="shareIcon" />
               <span className="shareOptionText">Tag</span>
@@ -28,13 +77,15 @@ export default function Share() {
               <span className="shareOptionText">Location</span>
             </div>
             <div className="shareOption">
-              <EmojiEmotions htmlColor="gold" className="shareIcon" />
-              <span className="shareOptionText">Feeling</span>
+              <EmojiEmotions htmlColor="goldenrod" className="shareIcon" />
+              <span className="shareOptionText">Feelings</span>
             </div>
           </div>
-          <button className="shareButton">Share</button>
-        </div>
+          <button className="shareButton" type="submit">
+            Share
+          </button>
+        </form>
       </div>
     </div>
-  )
-}
+  );
+}
diff --git a/anbm/src/config.js b/anbm/src/config.js
@@ -1,5 +1,6 @@
 import axios from "axios"
 
 export const axiosInstance = axios.create({
-    baseURL: "https://band-cs322.herokuapp.com/api"
+    //baseURL: "https://band-cs322.herokuapp.com/api/"
+    baseURL : "http://localhost:8800/api"
 })
diff --git a/anbm/src/pages/home/register/Register.jsx b/anbm/src/pages/home/register/Register.jsx
@@ -2,7 +2,7 @@ import "./register.css";
 import {Link} from "react-router-dom";
 import { useRef } from "react";
 import { useNavigate } from "react-router";
-import { axiosInstance } from "../../../config";
+import axios from "axios";
 
 export default function Register(){
     const username = useRef();
@@ -24,7 +24,7 @@ export default function Register(){
                 password: password.current.value,
             };
             try{
-                await axiosInstance.post("/auth/register", user);
+                await axios.post("/auth/register", user);
                 navigate("/login");
             } catch (err) {
                 console.log(err)

diff --git a/anbm/src/pages/profile/profile.jsx b/anbm/src/pages/profile/profile.jsx
@@ -4,16 +4,16 @@ import Rightsidebar from "../../components/rightsidebar/Rightsidebar";
 import Feed from '../../components/mainfeed/Feed';
 import NavBar from '../../components/NavBar/NavBar';
 import { useEffect, useState } from "react";
+import axios from "axios"
 import { useParams } from "react-router"
-import { axiosInstance } from "../../config";
 
 export default function Profile() {
     const PF = process.env.REACT_APP_PUBLIC_FOLDER;
     const [user, setUser] = useState({})
     const username = useParams().username;
     useEffect(() => {
         const fetchUser = async () => {
-            const res = await axiosInstance.get(`/users?username=${username}`)
+            const res = await axios.get(`/users?username=${username}`)
             setUser(res.data)
         };
         fetchUser();
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		MONGO_URL = mongodb+srv://atrieu:Copycopy27@band.mrp7y.mongodb.net/social?retryWrites=true&w=majority
		REACT_APP_PUBLIC_FOLDER = https://localhost:8800/images/
-Original file line number
+Diff line change
@@ Expand Up / @@ -110,4 +110,4 @@ export default function Rightsidebar({ user }) { @@
                 </div>
             </div>
         );
-    }
+    }