fcodelabs · sumathipala-hes · Dec 12, 2023 · Dec 14, 2023 · Dec 21, 2023 · Dec 21, 2023
diff --git a/.gitignore b/.gitignore
@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,11 +15,14 @@
     "@types/node": "^16.18.66",
     "@types/react": "^18.2.39",
     "@types/react-dom": "^18.2.17",
+    "firebase": "^10.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.0.4",
     "react-router-dom": "^6.20.1",
     "react-scripts": "5.0.1",
+    "redux": "^5.0.0",
+    "redux-saga": "^1.2.3",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>React App</title>
+    <title>Dear Diary</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/DiaryCard/DiaryCard.tsx b/src/components/DiaryCard/DiaryCard.tsx
@@ -7,16 +7,15 @@ import  { useState } from 'react';
 
 const styles = {
     card: {
-        width:{ xs: '30%', sm: '271px'},
-        padding: '20px',
         borderRadius: '6px',
-        mb: '35px',
+        padding: '10px',
     },
     title: {
         fontFamily: 'Public Sans',
         fontSize: '18px',
         fontWeight: '500',
         mb: '10px',
+        wordWrap: 'break-word',
     },
     description: {
         fontFamily: 'Public Sans',
@@ -52,7 +51,7 @@ function DiaryCard(DiaryCardProps: DiaryCardProps) {
         setIsExpanded(!isExpanded);
       };
 
-      const displayDescription = isExpanded ? DiaryCardProps.description : `${DiaryCardProps.description.slice(0, 100)}...`;
+      const displayDescription = isExpanded ? DiaryCardProps.description : `${DiaryCardProps.description.slice(0, 100)}`;
 
   return (
     <Card sx={styles.card}>
@@ -67,9 +66,11 @@ function DiaryCard(DiaryCardProps: DiaryCardProps) {
     </CardContent>
 
     <CardActions>
-    <Button size="small" onClick={toggleExpanded} sx={styles.button}>
-          {isExpanded ? 'Hide' : 'Show More'}
-    </Button> 
+      {DiaryCardProps.description.length > 100 && (
+        <Button size="small" onClick={toggleExpanded} sx={styles.button}>
+        {isExpanded ? 'Hide' : 'Show More'}
+        </Button> 
+      )}
     </CardActions>
   </Card>
   )

diff --git a/src/index.tsx b/src/index.tsx
@@ -3,13 +3,17 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import store from './redux/store';
+import { Provider } from 'react-redux';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>
 );
 

diff --git a/src/pages/DiaryHome/DiaryForm/DiaryForm.tsx b/src/pages/DiaryHome/DiaryForm/DiaryForm.tsx
@@ -1,6 +1,8 @@
 import { Box, TextField, Button, DialogTitle, DialogContent, DialogActions, Typography } from '@mui/material';
 import DisabledByDefaultRoundedIcon from '@mui/icons-material/DisabledByDefaultRounded';
 import { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { addDiary } from '../../../redux/diarySlice';
 
 const styles = {
   submitNew: {
@@ -53,37 +55,47 @@ close:{
   }
 };
 
-interface Diary {
-  title: string;
-  description: string;
-}
+
+
 
 
 interface DiaryFormProps {
   onClose: () => void;
-  setDiaries: React.Dispatch<React.SetStateAction<Diary[]>>;
-  diaries: Diary[];
+  onDiarySubmit: () => void;
 }
 
 
-const DiaryForm: React.FC<DiaryFormProps> = ({onClose, setDiaries, diaries}) => {
+const DiaryForm: React.FC<DiaryFormProps> = ({onClose, onDiarySubmit}) => {
+
   const [title, setTitle] = useState<string>("");
   const [description, setDescription] = useState<string>("");
+  const nickname = localStorage.getItem('nickname');
+
+  const dispatch = useDispatch();
 
   const onsubmit = () => {
     if (title === "" || description === "") {
       alert("Please fill out all fields");
       return;
     }else{
+
       console.log("Title: ", title);
       console.log("Description: ", description);
-      const existingEntries = JSON.parse(localStorage.getItem("diaries") || "[]"); // Get the existing entries
-      existingEntries.push({ title, description });  // Add the new entry to the existing entries
-      localStorage.setItem("diaries", JSON.stringify(existingEntries)); // Save the updated entries to local storage
-      setDiaries([...diaries, { title, description }])
+
+      if (nickname) {
+        interface Diary {
+          title: string;
+          description: string;
+          nickname: string;
+        }
+
+        dispatch(addDiary({ title, description, nickname } as Diary));
+      } 
+
       setTitle("");
       setDescription("");
       onClose();
+      onDiarySubmit();
     }
   };
 

diff --git a/src/pages/DiaryHome/DiaryHome.tsx b/src/pages/DiaryHome/DiaryHome.tsx
@@ -1,11 +1,15 @@
-import React from 'react'
+import React from 'react';
+import {useEffect} from 'react'
 import Background from '../../components/Background/Background';
-import {  Box, Button, TextField, Typography,  Dialog} from "@mui/material";
+import {  Box, Button, TextField, Typography, Dialog} from "@mui/material";
 import SearchIcon from '@mui/icons-material/Search';
 import InputAdornment from '@mui/material/InputAdornment';
 import Header from '../../components/Header/Header';
 import DiaryForm from './DiaryForm/DiaryForm';
 import DiaryCard from '../../components/DiaryCard/DiaryCard';
+import SnackBar from './SnackBar/SnackBar';
+import { useDispatch, useSelector } from 'react-redux';
+import { fetchDiaries } from '../../redux/diarySlice';
 
 const styles = {
   home:{ fontFamily:"public sans",
@@ -20,30 +24,31 @@ const styles = {
 
   box:{
     display:"flex", 
-    justifyContent:"spaceBetween",
-    height: '48px', 
-    padding:'0'
+    flexDirection:{xs:"column", sm:"row"},
+    justifyContent:"space-between", 
+    width: 'calc(100% - 100px)',
+    gap: '10px',
+    padding:'0',
+    position: 'absolute',
+    left: '50px',
+    top:'200px',
   },
+
 
   textfield:{
-    width: { xs: '40%', sm: '50%' },
-    maxWidth: '50%',
+    width: { xs: '100%', sm: '50%' },
     '& .MuiInputBase-root': {
       height: '48px', 
     },
-    position: 'absolute',
-    left: '50px',
-    top:'200px',
+
+    backgroundColor: 'white',
   },
 
   submibNew:{
     backgroundColor: '#0092DD',
-    width: { xs: '30%', sm: '154px' },
+    width: { xs: '100%', sm: '154px' },
     height: '48px',
-    position: 'absolute',
-    right: '50px',
-    top:'200px',
-
+    textTransform: 'none',
   },
 
   dialog: {
@@ -60,21 +65,28 @@ const styles = {
     }
   },
 
-  diaryEntries: {
+  diaryEntries:{
+    width: 'calc(100% - 100px)',
+    margin: '100px 10px 10px 50px',
+    padding: '0px 0px 50px 0px',
     position: 'absolute',
-    top: '300px',
-    left: '50px',
-    display: 'flex',
-    flexDirection: { xs: 'column', sm: 'row' },
-    flexWrap: 'wrap',
-    justifyContent: 'space-between',
-    alignItems: 'flex-start',
-    gap: { xs: '0', sm: '35px'},
-    marginRight: '50px',
-  }  
+    top: { xs: '250px', sm: '200px' },
+    columnCount: { xs: 1, sm: 2, md: 3, lg: 4, xl:  6}, 
+    columnGap: '35px',
+
+  },
+
+}
 
+interface Diary {
+  title: string;
+  description: string;
+  nickname: string;
 }
 
+interface RootState {
+  diaries: Diary[];
+}
 
 
 const DiaryHome = () => {
@@ -87,11 +99,34 @@ const DiaryHome = () => {
     setOpen(true);
   }
 
-  const handleColse = () => {
+  const handleFormColse = () => {
     setOpen(false);
   }
-
-  const [diaries, setDiaries] = React.useState(JSON.parse(localStorage.getItem("diaries") || "[]")); // Get the existing entries
+  const [openSnackbar, setOpenSnackbar] = React.useState(false);
+  const [submissionTime, setSubmissionTime] = React.useState<Date | null>(null);
+  const handleCloseSnackbar = () => {
+    setOpenSnackbar(false);
+  };
+
+  const dispatch = useDispatch();
+  useEffect(() => {
+    const nickname = localStorage.getItem('nickname');
+    dispatch(fetchDiaries({ nickname }));
+  }, []); // Empty dependency array ensures the effect runs only on mount
+
+
+  const [searchText, setSearchText] = React.useState('');
+  const diaries = useSelector((state: RootState) => state.diaries);
+  const [filteredDiaries, setFilteredDiaries] = React.useState<Diary[]>([]);
+
+  useEffect(() => {
+    setFilteredDiaries(diaries.filter((diary) => {
+      return (
+        diary.title.toLowerCase().includes(searchText.toLowerCase()) ||
+        diary.description.toLowerCase().includes(searchText.toLowerCase())
+      );
+    }));
+  }, [diaries, searchText]);
 
 
   return (
@@ -108,7 +143,7 @@ const DiaryHome = () => {
         </Box>
 
         <Box sx={styles.box}>
-          <TextField placeholder = "Search" 
+          <TextField  placeholder = "Search" 
             InputProps={{
               startAdornment: (
                 <InputAdornment position="start">
@@ -117,6 +152,8 @@ const DiaryHome = () => {
               ),
             }}
             sx={styles.textfield} 
+            value={searchText}
+            onChange={(e) => setSearchText(e.target.value)}
           />
           <Button variant="contained" 
             onClick={handleSubmitNew}
@@ -125,16 +162,24 @@ const DiaryHome = () => {
           </Button>
         </Box>
 
-        <Dialog open={open} onClose={handleColse} sx={styles.dialog} >
-            <DiaryForm onClose={handleColse} setDiaries={setDiaries} diaries={diaries}/>
+        <Dialog open={open} onClose={handleFormColse} sx={styles.dialog} >
+            <DiaryForm onClose={handleFormColse} 
+              onDiarySubmit={() => {
+                setOpenSnackbar(true);
+                setSubmissionTime(new Date()); 
+              }}/>
         </Dialog>
 
         <Box sx={styles.diaryEntries}>
-            {diaries.map((diary: { title: string; description: string })  => (
-            <DiaryCard title={diary.title} description={diary.description} />
-            ))}
+          {filteredDiaries.map((diaryEntry, index) => (
+            <Box key={index} sx={{ marginBottom: '35px' }}>
+              <DiaryCard title={diaryEntry.title} description={diaryEntry.description} />
+            </Box>
+          ))}
         </Box>
 
+        <SnackBar openSnackbar={openSnackbar} handleCloseSnackbar={handleCloseSnackbar} submissionTime={submissionTime} /> 
+
       </Background>
     </div>
   )