deepak-sharma-21 · MuskanIss · Mar 2, 2022 · Mar 2, 2022 · Mar 6, 2022
diff --git a/facebook-clone/dp.json b/facebook-clone/dp.json
diff --git a/facebook-clone/package-lock.json b/facebook-clone/package-lock.json
diff --git a/facebook-clone/package.json b/facebook-clone/package.json
@@ -5,13 +5,20 @@
   "dependencies": {
     "@emotion/react": "^11.8.1",
     "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.4.4",
     "@mui/material": "^5.4.4",
+    "@mui/styled-engine-sc": "^5.4.2",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.26.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
+    "react-player": "^2.9.0",
     "react-scripts": "5.0.0",
+    "styled-components": "^5.3.3",
+    "uuid": "^8.3.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/facebook-clone/public/index.html b/facebook-clone/public/index.html
@@ -24,6 +24,15 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+
+    <link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+/>
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/icon?family=Material+Icons"
+/>
     <title>React App</title>
   </head>
   <body>

diff --git a/facebook-clone/src/App.js b/facebook-clone/src/App.js
@@ -1,23 +1,17 @@
-import logo from './logo.svg';
 import './App.css';
+import HomePost from './components/HomePost';
+import MediaPost from './components/MediaPost';
+import PostInput from './components/PostInput';
+
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <h1>hello first time using mui</h1>
+      {/* //<MediaPost />// */}
+      <MediaPost />
+      <HomePost />
+      <PostInput />
     </div>
   );
 }

