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*/}
+
+ {/*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*/}
-
- {/*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*/}
-
- {/*Card Content*/}
-
{data.contentDetails}
-
-
- {/*See More or See Less Buttons*/}
-
- {/*Number of words*/}
- ({data.contentDetails.split(' ').length} words)
-
-
-
+
)) :
No contents found..
}