Handling side effects

src/.env

@@ -1 +1,7 @@
-PUBLIC_URL = "./public/"
+PUBLIC_URL = "./public/"
+REACT_APP_FIREBASE_API_KEY = "AIzaSyCduh8Bd6T3lqaMxFxihVPZQSRH7_vPODY"
+REACT_APP_FIREBASE_AUTH_DOMAIN = "dear-diary-emailusername-6a3d7.firebaseapp.com"
+REACT_APP_FIREBASE_PROJECT_ID = "dear-diary-emailusername-6a3d7"
+REACT_APP_FIREBASE_STORAGE_BUCKET = "dear-diary-emailusername-6a3d7.appspot.com"
+REACT_APP_FIREBASE_MESSAGING_SENDER_ID = "107317734441"
+REACT_APP_FIREBASE_APP_ID = "1:107317734441:web:2b5d34185dce4a01564038"

src/App.tsx

@@ -1,7 +1,7 @@
 
 import './App.css';
 
-import AppRoutes from './utility/appRoutes';
+import AppRoutes from './components/appRoutes';
 
 function App() {
   return (

src/utility/appRoutes.tsx → src/components/appRoutes.tsx

@@ -1,13 +1,14 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import SignInPage from "../containers/SignInPage/SignInPage";
 import HomePage from "../containers/HomePage/HomePage";
+import { SIGN_IN_PATH, HOME_PATH } from "../utility/routeConstants";
 
 const AppRoutes = () => {
     return (
         <Router>
             <Routes>
-                <Route path="/" element={<SignInPage/>}/>
-                <Route path='/home' element={<HomePage/>}/>
+                <Route path={SIGN_IN_PATH} element={<SignInPage/>}/>
+                <Route path={HOME_PATH} element={<HomePage/>}/>
 
             </Routes>
         </Router>

src/components/header.tsx

@@ -34,7 +34,7 @@ const Header = () => {
         <div>
         <Container>
         <StyledBox>
-        <StyledImg src={process.env.PUBLIC_URL+'/image1.png'} alt="Logo"/>
+        <StyledImg src={'/logo/image1.png'} alt="Logo"/>
           <StyledSpan>Dear Diary</StyledSpan>
         </StyledBox>
 

src/utility/firebaseConfig.ts → src/config/firebaseConfig.ts

@@ -4,8 +4,8 @@ import {
 } from "firebase/firestore";
 
 const firebaseConfig = {
-    apiKey: "AIzaSyCduh8Bd6T3lqaMxFxihVPZQSRH7_vPODY",
-    authDomain: "dear-diary-emailusername-6a3d7.firebaseapp.com",
+    apiKey: process.env.REACT_APP_API_KEY,
+    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
     projectId: "dear-diary-emailusername-6a3d7",
     storageBucket: "dear-diary-emailusername-6a3d7.appspot.com",
     messagingSenderId: "107317734441",

src/containers/HomePage/DiaryCard/DiaryCard.tsx

@@ -16,6 +16,7 @@ interface DiaryCardProps {
 const StyledCard = styled(Card)`
 
   width: 271px;
+  min-height: 10px;
   height: auto;
   padding: 20px;
   border-radius: 6px;
@@ -24,11 +25,12 @@ const StyledCard = styled(Card)`
 
 const StyledCardContent = styled(CardContent)`
   align-self: flex-start;
+
+
 `;
 
 const StyledBox = styled(Box)`
   display: flex;
-  height: auto;
   margin-bottom: 6px;
   align-items: flex-start;
 `;
@@ -69,26 +71,28 @@ const StyledButton = styled(Button)`
   width: 271px;
   display: flex;
   padding: 20px;
+  padding-left: 0px;
   flex-direction: column;
   align-items: flex-start;
   border-radius: 6px;
   background-color: #ffffff;
-  box-shadow: 0 4px 18px 0pc rgba(75, 70, 92, 0.10);
+  box-shadow: 0 4px 18px 0pc rgba(75, 70, 92, 0.0);
 }
 `;
 
 const DiaryCard: React.FC<DiaryCardProps> = ({ title, description }) => {
   const [showMore, setShowMore] = useState(false); // state to track whether to show more or not
 
-  const truncatedDescription = showMore ? description : `${description.slice(0, 100)}...`; // truncate description if showMore is false
+  const truncatedDescription = showMore ? description : `${description.slice(0, 100)}`; // truncate description if showMore is false
+  const showMoreButton = description.length > 100; // only show showMore button if description is longer than 100 characters
 
   const handleToggleShowMore = () => {
     setShowMore(!showMore);
   };
 
   return (
     <StyledCard>
-      <CardContent>
+      <StyledCardContent>
         <StyledBox>
           <TypographyTitle variant="h5" component="div">
             {title}
@@ -99,12 +103,15 @@ const DiaryCard: React.FC<DiaryCardProps> = ({ title, description }) => {
             {truncatedDescription}
           </TypographyDescription>
         </StyledBox>
-      </CardContent>
-      <CardActions>
-        <StyledButton size="small" onClick={handleToggleShowMore}>
-          {showMore ? 'Hide' : 'Show More'}
-        </StyledButton>
-      </CardActions>
+      </StyledCardContent>
+      {showMoreButton && ( // conditionally render the button based on description length
+        <CardActions>
+          <StyledButton size="small" onClick={handleToggleShowMore}>
+            {showMore ? 'Hide' : 'Show More'}
+          </StyledButton>
+        </CardActions>
+      )}
+
     </StyledCard>
   );
 };

src/containers/HomePage/HomePage.tsx

@@ -18,7 +18,7 @@ import styled from 'styled-components';
 import { useEffect } from 'react';
 import { RootState, useAppDispatch } from '../../redux/store';
 import { useSelector, useDispatch } from 'react-redux';
-import { diaryCardActions } from '../../redux/Diary/diarySlice';
+import { diaryCardActions } from '../../redux/diary/slice';
 
 
 const StyledMainDiv = styled.div`
@@ -27,7 +27,7 @@ const StyledMainDiv = styled.div`
     height: 100vh;
     width: 100%;
     position: relative;
-    background-image: url(${process.env.PUBLIC_URL}/bg.png);
+    background-image: url(/bg/bg.png);
     background-size: cover;
     background-repeat: no-repeat;
     overflow-x: hidden;
@@ -141,6 +141,7 @@ const DiaryCardContainer = styled.div`
     margin-top: 20px;
     margin-left: 60px;
     margin-right: 60px;
+    margin-bottom: 10px;
 `;
 
 interface DiaryCardProps {
@@ -154,30 +155,33 @@ const HomePage = () => {
     const [showSubmitCard, setShowSubmitCard] = useState(false);            // state to track if submit card is open or not
     const [diaryEntries, setDiaryEntries] = useState<DiaryCardProps[]>([]); // state to track diary entries
 
-    const dispatch = useDispatch();  
+    const dispatch = useDispatch();
 
     const location = useLocation();              // get location from react router dom
     const nickName = location.state.name || {};  // from that location get name
-
+
+    // checking the diary card list array
     useEffect(() => {
         console.log("Diary Card List:", diaryEntries);
     }, [diaryEntries]);
-
+
+    // fetching the diarycard according to the username
     useEffect(() => {
         console.log("fetching diary card list");
         dispatch(diaryCardActions.fetchDiaryCardList(nickName));
     }, [dispatch, nickName]);
+
     // function to handle submit card
     const handleOnSubmitCard = (title: string, description: string) => {
         // create new diary card
         console.log('Handling submit card:', { title, description, username: nickName });
-        dispatch(diaryCardActions.addDiaryCard({title, description, username: nickName}))
+        dispatch(diaryCardActions.addDiaryCard({ title, description, username: nickName })) // addding a new diary card to db
 
         // add new diary card to diary entries
         // setDiaryEntries([newDiaryCard, ...diaryEntries]);
     };
 
-    
+
     // function to handle submit button
     const handleSubmit = () => {
         setShowSubmitCard(true);
@@ -194,6 +198,14 @@ const HomePage = () => {
         setDiaryEntries(entries);
     }, [entries]);
 
+    const [searchQuery, setSearchQuery] = useState('');
+
+    // Function to filter diary entries based on search query
+    const filteredDiaryEntries = diaryEntries.filter((entry) => {
+        const searchTerms = `${entry.title} ${entry.description} ${entry.username}`.toLowerCase();
+        return searchTerms.includes(searchQuery.toLowerCase());
+    });
+
     return (
         <StyledMainDiv
         >
@@ -221,7 +233,7 @@ const HomePage = () => {
                     <StyledUserIconDiv>
                         <StyledIconButton color="inherit" >
 
-                            <img src={process.env.PUBLIC_URL + '/user.png'} alt="User Icon" />
+                            <img src={'/homePage/user.png'} alt="User Icon" />
 
                         </StyledIconButton>
 
@@ -245,12 +257,15 @@ const HomePage = () => {
                         variant="outlined"
                         size="small"
                         placeholder="Placeholder"
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
                         InputProps={{
                             startAdornment: (
                                 <InputAdornment position="start">
                                     <SearchIcon />
                                 </InputAdornment>
                             ),
+
                         }}
                     />
                     <StyledSubmitButton
@@ -281,8 +296,12 @@ const HomePage = () => {
 
             {/* Rendering Diary Cards */}
             <DiaryCardContainer>
-                {diaryEntries.map((diaryCard, index) => (
-                    <DiaryCard key={index} title={diaryCard.title} description={diaryCard.description} />
+                {filteredDiaryEntries.map((diaryCard, index) => (
+                    <DiaryCard
+                        key={index}
+                        title={diaryCard.title}
+                        description={diaryCard.description}
+                    />
                 ))}
             </DiaryCardContainer>
         </StyledMainDiv>

src/containers/HomePage/SubmitCard/SubmitCard.tsx

@@ -43,7 +43,7 @@ const StyledCloseButton = styled(IconButton)`
 `;
 
 const StyledSpan = styled.span`
-  margin-bottom: 8px;
+  margin-bottom: 10px;
   margin-right: 330px;
   font-family: public sans;
   font-feature-settings: 'clig' off, 'liga' off;
@@ -158,25 +158,27 @@ const SubmitCard: React.FC<SubmitCardProps> = ({ onClose, onsubmit }) => {
       <StyledHeader>
         <StyledTitle>Submit New</StyledTitle>
         <StyledCloseButton color="inherit" onClick={onClose}>
-          <img src={process.env.PUBLIC_URL + 'close.svg'} alt="Close Icon" />
+          <img src={'/submitCard/close.svg'} alt="Close Icon" />
         </StyledCloseButton>
       </StyledHeader>
       <form>
         <StyledTextFieldContainer>
           <StyledSpan>Title</StyledSpan>
           <StyledTextFieldInput
-            label="Placeholder"
+            label=""
             variant="outlined"
             fullWidth
             size="small"
+            placeholder='Placeholder'
             value={title}
             onChange={handleTitleChange} // update title state
           />
         </StyledTextFieldContainer>
         <StyledTextFieldContainer>
           <StyledSpan>Description</StyledSpan>
           <StyledTextFieldInput
-            label="Placeholder"
+            label=""
+            placeholder='Placeholder'
             variant="outlined"
             multiline
             rows={13} // set rows to 13

src/containers/SignInPage/SignInPage.tsx

@@ -17,7 +17,7 @@ const StyledDiv = styled.div`
   justify-content: center;
   align-items: center;
   height: 100vh;
-  background: url(${process.env.PUBLIC_URL}/bg.png) center center / cover no-repeat;
+  background: url(/bg/bg.png) center center / cover no-repeat;
 `;
 
 const StyledContinueButton = styled(Button)`
@@ -148,7 +148,7 @@ const SignIn = () => {
     <StyledDiv>
       <StyledCardBox>
         <StyledLogoBox>
-          <StyledImg src={process.env.PUBLIC_URL + '/image1.png'} alt="Logo" />
+          <StyledImg src={'/logo/image1.png'} alt="Logo" />
           <StyledLogoText>Dear Diary</StyledLogoText>
         </StyledLogoBox>
         <StyledTitle>Sign In</StyledTitle>