diff --git a/package-lock.json b/package-lock.json index ced62a6..064d17a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,8 +1,10 @@ { "name": "recess", "version": "0.1.0", - "lockfileVersion": 2, + "lockfileVersion": 1, "requires": true, +<<<<<<< HEAD +======= "packages": { "": { "name": "recess", @@ -20800,6 +20802,7 @@ } } }, +>>>>>>> ef9797f3bfda2b355d971730580a7ef6509846a5 "dependencies": { "@babel/code-frame": { "version": "7.10.4", @@ -22108,16 +22111,25 @@ } }, "@firebase/auth-interop-types": { +<<<<<<< HEAD + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.1.5.tgz", + "integrity": "sha512-88h74TMQ6wXChPA6h9Q3E1Jg6TkTHep2+k63OWg3s0ozyGVMeY+TTOti7PFPzq5RhszQPQOoCi59es4MaRvgCw==" +======= "version": "0.1.6", "resolved": "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.1.6.tgz", +<<<<<<< HEAD "integrity": "sha512-etIi92fW3CctsmR9e3sYM3Uqnoq861M0Id9mdOPF6PWIg38BXL5k4upCNBggGUpLIS0H1grMOvy/wn1xymwe2g==", "requires": {} +>>>>>>> 62f2c2acfaad224eb2b52d02904f0e9e551824f1 +======= + "integrity": "sha512-etIi92fW3CctsmR9e3sYM3Uqnoq861M0Id9mdOPF6PWIg38BXL5k4upCNBggGUpLIS0H1grMOvy/wn1xymwe2g==" +>>>>>>> master }, "@firebase/auth-types": { "version": "0.10.3", "resolved": "https://registry.npmjs.org/@firebase/auth-types/-/auth-types-0.10.3.tgz", - "integrity": "sha512-zExrThRqyqGUbXOFrH/sowuh2rRtfKHp9SBVY2vOqKWdCX1Ztn682n9WLtlUDsiYVIbBcwautYWk2HyCGFv0OA==", - "requires": {} + "integrity": "sha512-zExrThRqyqGUbXOFrH/sowuh2rRtfKHp9SBVY2vOqKWdCX1Ztn682n9WLtlUDsiYVIbBcwautYWk2HyCGFv0OA==" }, "@firebase/component": { "version": "0.5.0", @@ -22188,10 +22200,16 @@ } }, "@firebase/firestore-types": { +<<<<<<< HEAD + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-2.2.0.tgz", + "integrity": "sha512-5kZZtQ32FIRJP1029dw+ZVNRCclKOErHv1+Xn0pw/5Fq3dxroA/ZyFHqDu+uV52AyWHhNLjCqX43ibm4YqOzRw==" +======= "version": "2.3.0", "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-2.3.0.tgz", "integrity": "sha512-QTW7NP7nDL0pgT/X53lyj+mIMh4nRQBBTBlRNQBt7eSyeqBf3ag3bxdQhCg358+5KbjYTC2/O6QtX9DlJZmh1A==", "requires": {} +>>>>>>> ef9797f3bfda2b355d971730580a7ef6509846a5 }, "@firebase/functions": { "version": "0.6.8", @@ -22239,8 +22257,7 @@ "@firebase/installations-types": { "version": "0.3.4", "resolved": "https://registry.npmjs.org/@firebase/installations-types/-/installations-types-0.3.4.tgz", - "integrity": "sha512-RfePJFovmdIXb6rYwtngyxuEcWnOrzdZd9m7xAW0gRxDIjBT20n3BOhjpmgRWXo/DAxRmS7bRjWAyTHY9cqN7Q==", - "requires": {} + "integrity": "sha512-RfePJFovmdIXb6rYwtngyxuEcWnOrzdZd9m7xAW0gRxDIjBT20n3BOhjpmgRWXo/DAxRmS7bRjWAyTHY9cqN7Q==" }, "@firebase/logger": { "version": "0.2.6", @@ -22270,8 +22287,7 @@ "@firebase/messaging-types": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/@firebase/messaging-types/-/messaging-types-0.5.0.tgz", - "integrity": "sha512-QaaBswrU6umJYb/ZYvjR5JDSslCGOH6D9P136PhabFAHLTR4TWjsaACvbBXuvwrfCXu10DtcjMxqfhdNIB1Xfg==", - "requires": {} + "integrity": "sha512-QaaBswrU6umJYb/ZYvjR5JDSslCGOH6D9P136PhabFAHLTR4TWjsaACvbBXuvwrfCXu10DtcjMxqfhdNIB1Xfg==" }, "@firebase/performance": { "version": "0.4.12", @@ -22359,10 +22375,20 @@ } }, "@firebase/storage-types": { +<<<<<<< HEAD + "version": "0.3.13", + "resolved": "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.3.13.tgz", + "integrity": "sha512-pL7b8d5kMNCCL0w9hF7pr16POyKkb3imOW7w0qYrhBnbyJTdVxMWZhb0HxCFyQWC0w3EiIFFmxoz8NTFZDEFog==" +======= "version": "0.4.1", "resolved": "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.4.1.tgz", +<<<<<<< HEAD "integrity": "sha512-IM4cRzAnQ6QZoaxVZ5MatBzqXVcp47hOlE28jd9xXw1M9V7gfjhmW0PALGFQx58tPVmuUwIKyoEbHZjV4qRJwQ==", "requires": {} +>>>>>>> 62f2c2acfaad224eb2b52d02904f0e9e551824f1 +======= + "integrity": "sha512-IM4cRzAnQ6QZoaxVZ5MatBzqXVcp47hOlE28jd9xXw1M9V7gfjhmW0PALGFQx58tPVmuUwIKyoEbHZjV4qRJwQ==" +>>>>>>> master }, "@firebase/util": { "version": "1.1.0", @@ -23515,9 +23541,9 @@ }, "dependencies": { "@babel/runtime": { - "version": "7.13.10", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.10.tgz", - "integrity": "sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==", + "version": "7.13.17", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.17.tgz", + "integrity": "sha512-NCdgJEelPTSh+FEFylhnP1ylq848l1z9t9N0j1Lfbcw0+KXGjsTvUmkxy+voLLXB5SOKMbLLx4jxYliGrYQseA==", "requires": { "regenerator-runtime": "^0.13.4" } @@ -23629,9 +23655,9 @@ } }, "@types/jest": { - "version": "26.0.20", - "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.20.tgz", - "integrity": "sha512-9zi2Y+5USJRxd0FsahERhBwlcvFh6D2GLQnY2FH2BzK8J9s9omvNHIbvABwIluXa0fD8XVKMLTO0aOEuUfACAA==", + "version": "26.0.22", + "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.22.tgz", + "integrity": "sha512-eeWwWjlqxvBxc4oQdkueW5OF/gtfSceKk4OnOAGlUSwS/liBRtZppbJuz1YkgbrbfGOoeBHun9fOvXnjNwrSOw==", "requires": { "jest-diff": "^26.0.0", "pretty-format": "^26.0.0" @@ -24990,15 +25016,6 @@ "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", "optional": true }, - "bindings": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", - "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", - "optional": true, - "requires": { - "file-uri-to-path": "1.0.0" - } - }, "bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -27922,12 +27939,6 @@ } } }, - "file-uri-to-path": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", - "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", - "optional": true - }, "filesize": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz", @@ -31783,12 +31794,6 @@ "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz", "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=" }, - "nan": { - "version": "2.14.2", - "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz", - "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==", - "optional": true - }, "nanoid": { "version": "3.1.20", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz", @@ -35780,21 +35785,6 @@ "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz", "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=" }, - "string_decoder": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", - "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", - "requires": { - "safe-buffer": "~5.2.0" - }, - "dependencies": { - "safe-buffer": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", - "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==" - } - } - }, "string-length": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.1.tgz", @@ -35851,6 +35841,21 @@ "define-properties": "^1.1.3" } }, + "string_decoder": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", + "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", + "requires": { + "safe-buffer": "~5.2.0" + }, + "dependencies": { + "safe-buffer": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==" + } + } + }, "stringify-object": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz", @@ -36940,11 +36945,7 @@ "version": "1.2.13", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "optional": true, - "requires": { - "bindings": "^1.5.0", - "nan": "^2.12.1" - } + "optional": true }, "glob-parent": { "version": "3.1.0", @@ -37538,11 +37539,7 @@ "version": "1.2.13", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "optional": true, - "requires": { - "bindings": "^1.5.0", - "nan": "^2.12.1" - } + "optional": true }, "glob-parent": { "version": "3.1.0", @@ -37697,14 +37694,6 @@ "ajv-keywords": "^3.1.0" } }, - "string_decoder": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", - "requires": { - "safe-buffer": "~5.1.0" - } - }, "string-width": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", @@ -37730,6 +37719,14 @@ } } }, + "string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "requires": { + "safe-buffer": "~5.1.0" + } + }, "strip-ansi": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", diff --git a/src/components/Post/index.js b/src/components/Post/index.js index cb673d3..a82b52f 100644 --- a/src/components/Post/index.js +++ b/src/components/Post/index.js @@ -8,6 +8,87 @@ import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(styles); +function computeAge(postDate) { + const currDate = new Date(); + const diffmSec = currDate - postDate; + const diffSecs = Math.ceil(diffmSec / 1000); + if (diffSecs < 60) { + return `${diffSecs} seconds ago`; + } else { + const diffMins = Math.ceil(diffSecs / 60); + if (diffMins < 60) { + return `${diffMins} minutes ago`; + } else { + const diffHours = Math.ceil(diffMins / 60); + if (diffHours < 24) { + return `${diffHours} hours ago`; + } else if(Math.ceil(diffHours / 24)<10){ + return `${Math.ceil(diffHours / 24)} days ago`; + + }else{ + return `on ${postDate.toLocaleDateString()}`; + } + } + } +} + +function Post({ postId, user, username, caption, imageUrl, timestamp }) { + const classes = useStyles(); + const postImage = useRef(); + const [comments, setComments] = useState([]); + const [comment, setComment] = useState(""); + const [id, setId] = useState(""); + const [modalExp, setModal] = useState(false); + const [value, setValue] = useState({}); + + const postComment = (event) => { + event.preventDefault(); + + db.collection("posts").doc(postId).collection("comments").add({ + username: user.displayName, + text: comment, + timestamp: firebase.firestore.FieldValue.serverTimestamp(), + }); + setComment(""); + }; + + useEffect(() => { + postImage.current.onload = () => { + if (postImage.current.height > postImage.current.width) { + postImage.current.style.maxHeight = "350px"; + } else if (postImage.current.height < postImage.current.width) { + postImage.current.style.maxWidth = "100%"; + } else { + postImage.current.style.maxHeight = "350px"; + } + }; + }, []); + + useEffect(() => { + let unsubscribe; + if (postId) { + unsubscribe = db + .collection("posts") + .doc(postId) + .collection("comments") + .orderBy("timestamp", "desc") + .onSnapshot((snapshot) => { + const tempComments = []; + for (let doc of snapshot.docs) { + tempComments.unshift(doc.data()); + console.log(doc.data()); + } + setComments(tempComments); + // setComments(snapshot.docs.map((doc) => doc.data())); + }); + } + + return () => { + unsubscribe(); + }; + }, [postId]); + + return ( function Post({ postId, user, @@ -68,7 +149,7 @@ function Post({ }, [postId]); const handleChange = () => { - setId(postId); + setId(postId); } return ( @@ -76,6 +157,7 @@ function Post({

{username}

+ {timestamp &&
{`Posted ${computeAge(timestamp.toDate())}`}
}
diff --git a/src/components/Post/style.js b/src/components/Post/style.js index c1ee1ed..172b203 100644 --- a/src/components/Post/style.js +++ b/src/components/Post/style.js @@ -1,5 +1,14 @@ export default function styles(theme) { return { + avatar: { + gridColumn: 1, + gridRow: 'span 2', + alignSelf: "center", + }, + timestamp: { + margin: "auto 0", + color: "gray" + }, post: { width: "100%", color: theme.palette.text.primary, @@ -11,7 +20,7 @@ export default function styles(theme) { postHeader: { display: "grid", gridTemplateColumns: "auto 1fr", - gridGap: 10, + gridGap: "2px 10px", padding: "10px ", }, postImageHolder: { diff --git a/src/pages/HomePage/index.js b/src/pages/HomePage/index.js index 32aa0ef..95d61d2 100644 --- a/src/pages/HomePage/index.js +++ b/src/pages/HomePage/index.js @@ -11,6 +11,7 @@ import { Snackbar, SnackbarContent } from '@material-ui/core'; const useStyles = makeStyles(styles); function Homepage({ posts, user }) { + const classes = useStyles(); const history = useHistory(); const [Id, setId] = useState(""); @@ -19,7 +20,7 @@ function Homepage({ posts, user }) { const [isVal, setIsVal] = useState(false); const [modalComments, setModalComments] = useState([]); const [comment, setComment] = useState(""); - const [open, setOpen] = useState(true); + const [open, setOpen] = useState(true); const postComment = (event) => { @@ -32,12 +33,12 @@ function Homepage({ posts, user }) { }); setComment(""); }; - + useEffect(() => { setTimeout(()=>{ setOpen(false) }, 5000) - + }, []) useEffect(() => { @@ -54,7 +55,7 @@ function Homepage({ posts, user }) { tempComments.unshift(doc.data()); } setModalComments(tempComments); - + }); } setModal(true); @@ -75,9 +76,9 @@ function Homepage({ posts, user }) { }, [Id]); return ( - <> - <> - + <> + ))} ); + } -export default Homepage; \ No newline at end of file +export default Homepage;