From 236dfbec2ebfa7a51ce22974a1c94c2faa9ec5cd Mon Sep 17 00:00:00 2001 From: Nikhil Date: Sun, 18 Jun 2023 19:33:50 +0530 Subject: [PATCH] Added 'On this Day' feature to see old posts on this day --- src/components/Content.js | 57 +++++++++++++++++ src/components/Home.js | 128 +++++++++++++++----------------------- 2 files changed, 106 insertions(+), 79 deletions(-) create mode 100644 src/components/Content.js diff --git a/src/components/Content.js b/src/components/Content.js new file mode 100644 index 0000000..50fa458 --- /dev/null +++ b/src/components/Content.js @@ -0,0 +1,57 @@ +/*For time formatting*/ +import Moment from 'react-moment'; +/*Material*/ +import { Box, Grid, Button, Typography, Card, CardContent, CardActions, Menu, IconButton, MenuItem, Slide } from '@mui/material'; +import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'; + + +const Content = (props) => { + const {item, type} = props; + const {loading, searchLoading, anchorElNav, menuUsedArray, MoreVert, showEditContent, ellipsisUsedArray} = props.allParams; + const {setAnchorElNav, setMenuUsedArray, setLoadingBackdrop, setDeleteDialog, setContentID, setEllipsisUsedArray} = props.allParams; + + return ( + + + + {/*Card Header*/} + + + + + + + + {item.contentTitle} + + {item.contentDate} + + + + + { if (menuUsedArray.indexOf(item.id) < 0) { setMenuUsedArray(menuUsedArray => [...menuUsedArray, item.id]); setAnchorElNav(e.currentTarget); } else { menuUsedArray.splice(menuUsedArray.indexOf(item.id), 1); setMenuUsedArray(menuUsedArray => [...menuUsedArray, menuUsedArray]); } }}> + + {/*Menu of Edit, Delete of each card*/} + { menuUsedArray.splice(menuUsedArray.indexOf(item.id), 1); setMenuUsedArray(menuUsedArray => [...menuUsedArray, menuUsedArray]); setAnchorElNav(null); }} > + { setLoadingBackdrop(true); showEditContent(item.id); menuUsedArray.splice(menuUsedArray.indexOf(item.id), 1); setMenuUsedArray(menuUsedArray => [...menuUsedArray, menuUsedArray]); setAnchorElNav(null); }}>Edit + { setDeleteDialog(true); setContentID(item.id); menuUsedArray.splice(menuUsedArray.indexOf(item.id), 1); setMenuUsedArray(menuUsedArray => [...menuUsedArray, menuUsedArray]); setAnchorElNav(null); }}>Delete + + {/*Card Content*/} +
{item.contentDetails} + + + {/*See More or See Less Buttons*/} + + {/*Number of words*/} + +  ({item.contentDetails.split(" ").length} words) + + + + + ) +} + +export default Content; \ No newline at end of file diff --git a/src/components/Home.js b/src/components/Home.js index 2c9c365..f5534c8 100644 --- a/src/components/Home.js +++ b/src/components/Home.js @@ -1,21 +1,20 @@ /*React*/ import { useEffect, useState, useRef } from 'react'; -/*For time formatting*/ -import Moment from 'react-moment'; /*Pages*/ import Header from './Header'; import '../index.css'; import {useAuth} from '../auth/AuthContext'; /*Material*/ -import { TextField, Box, Grid, Container, Button, CssBaseline, Typography, CircularProgress, Backdrop, Alert, Card, CardContent, CardActions, Menu, IconButton, MenuItem, Slide } from '@mui/material'; +import { TextField, Box, Grid, Container, Button, CssBaseline, Typography, CircularProgress, Backdrop, Alert, Card, IconButton, Slide } from '@mui/material'; import { Dialog, DialogContent, DialogContentText, DialogTitle, DialogActions } from '@mui/material'; import { addDoc, collection, deleteDoc, doc, getDoc, getFirestore, onSnapshot, orderBy, query, updateDoc, where } from 'firebase/firestore'; import MoreVert from '@mui/icons-material/MoreVert'; import Search from '@mui/icons-material/Search'; import CancelIcon from '@mui/icons-material/Cancel'; import EmojiEmotions from '@mui/icons-material/EmojiEmotions'; -import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'; +import HistoryIcon from '@mui/icons-material/History'; import { LoadingButton } from '@mui/lab'; +import Content from './Content'; const Home = () => { @@ -48,7 +47,12 @@ const Home = () => { const editContentTitleRef = useRef(); //Ref for edit dialog input Title const editContentDetailsRef = useRef(); //Ref for edit dialog input Details const searchWordRef = useRef(); //To improve speed - const [searchedWord, setSearchedWord] = useState(""); //For search results count + const [searchedWord, setSearchedWord] = useState(""); // For search results count + const [historyArray, setHistoryArray] = useState([]); // For storing all details of past years of same date + const [showHistory, setShowHistory] = useState(false); // For toggling history div + const allStateParams = {loading, searchLoading, anchorElNav, menuUsedArray, MoreVert, showEditContent, ellipsisUsedArray}; + const allSetStateParams = {setAnchorElNav, setMenuUsedArray, setLoadingBackdrop, setDeleteDialog, setContentID, setEllipsisUsedArray }; + const allParams = {...allStateParams, ...allSetStateParams}; //Check for user details changes useEffect(() => { @@ -80,6 +84,21 @@ const Home = () => { } const handleSearchDebounced = searchDebouncer(handleSearch, 500); + // Get History Details + useEffect(() => { + let pastContents = []; + pastContents = allContentsArray.filter((a)=> { + const dateParams = new Date().toISOString().split("T")[0].split("-"); + const itemParams = a.contentDate.split("-"); + // Return true if same day, month and not including current year + return dateParams[1] === itemParams[1] && dateParams[2] === itemParams[2] && dateParams[0] !== itemParams[0] + }) + setHistoryArray(pastContents); + return () => { + setHistoryArray([]); + }; + }, [allContentsArray]); + //Filter Searched Results async function handleSearch() { var searchWord = searchWordRef.current.value.toLowerCase(); @@ -213,10 +232,14 @@ const Home = () => { Hello {userDetails.displayName}! + { + historyArray.length > 0 && + { setShowHistory(!showHistory); setSearchBox(false); setSearchedWord("") }}> + } { searchBox ? { setSearchBox(false); }}> : - { setSearchBox(!searchBox); }}> + { setSearchBox(!searchBox); setSearchedWord(""); setShowHistory(false); }}> } @@ -242,6 +265,23 @@ const Home = () => { } + { + showHistory && !searchBox && + +
+
+ Your past notes on this day.. + { + (historyArray.length > 0) && + historyArray.map((item) => ( + + )) + } +
+ +
+ + } {/*Search Content*/} @@ -249,43 +289,10 @@ const Home = () => { { searchLoading ? searchBox && : - searchBox && + searchBox && searchedWord !== "" && (filteredContentArray.length > 0) && filteredContentArray.map((item) => ( - - - - {/*Card Header*/} - - - - - - - - {item.contentTitle} - {item.contentDate} - - - - { if (menuUsedArray.indexOf(item.id) < 0) { setMenuUsedArray(menuUsedArray => [...menuUsedArray, item.id]); setAnchorElNav(e.currentTarget); } else { menuUsedArray.splice(menuUsedArray.indexOf(item.id), 1); setMenuUsedArray(menuUsedArray => [...menuUsedArray, menuUsedArray]); } }}> - - {/*Menu of Edit, Delete of each card*/} - { menuUsedArray.splice(menuUsedArray.indexOf(item.id), 1); setMenuUsedArray(menuUsedArray => [...menuUsedArray, menuUsedArray]); setAnchorElNav(null); }} > - { setLoadingBackdrop(true); showEditContent(item.id); menuUsedArray.splice(menuUsedArray.indexOf(item.id), 1); setMenuUsedArray(menuUsedArray => [...menuUsedArray, menuUsedArray]); setAnchorElNav(null); }}>Edit - { setDeleteDialog(true); setContentID(item.id); menuUsedArray.splice(menuUsedArray.indexOf(item.id), 1); setMenuUsedArray(menuUsedArray => [...menuUsedArray, menuUsedArray]); setAnchorElNav(null); } }>Delete - - {/*Card Content*/} -
{item.contentDetails} - - - {/*See More or See Less Buttons*/} - - - - + )) } @@ -295,44 +302,7 @@ const Home = () => { loading ? : (allContentsArray.length > 0) ? allContentsArray.map((data) => ( - - - - {/*Card Header*/} - - - - - - - - {data.contentTitle} - - {data.contentDate} - - - - - { if (menuUsedArray.indexOf(data.id) < 0) { setMenuUsedArray(menuUsedArray => [...menuUsedArray, data.id]); setAnchorElNav(e.currentTarget); } else { menuUsedArray.splice(menuUsedArray.indexOf(data.id), 1); setMenuUsedArray(menuUsedArray => [...menuUsedArray, menuUsedArray]); } }}> - - {/*Menu of Edit, Delete of each card*/} - { menuUsedArray.splice(menuUsedArray.indexOf(data.id), 1); setMenuUsedArray(menuUsedArray => [...menuUsedArray, menuUsedArray]); setAnchorElNav(null); }} > - { setLoadingBackdrop(true); showEditContent(data.id); menuUsedArray.splice(menuUsedArray.indexOf(data.id), 1); setMenuUsedArray(menuUsedArray => [...menuUsedArray, menuUsedArray]); setAnchorElNav(null); }}>Edit - { setDeleteDialog(true); setContentID(data.id); menuUsedArray.splice(menuUsedArray.indexOf(data.id), 1); setMenuUsedArray(menuUsedArray => [...menuUsedArray, menuUsedArray]); setAnchorElNav(null); }}>Delete - - {/*Card Content*/} -
{data.contentDetails} - - - {/*See More or See Less Buttons*/} - - {/*Number of words*/} -  ({data.contentDetails.split(' ').length} words) - - - + )) :
No contents found..
}