diff --git a/facebook-clone/src/components/DeletePost.jsx b/facebook-clone/src/components/DeletePost.jsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import { Context } from './PostContext';
+
+export default function BasicMenu( {key}) {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const { user, setUser} = React.useContext(Context)
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    console.log(key);
+    setAnchorEl(null);
+  };
+
+
+  const handleDelete = () => {
+        // find index of todo from id
+        const index = user.findIndex((users) => users.id === key);
+
+        // remove todo
+        user.splice(index, 1);
+
+        // update the state
+        setUser([...user]);
+    };
+
+  return (
+    <div>
+      <Button
+        id="basic-button"
+        aria-controls={open ? 'basic-menu' : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+        onClick={handleClick}
+      >
+        <MoreVertIcon />
+      </Button>
+      <Menu
+        id="basic-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          'aria-labelledby': 'basic-button',
+        }}
+      >
+        <MenuItem onClick={handleDelete}>Delete</MenuItem>
+      </Menu>
+    </div>
+  );
+}
diff --git a/facebook-clone/src/components/HomePost.jsx b/facebook-clone/src/components/HomePost.jsx
@@ -0,0 +1,259 @@
+import React, { useEffect, useContext, useState } from 'react'
+import { Avatar, Button, Card, CardContent, CardHeader, CardMedia, Collapse, IconButton, Typography } from '@mui/material';
+import { red } from '@mui/material/colors';
+import styles from "./style.module.css"
+import { v4 } from 'uuid';
+import ReactPlayer from 'react-player';
+
+import axios from "axios";
+import { Box } from '@mui/system';
+import ThumbUpIcon from '@mui/icons-material/ThumbUp';
+import BasicMenu from './DeletePost';
+import { Comment, ExpandMore } from '@mui/icons-material';
+import ChatBubbleOutlineOutlinedIcon from '@mui/icons-material/ChatBubbleOutlineOutlined';
+import { Context } from './PostContext';
+import ShareIcon from '@mui/icons-material/Share';
+
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import Tooltip, { tooltipClasses } from "@mui/material/Tooltip";
+import { styled } from "@mui/material/styles";
+
+const CustomWidthTooltip = styled(({ className, ...props }) => (
+    <Tooltip {...props} classes={{ popper: className }} />
+))({
+    [`& .${tooltipClasses.tooltip}`]: {
+        fontSize: 30,
+    }
+});
+
+
+
+const HomePost = () => {
+
+    const { user, setUser } = useContext(Context);
+
+    const [expanded, setExpanded] = React.useState(false);
+
+    const [comment, setComment] = useState("")
+
+    const handleExpandClick = () => {
+        setExpanded(!expanded);
+    };
+
+
+
+    useEffect(() => {
+        fetchUsers();
+    }, []);
+
+    const fetchUsers = () => {
+        axios
+            .get('http://localhost:3000/posts')
+            .then((res) => {
+                console.log(res);
+                setUser(res.data);
+            })
+            .catch((err) => {
+                console.log(err);
+            });
+    };
+
+    const onChangeHandle = (e) => {
+        setComment(e.currentTarget.value);
+
+    }
+
+    const handleFormSubmit = (event) => {
+        event.preventDefault();
+
+        // check if the value is empty
+        if (comment.trim().length === 0) {
+            alert("Please enter a value!");
+            return;
+        }
+
+        // create a new todo
+        const comm = {
+            id: v4,
+            comment: comment,
+        }
+
+        // add todo to the state
+        setUser([comm, ...user]);
+
+        // clear the value of task
+        setComment("");
+    };
+
+
+    // const PostUsers = () => {
+    //     axios
+    //         .post('https://jsonservermock.herokuapp.com/posts', {
+    //             ...user,
+    //             comment,
+    //         })
+    //         .then((res) => {
+    //             console.log(res);
+    //             setUser(res.data);
+    //         })
+    //         .catch((err) => {
+    //             console.log(err);
+    //         });
+    // };
+
+    const longText = "👍 😂 😍 🥰 😡";
+
+
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event) => {
+        console.log(event.id, event)
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const handleDelete = (itemToDelete) => {
+        console.log(itemToDelete.id)
+        const userList = user.filter((e) => e.id !== itemToDelete.id);
+        setUser(userList);
+    };
+
+
+    return (
+        <div>
+            <Box>
+                {user.map((user) => (
+
+                    <Card sx={{ maxWidth: 500, maxHeight: "fit-content", marginBlock: 10, }} >
+                        <CardHeader sx={{ textAlign: "left" }}
+                            avatar={
+                                <Avatar sx={{ bgcolor: red[500] }}
+                                    aria-label="recipe"
+                                    alt={user.first_name}
+                                    src={user.avatar}
+                                >
+                                    R
+                                </Avatar>
+                            }
+                            action={
+                                <div>
+                                    <Button
+                                        id="basic-button"
+                                        aria-controls={open ? 'basic-menu' : undefined}
+                                        aria-haspopup="true"
+                                        aria-expanded={open ? 'true' : undefined}
+                                        onClick={handleClick}
+                                    >
+                                        <MoreVertIcon />
+                                    </Button>
+                                    <Menu
+                                        id="basic-menu"
+                                        anchorEl={anchorEl}
+                                        open={open}
+                                        onClose={handleClose}
+                                        MenuListProps={{
+                                            'aria-labelledby': 'basic-button',
+                                        }}
+                                    >
+                                        <MenuItem onClick={handleDelete}>Delete</MenuItem>
+                                    </Menu>
+                                </div>
+                            }
+                            title={user.username}
+                            subheader="September 14, 2016"
+
+
+                        />
+
+
+                        <CardContent sx={{ textAlign: "left" }}>
+                            <Typography variant="body2" color="text.secondary">
+                                {user.post_disc}
+                            </Typography>
+                        </CardContent>
+                        <CardMedia
+                            component="img"
+                            height="fit-content"
+                            image={user.post}
+                            alt={user.first_name}
+                        />
+
+                        <Box sx={{ textAlign: "left", margin: 1, display: "flex", gap: 1 }}>
+                            <ThumbUpIcon />{user.likes}
+
+                        </Box>
+                        <Box sx={{
+                            border: 1,
+                            borderRight: 0,
+                            borderLeft: 0,
+                            margin: 1,
+                            marginBottom: 0,
+                            display: "flex",
+                            borderColor: 'grey',
+                            padding: 0, grap: 4
+                        }}>
+
+                            <CustomWidthTooltip title={longText}>
+                                <IconButton sx={{ marginLeft: 6, marginRight: 12, fontSize: 5 }}>
+                                    <ThumbUpIcon style={{ fontSize: 25 }} /><p style={{ marginLeft: "10px", fontSize: "12px" }}>Like</p>
+                                </IconButton>
+                            </CustomWidthTooltip>
+
+
+
+                            <IconButton expand={expanded} onClick={handleExpandClick}>
+                                <ChatBubbleOutlineOutlinedIcon style={{ fontSize: 25 }} /><p style={{ marginLeft: "10px", fontSize: "13px" }}>Comment</p>
+                            </IconButton>
+
+                            <IconButton sx={{ marginLeft: 6, marginRight: 15, fontSize: 5 }}>
+                                    <ShareIcon style={{ fontSize: 25 }} /><p style={{ marginLeft: "10px", fontSize: "12px" }}>Like</p>
+                                </IconButton>
+                        </Box>
+
+                        <Collapse in={expanded} timeout="auto" unmountOnExit>
+                            <CardHeader sx={{ textAlign: "left" }}
+                                avatar={
+                                    <Avatar sx={{ bgcolor: red[500] }}
+                                        aria-label="recipe"
+                                        alt={user.first_name}
+                                        src={user.avatar}
+                                    >
+                                        R
+                                    </Avatar>
+                                }
+                                title={
+                                    <form onSubmit={handleFormSubmit}>
+                                        <input className={styles.inputBox}
+                                            type="text"
+                                            name="comment"
+                                            placeholder="Write a comment..."
+                                            value={comment}
+                                            onChange={onChangeHandle} />
+                                        <button type="submit">Submit</button>
+                                    </form>
+
+
+                                }
+
+                            />
+                            {/* {user.comment.map((comments) => (
+                            <li key={user.id}>
+                                {comments.commented}
+                                </li>
+                        ))} */}
+                        </Collapse>
+                    </Card>
+
+
+                ))}
+            </Box>
+        </div>
+    )
+}
+
+export default HomePost