Merge pull request #1 from MLH-Fellowship/main

Get Up-to-date with main repo

.github/linters/.flake8

@@ -0,0 +1,2 @@
+[flake8]
+ignore = E501

.github/workflows/lints.yml

@@ -0,0 +1,27 @@
+name: Lint Code Base
+
+on:
+  [push, pull_request]
+
+jobs:
+  lint:
+    name: Run Linters
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+        with:
+          # Full git history is needed to get a proper list of changed files within `super-linter`
+          fetch-depth: 0
+
+      - name: Run Individual Linters
+        uses: github/super-linter@v3
+        env:
+          VALIDATE_ALL_CODEBASE: false
+          VALIDATE_PYTHON_FLAKE8: true
+          VALIDATE_JAVASCRIPT_ES: true
+          JAVASCRIPT_DEFAULT_STYLE: prettier
+          VALIDATE_JAVASCRIPT_PRETTIER: true
+          DEFAULT_BRANCH: main
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -16,6 +16,18 @@ A social-media platform that lets you upload images and secure them with a perso
 
 <img src="https://user-images.githubusercontent.com/64848982/114246722-f1812a80-99b0-11eb-8d79-705978fc712f.png">
 
+## 📱 Progressive WebApp
+SocioMark is now a Progressive WebApp for better accessibility and user experience. It allows users to install the app directly from the web to their desktops/home screens and provides the native app-like experience.
+
+Being a fully responsive and compatible application, it provides users with the same experience across tablets, mobile devices, and desktops!
+
+<p align="center">
+  <img alt="Light" src="https://user-images.githubusercontent.com/34866653/114988100-8dc89700-9eb3-11eb-892a-217aa0b5622c.jpg" width="45%">
+&nbsp; &nbsp; &nbsp; &nbsp;
+  <img alt="Dark" src="https://user-images.githubusercontent.com/34866653/114988153-a0db6700-9eb3-11eb-81d8-1a84eae83aa3.png" width="50%">
+</p>
+
+
 ## ⚛ Tech Stack
 - Frontend : ReactJS (JavaScript), Tailwind CSS
 - Backend : FastAPI (Python3)

backend/app/server/controllers/post.py

@@ -58,7 +58,7 @@ async def add_post(email: str, post_data: dict) -> dict:
         encoded_image = await encode_image(rgb_image, info)
 
         # upload the image
-        with tempfile.NamedTemporaryFile(suffix=".png") as tmp:
+        with tempfile.NamedTemporaryFile(delete=False, suffix=".png") as tmp:
             cv2.imwrite(tmp.name, encoded_image)
             image_url = upload_image_path(tmp.name)
 
@@ -116,7 +116,7 @@ async def update_post(email: str, post_id: str, data: dict):
     post = await posts_collection.find_one({"_id": ObjectId(post_id)})
     if post and user["_id"] == post["user_id"]:
         updated_post = await posts_collection.update_one(
-            {"_id": ObjectId(id)}, {"$set": data}
+            {"_id": ObjectId(post_id)}, {"$set": data}
         )
         if updated_post:
             return True

backend/app/server/models/post.py

@@ -19,6 +19,7 @@ class Config:
 
 
 class UpdatePostModel(BaseModel):
+    post_id: str
     description: Optional[str]
 
     class Config:

backend/app/server/routes/post.py

@@ -37,9 +37,9 @@ async def delete_post_data(post_id: str = Body(..., embed=True), current_user=De
 
 
 @router.patch("/update", response_description="Update post")
-async def update_post_data(post_id: str, updated_post: UpdatePostModel = Body(...), current_user=Depends(auth_handler.auth_wrapper)):
+async def update_post_data(updated_post: UpdatePostModel = Body(...), current_user=Depends(auth_handler.auth_wrapper)):
     updated_post = jsonable_encoder(updated_post)
-    new_post = await update_post(current_user, post_id, updated_post)
+    new_post = await update_post(current_user, updated_post["post_id"], updated_post)
     return ResponseModel(new_post, "Post updated successfully.")
 
 

frontend/public/index.html

@@ -4,17 +4,17 @@
     <meta charset="utf-8" />
     <link
       rel="icon"
-      href="https://cdn.discordapp.com/attachments/823820570004684800/830159339503222784/LogoMakr-0Cp6iq.png"
+      href="https://user-images.githubusercontent.com/34866653/114776270-e999ff80-9d8f-11eb-818c-d0b630694f93.png"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="A social media platform that lets you upload images and secures them by embedding a personalised hash."
     />
     <link
       rel="apple-touch-icon"
-      href="https://cdn.discordapp.com/attachments/823820570004684800/830159339503222784/LogoMakr-0Cp6iq.png"
+      href="https://user-images.githubusercontent.com/34866653/114776270-e999ff80-9d8f-11eb-818c-d0b630694f93.png"
     />
     <!--
       manifest.json provides metadata used when your web app is installed on a

frontend/public/manifest.json

@@ -1,25 +1,31 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "name": "SocioMark",
+  "short_name": "SocioMark",
+  "theme_color": "#000000",
+  "background_color": "#000000",
+  "display": "standalone",
+  "scope": "/",
+  "start_url": "/",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "src": "https://user-images.githubusercontent.com/34866653/114776270-e999ff80-9d8f-11eb-818c-d0b630694f93.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "https://user-images.githubusercontent.com/34866653/114776064-acce0880-9d8f-11eb-9be5-a77550499fc6.png",
+      "sizes": "256x256",
+      "type": "image/png"
     },
     {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
+      "src": "https://user-images.githubusercontent.com/34866653/114776161-c8d1aa00-9d8f-11eb-9f60-feccb054f200.png",
+      "sizes": "384x384",
+      "type": "image/png"
     },
     {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
+      "src": "https://user-images.githubusercontent.com/34866653/114776167-ca02d700-9d8f-11eb-997e-c380797663f2.png",
+      "sizes": "512x512",
+      "type": "image/png"
     }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  ]
 }

frontend/src/Components/Account/Login.js

@@ -85,7 +85,7 @@ export default function Login({ onToggle }) {
                 />
               </div>
 
-              <div className=" flex flex-col sm:flex-row items-center justify-between mt-4">
+              <div className=" flex flex-col sm:flex-row items-start sm:items-center justify-between mt-4">
                 <button
                   type="submit"
                   className="flex w-full sm:w-1/3 items-center bg-indigo-500 hover:bg-indigo-800 text-white font-bold py-2 px-4 sm:px-3 rounded focus:outline-none focus:shadow-outline"

frontend/src/Components/Navbars/Navbar.js

@@ -109,7 +109,7 @@ export default function Navbar({ links, logout }) {
     axios.get(USER_SUGGESTIONS_URL).then((res) => {
       setUsers(res.data.data);
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line
   }, []);
 
   useEffect(() => {
@@ -121,7 +121,7 @@ export default function Navbar({ links, logout }) {
     } else {
       setSearchResults([]);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line
   }, [searchKey]);
 
   return (

frontend/src/Components/Post/Post.js

@@ -14,12 +14,15 @@ import {
   POST_REPORT_URL,
   POST_REPORT_COOLDOWN,
   POST_VERIFY_URL,
+  POST_EDIT_URL,
 } from "../../constants";
 
-export default function Post({ post_initializer }) {
+export default function Post({ handleDeletePost, post_initializer }) {
   const { user, token } = useContext(AuthContext);
   const [access] = token;
   const [post, setPost] = useState(post_initializer);
+  const [isUserEditingPost, setUserEditingPost] = useState(false);
+  const [description, setDescription] = useState(post.description);
   const [fade, setFade] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const [modalText, setModalText] = useState("");
@@ -30,6 +33,37 @@ export default function Post({ post_initializer }) {
     setPost(new_post);
   };
 
+  const handleChange = (e) => {
+    setDescription(e.target.value);
+  };
+
+  const handleEditPost = (post_id) => {
+    axios
+      .patch(
+        `${POST_EDIT_URL}`,
+        { post_id, description },
+        {
+          headers: {
+            accept: "application/json",
+            Authorization: "Bearer " + access,
+          },
+        }
+      )
+      .then((res) => {
+        let new_post = Object.assign({}, post);
+        new_post.description = description;
+        setPost(new_post);
+        setUserEditingPost(false);
+        toast.info(JSON.stringify(res.data.message));
+      })
+      .catch(({ response }) => {
+        if (response) {
+          toast.error(JSON.stringify(response.data.detail));
+        }
+        setUserEditingPost(false);
+      });
+  };
+
   const handleLike = (post_id) => {
     axios
       .post(
@@ -173,6 +207,7 @@ export default function Post({ post_initializer }) {
               <div className="flex gap-x-2 items-center ">
                 <A
                   href="#"
+                  title="Like"
                   onClick={() => {
                     handleLike(post.post_id);
                   }}
@@ -222,6 +257,7 @@ export default function Post({ post_initializer }) {
               ) : (
                 <A
                   href="#"
+                  title="Report"
                   onClick={() => {
                     handleReport(post.post_id);
                   }}
@@ -237,6 +273,23 @@ export default function Post({ post_initializer }) {
                   </svg>
                 </A>
               )}
+              {user[0].user_id === post.user_id && (
+                <A
+                  href="#"
+                  title="Delete"
+                  onClick={() => handleDeletePost(post.post_id)}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    fill="red"
+                    class="bi bi-trash-fill opacity-50 hover:opacity-100"
+                    viewBox="0 0 16 16"
+                  >
+                    <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z" />
+                  </svg>
+                </A>
+              )}
             </div>
           </div>
           <div className="mx-auto container">
@@ -267,7 +320,52 @@ export default function Post({ post_initializer }) {
               )}
             </div>
           </div>
-          <div className="px-2 text-sm  font-bold mt-1">{post.description}</div>
+          <div className="flex justify-between w-full items-center px-4">
+            {user[0].user_id == post.user_id ? (
+              !isUserEditingPost ? (
+                <>
+                  {post.description}
+                  <svg
+                    onClick={() => setUserEditingPost(true)}
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="25"
+                    height="25"
+                    fill="currentColor"
+                    class="bi bi-pencil-fill clickable"
+                    viewBox="0 0 20 20"
+                  >
+                    <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z" />
+                  </svg>
+                </>
+              ) : (
+                <>
+                  <textarea
+                    aria-label="description"
+                    onChange={handleChange}
+                    name="description"
+                    value={description}
+                    type="description"
+                    className="edit-post-area appearance-none block w-full bg-white text-blue-900 font-normal border border-blue-400 rounded py-3 px-4 mb-4 leading-tight focus:outline-none focus:bg-white focus:border-blue-500"
+                    placeholder="Add a description for your post..."
+                  />
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    onClick={() => handleEditPost(post.post_id)}
+                    width="35"
+                    height="35"
+                    fill="green"
+                    class="bi bi-check-circle clickable"
+                    viewBox="0 0 16 16"
+                  >
+                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+                    <path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z" />
+                  </svg>
+                </>
+              )
+            ) : (
+              <>{post.description}</>
+            )}
+          </div>
           {post.comments.map((comment) => {
             return (
               <Comment