From 6f86d0c94f2f750b87daf64d29b112d5ea84d1b9 Mon Sep 17 00:00:00 2001 From: Pasindu Madusha Date: Fri, 15 Dec 2023 19:12:49 +0530 Subject: [PATCH 1/8] firebase added/fixed bugs --- public/{ => bg}/bg.png | Bin public/{ => homePage}/user.png | Bin public/{ => logo}/image1.png | Bin public/{ => submitCard}/close.svg | 0 src/.env | 8 +++- src/components/header.tsx | 2 +- src/{utility => config}/firebaseConfig.ts | 4 +- .../HomePage/DiaryCard/DiaryCard.tsx | 16 +++++--- src/containers/HomePage/HomePage.tsx | 6 +-- .../HomePage/SubmitCard/SubmitCard.tsx | 10 +++-- src/containers/SignInPage/SignInPage.tsx | 4 +- src/redux/User/signInSlice.ts | 19 --------- .../{Diary/diarySaga.ts => diary/saga.ts} | 36 +++++++++++------- .../{Diary/diarySlice.ts => diary/slice.ts} | 11 +++--- src/redux/store.ts | 5 +-- 15 files changed, 61 insertions(+), 60 deletions(-) rename public/{ => bg}/bg.png (100%) rename public/{ => homePage}/user.png (100%) rename public/{ => logo}/image1.png (100%) rename public/{ => submitCard}/close.svg (100%) rename src/{utility => config}/firebaseConfig.ts (85%) delete mode 100644 src/redux/User/signInSlice.ts rename src/redux/{Diary/diarySaga.ts => diary/saga.ts} (61%) rename src/redux/{Diary/diarySlice.ts => diary/slice.ts} (58%) diff --git a/public/bg.png b/public/bg/bg.png similarity index 100% rename from public/bg.png rename to public/bg/bg.png diff --git a/public/user.png b/public/homePage/user.png similarity index 100% rename from public/user.png rename to public/homePage/user.png diff --git a/public/image1.png b/public/logo/image1.png similarity index 100% rename from public/image1.png rename to public/logo/image1.png diff --git a/public/close.svg b/public/submitCard/close.svg similarity index 100% rename from public/close.svg rename to public/submitCard/close.svg diff --git a/src/.env b/src/.env index f2b28fc6..e154a0ec 100644 --- a/src/.env +++ b/src/.env @@ -1 +1,7 @@ -PUBLIC_URL = "./public/" \ No newline at end of file +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" \ No newline at end of file diff --git a/src/components/header.tsx b/src/components/header.tsx index b48a2b18..ae9e71a4 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -34,7 +34,7 @@ const Header = () => {
- + Dear Diary diff --git a/src/utility/firebaseConfig.ts b/src/config/firebaseConfig.ts similarity index 85% rename from src/utility/firebaseConfig.ts rename to src/config/firebaseConfig.ts index 2aebc22b..8d3403be 100644 --- a/src/utility/firebaseConfig.ts +++ b/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", diff --git a/src/containers/HomePage/DiaryCard/DiaryCard.tsx b/src/containers/HomePage/DiaryCard/DiaryCard.tsx index 36cd6abe..acb9e0dc 100644 --- a/src/containers/HomePage/DiaryCard/DiaryCard.tsx +++ b/src/containers/HomePage/DiaryCard/DiaryCard.tsx @@ -73,7 +73,7 @@ const StyledButton = styled(Button)` 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); } `; @@ -81,6 +81,7 @@ const DiaryCard: React.FC = ({ 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 showMoreButton = description.length > 100; // only show showMore button if description is longer than 100 characters const handleToggleShowMore = () => { setShowMore(!showMore); @@ -100,11 +101,14 @@ const DiaryCard: React.FC = ({ title, description }) => { - - - {showMore ? 'Hide' : 'Show More'} - - + {showMoreButton && ( // conditionally render the button based on description length + + + {showMore ? 'Hide' : 'Show More'} + + + )} + ); }; diff --git a/src/containers/HomePage/HomePage.tsx b/src/containers/HomePage/HomePage.tsx index a56c9a0e..ccd3b202 100644 --- a/src/containers/HomePage/HomePage.tsx +++ b/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; @@ -221,7 +221,7 @@ const HomePage = () => { - User Icon + User Icon diff --git a/src/containers/HomePage/SubmitCard/SubmitCard.tsx b/src/containers/HomePage/SubmitCard/SubmitCard.tsx index 96bde632..f910f713 100644 --- a/src/containers/HomePage/SubmitCard/SubmitCard.tsx +++ b/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,17 +158,18 @@ const SubmitCard: React.FC = ({ onClose, onsubmit }) => { Submit New - Close Icon + Close Icon
Title @@ -176,7 +177,8 @@ const SubmitCard: React.FC = ({ onClose, onsubmit }) => { Description { - + Dear Diary Sign In diff --git a/src/redux/User/signInSlice.ts b/src/redux/User/signInSlice.ts deleted file mode 100644 index afabd261..00000000 --- a/src/redux/User/signInSlice.ts +++ /dev/null @@ -1,19 +0,0 @@ -import {createSlice} from '@reduxjs/toolkit'; - -// Define a type for the slice state -export const signInSlice = createSlice({ - name: 'signIn', // a name used in action type - initialState: { - nickname: '', // nickname of the user as initial state - }, - reducers: { - setNickname: (state, action) => { - state.nickname = action.payload; // set nickname to the payload - }, - }, - - }); - -export const {setNickname} = signInSlice.actions; - -export default signInSlice.reducer; \ No newline at end of file diff --git a/src/redux/Diary/diarySaga.ts b/src/redux/diary/saga.ts similarity index 61% rename from src/redux/Diary/diarySaga.ts rename to src/redux/diary/saga.ts index 6afd5734..87bf13dd 100644 --- a/src/redux/Diary/diarySaga.ts +++ b/src/redux/diary/saga.ts @@ -2,27 +2,32 @@ import { take, call, put, takeEvery, all} from 'redux-saga/effects'; import { eventChannel } from 'redux-saga'; import { diaryCardActions -} from './diarySlice'; -import { db } from '../../utility/firebaseConfig'; +} from './slice'; +import { db } from '../../config/firebaseConfig'; import { collection, addDoc, query, onSnapshot, where } from "firebase/firestore"; import { PayloadAction } from '@reduxjs/toolkit'; + +// props for DiaryCard component interface DiaryCardProps { title: string; description: string; username: string; } +// create a channel to listen to changes in the database function snapshotChannel(db: any, username: string) { + // return an event channel that will subscribe to the database changes this will be used to real-time updates return eventChannel((emitter) => { - const ref = collection(db, "DiaryCards"); - const query1 = query(ref, where("username", "==", username)); + const ref = collection(db, "DiaryCards"); // reference to the collection "DiaryCards" + const query1 = query(ref, where("username", "==", username)); // query to get the documents with the username + // listen to the changes in the database const unsubscribe = onSnapshot(query1, (querySnapshot) => { - const updatedDiaryCards: DiaryCardProps[] = []; + const updatedDiaryCards: DiaryCardProps[] = []; // array to store the updated diary cards querySnapshot.forEach((doc) => { const entry = doc.data() as DiaryCardProps; - updatedDiaryCards.push(entry); + updatedDiaryCards.push(entry); // add the updated diary card to the array }); emitter(updatedDiaryCards); }); @@ -31,31 +36,32 @@ function snapshotChannel(db: any, username: string) { }); } - +// add a diary card to the database function* addDiaryCard(action: PayloadAction): Generator { try { - console.log('Adding diary card', action.payload) + // console.log('Adding diary card', action.payload) const { title, description, username } = action.payload; const diaryCard: DiaryCardProps = { title, description, username }; - yield call(addDoc, collection(db, "DiaryCards"), diaryCard); + yield call(addDoc, collection(db, "DiaryCards"), diaryCard); // add the diary card to the database } catch (err) { console.log('Adding card error', err); alert(err); } } +// fetch the diary card list from the database according to the username function* fetchDiaryCardList(action: PayloadAction): Generator { try { const username = action.payload; - const channel = yield call(snapshotChannel, db, username); + const channel = yield call(snapshotChannel, db, username); // create a channel to listen to changes in the database while (true) { - const diaryCardList: DiaryCardProps[] = yield take(channel); - console.log('Diary card list', diaryCardList); - yield put(diaryCardActions.setDiaryCardList(diaryCardList)); + const diaryCardList: DiaryCardProps[] = yield take(channel); // get the updated diary card list + // console.log('Diary card list', diaryCardList); + yield put(diaryCardActions.setDiaryCardList(diaryCardList)); // update the diary card list in the redux store } } catch (err) { console.log('Fetching diary card list error', err); @@ -63,8 +69,10 @@ function* fetchDiaryCardList(action: PayloadAction): Generator { @@ -72,5 +80,5 @@ function* fetchDiaryCardListSaga(): Generator { } export default function* diaryCardSaga() { - yield all([addDiaryCardSaga(), fetchDiaryCardListSaga()]); + yield all([addDiaryCardSaga(), fetchDiaryCardListSaga()]); // run the sagas in parallel }; \ No newline at end of file diff --git a/src/redux/Diary/diarySlice.ts b/src/redux/diary/slice.ts similarity index 58% rename from src/redux/Diary/diarySlice.ts rename to src/redux/diary/slice.ts index cc6c79a1..5d49ef7f 100644 --- a/src/redux/Diary/diarySlice.ts +++ b/src/redux/diary/slice.ts @@ -6,6 +6,7 @@ interface DiaryCardProps { username: string; } + interface DiaryCardState { diaryCardList: DiaryCardProps[]; } @@ -19,14 +20,14 @@ export const diaryCardSlice = createSlice({ initialState, reducers: { addDiaryCard: (state, action: PayloadAction) => { - console.log('Adding diary card:', action.payload); - state.diaryCardList.push(action.payload); - console.log('Diary card list:', state.diaryCardList); + // console.log('Adding diary card:', action.payload); + state.diaryCardList.push(action.payload); // add the diary card to the diary card list + // console.log('Diary card list:', state.diaryCardList); }, setDiaryCardList: (state, action: PayloadAction) => { - state.diaryCardList = action.payload; + state.diaryCardList = action.payload; // set the diary card list to the updated diary card list }, - fetchDiaryCardList: () => {}, + fetchDiaryCardList: () => {}, // fetch the diary card list from the database }, }); diff --git a/src/redux/store.ts b/src/redux/store.ts index 0cc7dba3..7320bf2b 100644 --- a/src/redux/store.ts +++ b/src/redux/store.ts @@ -2,9 +2,8 @@ import {configureStore, Tuple } from '@reduxjs/toolkit'; // import logger from 'redux-logger'; import createSagaMiddleware from 'redux-saga'; -import {diaryCardReducer} from './Diary/diarySlice'; -import signInSliceReducer from './User/signInSlice'; -import diaryCardSaga from './Diary/diarySaga'; +import {diaryCardReducer} from './diary/slice'; +import diaryCardSaga from './diary/saga'; import { useDispatch } from 'react-redux'; From ba76011dc4b8bd164e0ef055f876917fa671c31a Mon Sep 17 00:00:00 2001 From: Pasindu Madusha Date: Fri, 15 Dec 2023 20:56:17 +0530 Subject: [PATCH 2/8] firebase added/fixed bugs & changed folder structure --- src/App.tsx | 2 +- src/{utility => components}/appRoutes.tsx | 5 +-- .../HomePage/DiaryCard/DiaryCard.tsx | 11 ++++--- src/containers/HomePage/HomePage.tsx | 33 +++++++++++++++---- src/utility/routeConstants.ts | 4 +++ 5 files changed, 41 insertions(+), 14 deletions(-) rename src/{utility => components}/appRoutes.tsx (64%) create mode 100644 src/utility/routeConstants.ts diff --git a/src/App.tsx b/src/App.tsx index 0dbb2c77..9d7f32e2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,7 @@ import './App.css'; -import AppRoutes from './utility/appRoutes'; +import AppRoutes from './components/appRoutes'; function App() { return ( diff --git a/src/utility/appRoutes.tsx b/src/components/appRoutes.tsx similarity index 64% rename from src/utility/appRoutes.tsx rename to src/components/appRoutes.tsx index 751c58e1..6a2c3260 100644 --- a/src/utility/appRoutes.tsx +++ b/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 ( - }/> - }/> + }/> + }/> diff --git a/src/containers/HomePage/DiaryCard/DiaryCard.tsx b/src/containers/HomePage/DiaryCard/DiaryCard.tsx index acb9e0dc..95abf67c 100644 --- a/src/containers/HomePage/DiaryCard/DiaryCard.tsx +++ b/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,6 +71,7 @@ const StyledButton = styled(Button)` width: 271px; display: flex; padding: 20px; + padding-left: 0px; flex-direction: column; align-items: flex-start; border-radius: 6px; @@ -80,7 +83,7 @@ const StyledButton = styled(Button)` const DiaryCard: React.FC = ({ 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 = () => { @@ -89,7 +92,7 @@ const DiaryCard: React.FC = ({ title, description }) => { return ( - + {title} @@ -100,7 +103,7 @@ const DiaryCard: React.FC = ({ title, description }) => { {truncatedDescription} - + {showMoreButton && ( // conditionally render the button based on description length diff --git a/src/containers/HomePage/HomePage.tsx b/src/containers/HomePage/HomePage.tsx index ccd3b202..696bf4ea 100644 --- a/src/containers/HomePage/HomePage.tsx +++ b/src/containers/HomePage/HomePage.tsx @@ -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([]); // 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 ( @@ -245,12 +257,15 @@ const HomePage = () => { variant="outlined" size="small" placeholder="Placeholder" + value={searchQuery} + onChange={(e) => setSearchQuery(e.target.value)} InputProps={{ startAdornment: ( ), + }} /> { {/* Rendering Diary Cards */} - {diaryEntries.map((diaryCard, index) => ( - + {filteredDiaryEntries.map((diaryCard, index) => ( + ))} diff --git a/src/utility/routeConstants.ts b/src/utility/routeConstants.ts new file mode 100644 index 00000000..e99d4c19 --- /dev/null +++ b/src/utility/routeConstants.ts @@ -0,0 +1,4 @@ +// Purpose: To store the route constants for the application. + +export const SIGN_IN_PATH = '/'; +export const HOME_PATH = '/home'; \ No newline at end of file From 256a037fd02f371d7351e40ac72e5153d2dc4639 Mon Sep 17 00:00:00 2001 From: Pasindu Madusha Date: Fri, 22 Dec 2023 19:49:15 +0530 Subject: [PATCH 3/8] fixed issues after qa testing --- .firebase/hosting.YnVpbGQ.cache | 24 +++ .firebaserc | 5 + firebase.json | 10 ++ src/.env | 12 +- .../HomePage/DiaryCard/DiaryCard.tsx | 16 +- src/containers/HomePage/HomePage.tsx | 140 ++++++++++++++++-- .../HomePage/SubmitCard/SubmitCard.tsx | 5 +- src/containers/SignInPage/SignInPage.tsx | 7 +- 8 files changed, 193 insertions(+), 26 deletions(-) create mode 100644 .firebase/hosting.YnVpbGQ.cache create mode 100644 .firebaserc create mode 100644 firebase.json diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache new file mode 100644 index 00000000..15435cf9 --- /dev/null +++ b/.firebase/hosting.YnVpbGQ.cache @@ -0,0 +1,24 @@ +favicon.ico,1701324781159,eae62e993eb980ec8a25058c39d5a51feab118bd2100c4deebb2a9c158ec11f9 +logo192.png,1701324782749,3ee59515172ee198f3be375979df15ac5345183e656720a381b8872b2a39dc8b +logo512.png,1701324782914,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331 +manifest.json,1701324781392,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a +robots.txt,1701324783694,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49 +bg/bg.png,1701347069276,f3da082aa49cee668dac1d4f8edf150c36f7c9f485bf4a5d4b42b6b27e7cad99 +homePage/user.png,1701857344122,3bacf05181c4a286087afee612ab2971cd3c46b4ec45cde9147ee2dc076067f2 +logo/image1.png,1701347048566,a8e687d0d310e78081f90752f3f81ca2b53ee1785378c9babd9b1995ea075d68 +submitCard/close.svg,1701844216163,1fc165e347762212e40c3de9a81b678cef0b393509f1588b8e1b738bced2f96d +asset-manifest.json,1703254602832,9cc5a10bf294fe305c9f702464a9f9f07fe2e4e4e9f04e5e60173f3bb6900453 +static/js/787.97a755d5.chunk.js,1703254602856,cc114f23b43e5415100680b4a7ceb5aa62d0c5bb5f54f160a9808319fd91935c +index.html,1703254602832,f3ee0d0f015bfd3fcb4a2279ed213a4b330a41946b86164f8a09695d14b07ecc +static/css/main.37bf2c02.css,1703254602856,7dc36c6606b5b9e05e1a1db815bf4589004a387cc93791b2f107ad0ea355243a +static/js/787.97a755d5.chunk.js.map,1703254602856,20b6b43ba98871fc71423361cfcc46397a0e31efa2dc284e97cbcfce4333dafb +static/js/main.28a2565b.js.LICENSE.txt,1703254602856,ac5a220873d7f6d9ea7abb16648904d28aaff03529a143225133761dc8b64cd9 +static/css/main.37bf2c02.css.map,1703254602856,7f599aeebb0bdde30826e9d5a093a0e7819dbc76178bee4dc73dd3032b89b0ae +static/media/public-sans-latin-400-normal.395632508f028112812e.woff2,1703254602856,561c4f5d59db36f529a794d5948346d81f245744120c8959354e942b8e21ed3a +static/media/public-sans-latin-ext-400-normal.ec6f5fe4a39d95207b1f.woff,1703254602848,3d786a89fa8a91c4ce85f1b7bfde31b0853d535f1635d5918d127b272cf9c150 +static/media/public-sans-latin-ext-400-normal.fb7d8869799c6eec9401.woff2,1703254602856,9ab844a64857f2c1a12a9b8a9efa25d47e3ddd60e4c9cc676da7c0a67bdadd69 +static/media/public-sans-vietnamese-400-normal.529cb4480800870e4c21.woff,1703254602856,e1a3002976a355cecb3b9970347d25c7d7222b72ec7dad04999445350bacf567 +static/media/public-sans-vietnamese-400-normal.cd61d3bcc45fcd8389b9.woff2,1703254602856,a736201581a86c25eeb0a4e33d4941e0827fe034f7efb50d1cd7f93b772875b0 +static/media/public-sans-latin-400-normal.c49c54e2dace7c6c0d24.woff,1703254602856,d54a1ec84ddd47afd2661a3c9cdb879b818c1ddbba14295e34e61b5c9e919376 +static/js/main.28a2565b.js,1703254602856,4e9839d3c992138f60063280c98e6a1d9da1a072cbf837d4f8eed92216c6e70b +static/js/main.28a2565b.js.map,1703254602856,7f4c7a3a88b0361b419f205b0ff7161f2d684b2bf135eeda90150078a0b3fcf1 diff --git a/.firebaserc b/.firebaserc new file mode 100644 index 00000000..2c8b7810 --- /dev/null +++ b/.firebaserc @@ -0,0 +1,5 @@ +{ + "projects": { + "default": "dear-diary-emailusername-6a3d7" + } +} diff --git a/firebase.json b/firebase.json new file mode 100644 index 00000000..f4755549 --- /dev/null +++ b/firebase.json @@ -0,0 +1,10 @@ +{ + "hosting": { + "public": "build", + "ignore": [ + "firebase.json", + "**/.*", + "**/node_modules/**" + ] + } +} diff --git a/src/.env b/src/.env index e154a0ec..1170f921 100644 --- a/src/.env +++ b/src/.env @@ -1,7 +1,7 @@ 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" \ No newline at end of file +REACT_APP_API_KEY = "AIzaSyCduh8Bd6T3lqaMxFxihVPZQSRH7_vPODY" +REACT_APP_AUTH_DOMAIN = "dear-diary-emailusername-6a3d7.firebaseapp.com" +REACT_APP_PROJECT_ID = "dear-diary-emailusername-6a3d7" +REACT_APP_STORAGE_BUCKET = "dear-diary-emailusername-6a3d7.appspot.com" +REACT_APP_MESSAGING_SENDER_ID = "107317734441" +REACT_APP_APP_ID = "1:107317734441:web:2b5d34185dce4a01564038" \ No newline at end of file diff --git a/src/containers/HomePage/DiaryCard/DiaryCard.tsx b/src/containers/HomePage/DiaryCard/DiaryCard.tsx index 95abf67c..1b91415a 100644 --- a/src/containers/HomePage/DiaryCard/DiaryCard.tsx +++ b/src/containers/HomePage/DiaryCard/DiaryCard.tsx @@ -18,7 +18,7 @@ const StyledCard = styled(Card)` width: 271px; min-height: 10px; height: auto; - padding: 20px; + padding: 0px 0px 6px 0px; border-radius: 6px; align-items: flex-start; `; @@ -35,6 +35,13 @@ const StyledBox = styled(Box)` align-items: flex-start; `; +const StyledBoxDesc = styled(Box)` + display: flex; + + align-items: flex-start; + padding-bottom: -16; +`; + const TypographyTitle = styled(Typography)` color: #4B465C; font-family: public sans; @@ -70,13 +77,14 @@ const StyledButton = styled(Button)` letter-spacing: 0.43px; width: 271px; display: flex; - padding: 20px; + padding: 0px; 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.0); + margin-left: 6px; } `; @@ -98,11 +106,11 @@ const DiaryCard: React.FC = ({ title, description }) => { {title} - + {truncatedDescription} - + {showMoreButton && ( // conditionally render the button based on description length diff --git a/src/containers/HomePage/HomePage.tsx b/src/containers/HomePage/HomePage.tsx index 696bf4ea..e01def6f 100644 --- a/src/containers/HomePage/HomePage.tsx +++ b/src/containers/HomePage/HomePage.tsx @@ -1,6 +1,4 @@ import React, { useState } from 'react'; -import Box from '@mui/material/Box'; -import Container from '@mui/material/Container'; import TextField from '@mui/material/TextField'; import SearchIcon from '@mui/icons-material/Search'; import InputAdornment from '@mui/material/InputAdornment'; @@ -15,6 +13,9 @@ import "@fontsource/public-sans/"; import { useLocation } from 'react-router-dom'; import styled from 'styled-components'; +import Alert from '@mui/material/Alert'; +import DoneIcon from '@mui/icons-material/Done'; + import { useEffect } from 'react'; import { RootState, useAppDispatch } from '../../redux/store'; import { useSelector, useDispatch } from 'react-redux'; @@ -42,7 +43,7 @@ const StyledHeaderGrid = styled(Grid)` display: flex; align-items: center; width: 100%; - margin-left: 0px; + margin-left: 16px; margin-top: 60px; margin-right: 60px; justify-content: space-between; @@ -107,12 +108,15 @@ const StyledSearchGrid = styled(Grid)` margin-top: 0px; margin-right: 60px; justify-content: space-between; + gap: 5px; `; const StyledTextField = styled(TextField)` + width: 530px; border-radius: 8px; background-color: #ffffff; + `; const StyledSubmitButton = styled(Button)` @@ -137,13 +141,41 @@ const StyledSubmitButton = styled(Button)` const DiaryCardContainer = styled.div` display: flex; flex-wrap: wrap; - gap: 30px; + gap: 14px; margin-top: 20px; margin-left: 60px; - margin-right: 60px; + margin-bottom: 10px; + `; +const ToastContainerMsg = styled.span + ` + color: #4B465C; + font-family: public sans; + + font-size: 15px; + + font-weight: 600; + line-height: 22px; + + +`; + +const ToastContainerTime = styled.span` +&&&{ + color: rgba(75, 70, 92, 0.55); + font-family: public sans; + font-weight: 400; + font-size: 13px; + text-align: right; + margin-left: 50px; + line-height: 20px; + +}`; + + + interface DiaryCardProps { title: string; description: string; @@ -154,6 +186,8 @@ interface DiaryCardProps { const HomePage = () => { const [showSubmitCard, setShowSubmitCard] = useState(false); // state to track if submit card is open or not const [diaryEntries, setDiaryEntries] = useState([]); // state to track diary entries + const [showAlert, setShowAlert] = useState(false); + const [submitTime, setSubmitTime] = useState(null); const dispatch = useDispatch(); @@ -179,17 +213,24 @@ const HomePage = () => { // add new diary card to diary entries // setDiaryEntries([newDiaryCard, ...diaryEntries]); + setSubmitTime(new Date()); // Capture the time when the user submits the card + handleCloseSubmitCard(); + // show toast + // showToaster(); + setShowAlert(true); }; // function to handle submit button const handleSubmit = () => { setShowSubmitCard(true); + }; // function to handle close submit card const handleCloseSubmitCard = () => { setShowSubmitCard(false); + }; const entries = useSelector((state: RootState) => state.diaryCardList.diaryCardList); @@ -206,6 +247,27 @@ const HomePage = () => { return searchTerms.includes(searchQuery.toLowerCase()); }); + + const [elapsedTime, setElapsedTime] = useState(''); + + // Function to calculate and update elapsed time + const updateElapsedTime = () => { + const timeElapsed = calculateTimeElapsed(submitTime); + + // Check if there is any time elapsed + if (timeElapsed) { + setElapsedTime(`${timeElapsed}`); + } + }; + + // Effect to update elapsed time every second + useEffect(() => { + const intervalId = setInterval(updateElapsedTime, 1000); + + // Clear interval on component unmount + return () => clearInterval(intervalId); + }, [submitTime]); + return ( @@ -265,7 +327,7 @@ const HomePage = () => { ), - + }} /> {
+ {/* if submit card is available using Modal to visbible submit card */} { {/* Rendering Diary Cards */} + {filteredDiaryEntries.length === 0 && ( +
+

No Diary Entries Found

+
+ )} {filteredDiaryEntries.map((diaryCard, index) => ( - +
+ +
))} + + {/* Render Alert */} + setShowAlert(false)} + icon={} + sx={{ + position: 'fixed', + top: 148, + right: 60, + zIndex: 1000, + width: 'auto', + height: 'auto', + display: showAlert ? 'flex' : 'none', + backgroundColor: 'white', + '& .MuiIconButton-root': { + color: 'rgba(75, 70, 92, 0.55)', + }, + + }} + > + Record Saved Successfully. + {elapsedTime && `${elapsedTime} ago`} + + ); }; +const calculateTimeElapsed = (submitTime: Date | null) => { + if (!submitTime) return ''; + + const currentTime = new Date(); + const elapsedMilliseconds = currentTime.getTime() - submitTime.getTime(); + const elapsedSeconds = Math.floor(elapsedMilliseconds / 1000); + + // Calculate minutes and remaining seconds + const minutes = Math.floor(elapsedSeconds / 60); + const seconds = elapsedSeconds % 60; + + // Construct the time elapsed string + let timeElapsedString = ''; + + if (minutes > 0) { + timeElapsedString += `${minutes} ${minutes === 1 ? 'min' : 'mins'}`; + } else { + timeElapsedString += '0 mins'; + } + + return timeElapsedString.trim(); +}; + export default HomePage; diff --git a/src/containers/HomePage/SubmitCard/SubmitCard.tsx b/src/containers/HomePage/SubmitCard/SubmitCard.tsx index f910f713..fb44eb27 100644 --- a/src/containers/HomePage/SubmitCard/SubmitCard.tsx +++ b/src/containers/HomePage/SubmitCard/SubmitCard.tsx @@ -144,10 +144,7 @@ const SubmitCard: React.FC = ({ onClose, onsubmit }) => { toast.error('Please enter title and description'); return; } - // if title and description are not empty, show toast success message - if (title !== '' && description !== '') { - toast.success('Submitted successfully'); - } + // call onsubmit function with title and description onsubmit(title, description); onClose(); diff --git a/src/containers/SignInPage/SignInPage.tsx b/src/containers/SignInPage/SignInPage.tsx index 0e0a6ca5..a029d66d 100644 --- a/src/containers/SignInPage/SignInPage.tsx +++ b/src/containers/SignInPage/SignInPage.tsx @@ -18,6 +18,7 @@ const StyledDiv = styled.div` align-items: center; height: 100vh; background: url(/bg/bg.png) center center / cover no-repeat; + overflow: hidden; `; const StyledContinueButton = styled(Button)` @@ -83,6 +84,7 @@ const StyledInputBox = styled(Box)` align-self: center; margin-top: 30px; + `; const StyledTextField = styled(TextField)` @@ -92,6 +94,7 @@ const StyledTextField = styled(TextField)` color: #DBDADE; font-size: 13px; line-height: 21px; + margin-bottom: 5px; `; const StyledArrowForwardIcon = styled(ArrowForwardIcon)` @@ -112,11 +115,13 @@ const StyledRandomButton = styled(Button)` color: #0092DD; background-color: rgba(0, 146, 221, 0.16); align-self: center; - margin-left: 30px; + margin-left: 16px; + margin-top: 3px; font-weight: 500; line-height: 18px; font-size: 15px; padding: 10px 20px 10px 20px; + } `; From ba65f2c95448903f27a3090ac6d9dcb4c5462690 Mon Sep 17 00:00:00 2001 From: Pasindu Madusha Date: Tue, 2 Jan 2024 10:20:15 +0530 Subject: [PATCH 4/8] bug fix --- .firebase/hosting.YnVpbGQ.cache | 30 +++++++-------- src/.env | 12 +++--- src/App.tsx | 2 +- .../{header.tsx => Header/Header.tsx} | 0 src/components/{ => Routes}/appRoutes.tsx | 6 +-- src/containers/HomePage/HomePage.tsx | 37 +++++-------------- src/containers/SignInPage/SignInPage.tsx | 28 +++++++++----- src/utility/calculateTimeElapsed.ts | 24 ++++++++++++ 8 files changed, 76 insertions(+), 63 deletions(-) rename src/components/{header.tsx => Header/Header.tsx} (100%) rename src/components/{ => Routes}/appRoutes.tsx (66%) create mode 100644 src/utility/calculateTimeElapsed.ts diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache index 15435cf9..2a089942 100644 --- a/.firebase/hosting.YnVpbGQ.cache +++ b/.firebase/hosting.YnVpbGQ.cache @@ -7,18 +7,18 @@ bg/bg.png,1701347069276,f3da082aa49cee668dac1d4f8edf150c36f7c9f485bf4a5d4b42b6b2 homePage/user.png,1701857344122,3bacf05181c4a286087afee612ab2971cd3c46b4ec45cde9147ee2dc076067f2 logo/image1.png,1701347048566,a8e687d0d310e78081f90752f3f81ca2b53ee1785378c9babd9b1995ea075d68 submitCard/close.svg,1701844216163,1fc165e347762212e40c3de9a81b678cef0b393509f1588b8e1b738bced2f96d -asset-manifest.json,1703254602832,9cc5a10bf294fe305c9f702464a9f9f07fe2e4e4e9f04e5e60173f3bb6900453 -static/js/787.97a755d5.chunk.js,1703254602856,cc114f23b43e5415100680b4a7ceb5aa62d0c5bb5f54f160a9808319fd91935c -index.html,1703254602832,f3ee0d0f015bfd3fcb4a2279ed213a4b330a41946b86164f8a09695d14b07ecc -static/css/main.37bf2c02.css,1703254602856,7dc36c6606b5b9e05e1a1db815bf4589004a387cc93791b2f107ad0ea355243a -static/js/787.97a755d5.chunk.js.map,1703254602856,20b6b43ba98871fc71423361cfcc46397a0e31efa2dc284e97cbcfce4333dafb -static/js/main.28a2565b.js.LICENSE.txt,1703254602856,ac5a220873d7f6d9ea7abb16648904d28aaff03529a143225133761dc8b64cd9 -static/css/main.37bf2c02.css.map,1703254602856,7f599aeebb0bdde30826e9d5a093a0e7819dbc76178bee4dc73dd3032b89b0ae -static/media/public-sans-latin-400-normal.395632508f028112812e.woff2,1703254602856,561c4f5d59db36f529a794d5948346d81f245744120c8959354e942b8e21ed3a -static/media/public-sans-latin-ext-400-normal.ec6f5fe4a39d95207b1f.woff,1703254602848,3d786a89fa8a91c4ce85f1b7bfde31b0853d535f1635d5918d127b272cf9c150 -static/media/public-sans-latin-ext-400-normal.fb7d8869799c6eec9401.woff2,1703254602856,9ab844a64857f2c1a12a9b8a9efa25d47e3ddd60e4c9cc676da7c0a67bdadd69 -static/media/public-sans-vietnamese-400-normal.529cb4480800870e4c21.woff,1703254602856,e1a3002976a355cecb3b9970347d25c7d7222b72ec7dad04999445350bacf567 -static/media/public-sans-vietnamese-400-normal.cd61d3bcc45fcd8389b9.woff2,1703254602856,a736201581a86c25eeb0a4e33d4941e0827fe034f7efb50d1cd7f93b772875b0 -static/media/public-sans-latin-400-normal.c49c54e2dace7c6c0d24.woff,1703254602856,d54a1ec84ddd47afd2661a3c9cdb879b818c1ddbba14295e34e61b5c9e919376 -static/js/main.28a2565b.js,1703254602856,4e9839d3c992138f60063280c98e6a1d9da1a072cbf837d4f8eed92216c6e70b -static/js/main.28a2565b.js.map,1703254602856,7f4c7a3a88b0361b419f205b0ff7161f2d684b2bf135eeda90150078a0b3fcf1 +asset-manifest.json,1703397055147,6de68fd9582e018c688b003565307daa4dfba276328e29e94f6689b8f56e015b +index.html,1703397055147,219305a48b9b4f1801a4583435ad63b44e93076057703b14e49917bbd90fa603 +static/js/787.97a755d5.chunk.js,1703397055160,cc114f23b43e5415100680b4a7ceb5aa62d0c5bb5f54f160a9808319fd91935c +static/css/main.37bf2c02.css,1703397055161,7dc36c6606b5b9e05e1a1db815bf4589004a387cc93791b2f107ad0ea355243a +static/js/main.6201615c.js.LICENSE.txt,1703397055161,ac5a220873d7f6d9ea7abb16648904d28aaff03529a143225133761dc8b64cd9 +static/js/787.97a755d5.chunk.js.map,1703397055161,20b6b43ba98871fc71423361cfcc46397a0e31efa2dc284e97cbcfce4333dafb +static/css/main.37bf2c02.css.map,1703397055163,7f599aeebb0bdde30826e9d5a093a0e7819dbc76178bee4dc73dd3032b89b0ae +static/media/public-sans-latin-400-normal.395632508f028112812e.woff2,1703397055160,561c4f5d59db36f529a794d5948346d81f245744120c8959354e942b8e21ed3a +static/media/public-sans-vietnamese-400-normal.529cb4480800870e4c21.woff,1703397055160,e1a3002976a355cecb3b9970347d25c7d7222b72ec7dad04999445350bacf567 +static/media/public-sans-latin-ext-400-normal.ec6f5fe4a39d95207b1f.woff,1703397055160,3d786a89fa8a91c4ce85f1b7bfde31b0853d535f1635d5918d127b272cf9c150 +static/media/public-sans-latin-ext-400-normal.fb7d8869799c6eec9401.woff2,1703397055160,9ab844a64857f2c1a12a9b8a9efa25d47e3ddd60e4c9cc676da7c0a67bdadd69 +static/media/public-sans-vietnamese-400-normal.cd61d3bcc45fcd8389b9.woff2,1703397055160,a736201581a86c25eeb0a4e33d4941e0827fe034f7efb50d1cd7f93b772875b0 +static/media/public-sans-latin-400-normal.c49c54e2dace7c6c0d24.woff,1703397055160,d54a1ec84ddd47afd2661a3c9cdb879b818c1ddbba14295e34e61b5c9e919376 +static/js/main.6201615c.js,1703397055161,40f7aba5321654929b32ab5badfda00d43d6b8e3e275a5ee000271ad11401e0c +static/js/main.6201615c.js.map,1703397055164,6ef6d51e1a2f71a8cb13b5837d0111f1b76d51f7249a19a9d45140723b773fbf diff --git a/src/.env b/src/.env index 1170f921..798af47f 100644 --- a/src/.env +++ b/src/.env @@ -1,7 +1,7 @@ PUBLIC_URL = "./public/" -REACT_APP_API_KEY = "AIzaSyCduh8Bd6T3lqaMxFxihVPZQSRH7_vPODY" -REACT_APP_AUTH_DOMAIN = "dear-diary-emailusername-6a3d7.firebaseapp.com" -REACT_APP_PROJECT_ID = "dear-diary-emailusername-6a3d7" -REACT_APP_STORAGE_BUCKET = "dear-diary-emailusername-6a3d7.appspot.com" -REACT_APP_MESSAGING_SENDER_ID = "107317734441" -REACT_APP_APP_ID = "1:107317734441:web:2b5d34185dce4a01564038" \ No newline at end of file +REACT_APP_API_KEY = AIzaSyCduh8Bd6T3lqaMxFxihVPZQSRH7_vPODY +REACT_APP_AUTH_DOMAIN = dear-diary-emailusername-6a3d7.firebaseapp.com +REACT_APP_PROJECT_ID = dear-diary-emailusername-6a3d7 +REACT_APP_STORAGE_BUCKET = dear-diary-emailusername-6a3d7.appspot.com +REACT_APP_MESSAGING_SENDER_ID = 107317734441 +REACT_APP_APP_ID = 1:107317734441:web:2b5d34185dce4a01564038 \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 9d7f32e2..3717463a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,7 @@ import './App.css'; -import AppRoutes from './components/appRoutes'; +import AppRoutes from './components/Routes/appRoutes'; function App() { return ( diff --git a/src/components/header.tsx b/src/components/Header/Header.tsx similarity index 100% rename from src/components/header.tsx rename to src/components/Header/Header.tsx diff --git a/src/components/appRoutes.tsx b/src/components/Routes/appRoutes.tsx similarity index 66% rename from src/components/appRoutes.tsx rename to src/components/Routes/appRoutes.tsx index 6a2c3260..cd01725f 100644 --- a/src/components/appRoutes.tsx +++ b/src/components/Routes/appRoutes.tsx @@ -1,7 +1,7 @@ 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"; +import SignInPage from "../../containers/SignInPage/SignInPage"; +import HomePage from "../../containers/HomePage/HomePage"; +import { SIGN_IN_PATH, HOME_PATH } from "../../utility/routeConstants"; const AppRoutes = () => { return ( diff --git a/src/containers/HomePage/HomePage.tsx b/src/containers/HomePage/HomePage.tsx index e01def6f..9bd8edff 100644 --- a/src/containers/HomePage/HomePage.tsx +++ b/src/containers/HomePage/HomePage.tsx @@ -4,7 +4,7 @@ import SearchIcon from '@mui/icons-material/Search'; import InputAdornment from '@mui/material/InputAdornment'; import Button from '@mui/material/Button'; import { IconButton } from '@mui/material'; -import Header from '../../components/Header'; +import Header from '../../components/Header/Header'; import Grid from '@mui/material/Grid'; import Modal from '@mui/material/Modal'; import DiaryCard from './DiaryCard/DiaryCard'; @@ -21,6 +21,7 @@ import { RootState, useAppDispatch } from '../../redux/store'; import { useSelector, useDispatch } from 'react-redux'; import { diaryCardActions } from '../../redux/diary/slice'; +import CalculateTimeElapsed from '../../utility/calculateTimeElapsed'; const StyledMainDiv = styled.div` display: flex; @@ -188,6 +189,8 @@ const HomePage = () => { const [diaryEntries, setDiaryEntries] = useState([]); // state to track diary entries const [showAlert, setShowAlert] = useState(false); const [submitTime, setSubmitTime] = useState(null); + const [elapsedTime, setElapsedTime] = useState(''); + const [searchQuery, setSearchQuery] = useState(''); const dispatch = useDispatch(); @@ -212,11 +215,10 @@ const HomePage = () => { dispatch(diaryCardActions.addDiaryCard({ title, description, username: nickName })) // addding a new diary card to db // add new diary card to diary entries - // setDiaryEntries([newDiaryCard, ...diaryEntries]); + setSubmitTime(new Date()); // Capture the time when the user submits the card handleCloseSubmitCard(); - // show toast - // showToaster(); + // show alert setShowAlert(true); }; @@ -239,7 +241,7 @@ const HomePage = () => { setDiaryEntries(entries); }, [entries]); - const [searchQuery, setSearchQuery] = useState(''); + // Function to filter diary entries based on search query const filteredDiaryEntries = diaryEntries.filter((entry) => { @@ -248,11 +250,11 @@ const HomePage = () => { }); - const [elapsedTime, setElapsedTime] = useState(''); + // Function to calculate and update elapsed time const updateElapsedTime = () => { - const timeElapsed = calculateTimeElapsed(submitTime); + const timeElapsed = CalculateTimeElapsed(submitTime); // Check if there is any time elapsed if (timeElapsed) { @@ -403,27 +405,6 @@ const HomePage = () => { ); }; -const calculateTimeElapsed = (submitTime: Date | null) => { - if (!submitTime) return ''; - const currentTime = new Date(); - const elapsedMilliseconds = currentTime.getTime() - submitTime.getTime(); - const elapsedSeconds = Math.floor(elapsedMilliseconds / 1000); - - // Calculate minutes and remaining seconds - const minutes = Math.floor(elapsedSeconds / 60); - const seconds = elapsedSeconds % 60; - - // Construct the time elapsed string - let timeElapsedString = ''; - - if (minutes > 0) { - timeElapsedString += `${minutes} ${minutes === 1 ? 'min' : 'mins'}`; - } else { - timeElapsedString += '0 mins'; - } - - return timeElapsedString.trim(); -}; export default HomePage; diff --git a/src/containers/SignInPage/SignInPage.tsx b/src/containers/SignInPage/SignInPage.tsx index a029d66d..035814c1 100644 --- a/src/containers/SignInPage/SignInPage.tsx +++ b/src/containers/SignInPage/SignInPage.tsx @@ -11,6 +11,7 @@ import RandomNameGenerator from '../../utility/randomNameGenerator'; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import styled from 'styled-components'; +import { Grid } from '@mui/material'; const StyledDiv = styled.div` display: flex; @@ -32,6 +33,7 @@ const StyledContinueButton = styled(Button)` background-color: #0092DD; align-self: center; margin-top: 15px; + margin-bottom: 24px; } `; @@ -48,7 +50,7 @@ const StyledTitle = styled.span` font-weight: 700; align-content: center; line-height: 24px; - margin-bottom: 10px; + margin-bottom: 24px; `; const StyledLogoText = styled.span` @@ -64,7 +66,7 @@ const StyledLogoText = styled.span` const StyledCardBox = styled(Box)` background-color: #ffffff; width: 742px; - height: 267px; + height: auto; display: flex; margin: 0 10px; flex-direction: column; @@ -77,25 +79,30 @@ const StyledLogoBox = styled(Box)` align-items: flex-start; margin-top: 24px; margin-left: 24px; + margin-bottom: 24px; `; -const StyledInputBox = styled(Box)` +const StyledInputGrid = styled(Grid)` align-self: center; - margin-top: 30px; + margin: 0 24px 0 24px; + width: auto; `; const StyledTextField = styled(TextField)` +&&&{ width: 395px; border-radius: 4px; border: 1px; color: #DBDADE; font-size: 13px; line-height: 21px; + margin-left: 5px; + margin-right: 16px; margin-bottom: 5px; -`; +}`; const StyledArrowForwardIcon = styled(ArrowForwardIcon)` &&& { @@ -110,18 +117,19 @@ const StyledRandomButton = styled(Button)` font-family: public sans; text-transform: none; width: 104px; - height: 35px; + height: 38px; border-radius: 6px; color: #0092DD; background-color: rgba(0, 146, 221, 0.16); align-self: center; - margin-left: 16px; - margin-top: 3px; + margin-left: 0px; + margin-top: 0px; font-weight: 500; line-height: 18px; font-size: 15px; padding: 10px 20px 10px 20px; + } `; @@ -158,7 +166,7 @@ const SignIn = () => { Sign In - + { Random - + Continue diff --git a/src/utility/calculateTimeElapsed.ts b/src/utility/calculateTimeElapsed.ts new file mode 100644 index 00000000..af2b6720 --- /dev/null +++ b/src/utility/calculateTimeElapsed.ts @@ -0,0 +1,24 @@ +const CalculateTimeElapsed = (submitTime: Date | null) => { + if (!submitTime) return ''; + + const currentTime = new Date(); + const elapsedMilliseconds = currentTime.getTime() - submitTime.getTime(); + const elapsedSeconds = Math.floor(elapsedMilliseconds / 1000); + + // Calculate minutes and remaining seconds + const minutes = Math.floor(elapsedSeconds / 60); + const seconds = elapsedSeconds % 60; + + // Construct the time elapsed string + let timeElapsedString = ''; + + if (minutes > 0) { + timeElapsedString += `${minutes} ${minutes === 1 ? 'min' : 'mins'}`; + } else { + timeElapsedString += '0 mins'; + } + + return timeElapsedString.trim(); +}; + +export default CalculateTimeElapsed; \ No newline at end of file From 774b3b996a271aa822bad926c8d1a6119f848acb Mon Sep 17 00:00:00 2001 From: Pasindu Madusha Date: Tue, 2 Jan 2024 10:54:37 +0530 Subject: [PATCH 5/8] fix navigate issues --- .firebase/hosting.YnVpbGQ.cache | 30 ++++++++++++++-------------- src/containers/HomePage/HomePage.tsx | 26 ++++++++++++++++-------- 2 files changed, 33 insertions(+), 23 deletions(-) diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache index 2a089942..4c8a303b 100644 --- a/.firebase/hosting.YnVpbGQ.cache +++ b/.firebase/hosting.YnVpbGQ.cache @@ -7,18 +7,18 @@ bg/bg.png,1701347069276,f3da082aa49cee668dac1d4f8edf150c36f7c9f485bf4a5d4b42b6b2 homePage/user.png,1701857344122,3bacf05181c4a286087afee612ab2971cd3c46b4ec45cde9147ee2dc076067f2 logo/image1.png,1701347048566,a8e687d0d310e78081f90752f3f81ca2b53ee1785378c9babd9b1995ea075d68 submitCard/close.svg,1701844216163,1fc165e347762212e40c3de9a81b678cef0b393509f1588b8e1b738bced2f96d -asset-manifest.json,1703397055147,6de68fd9582e018c688b003565307daa4dfba276328e29e94f6689b8f56e015b -index.html,1703397055147,219305a48b9b4f1801a4583435ad63b44e93076057703b14e49917bbd90fa603 -static/js/787.97a755d5.chunk.js,1703397055160,cc114f23b43e5415100680b4a7ceb5aa62d0c5bb5f54f160a9808319fd91935c -static/css/main.37bf2c02.css,1703397055161,7dc36c6606b5b9e05e1a1db815bf4589004a387cc93791b2f107ad0ea355243a -static/js/main.6201615c.js.LICENSE.txt,1703397055161,ac5a220873d7f6d9ea7abb16648904d28aaff03529a143225133761dc8b64cd9 -static/js/787.97a755d5.chunk.js.map,1703397055161,20b6b43ba98871fc71423361cfcc46397a0e31efa2dc284e97cbcfce4333dafb -static/css/main.37bf2c02.css.map,1703397055163,7f599aeebb0bdde30826e9d5a093a0e7819dbc76178bee4dc73dd3032b89b0ae -static/media/public-sans-latin-400-normal.395632508f028112812e.woff2,1703397055160,561c4f5d59db36f529a794d5948346d81f245744120c8959354e942b8e21ed3a -static/media/public-sans-vietnamese-400-normal.529cb4480800870e4c21.woff,1703397055160,e1a3002976a355cecb3b9970347d25c7d7222b72ec7dad04999445350bacf567 -static/media/public-sans-latin-ext-400-normal.ec6f5fe4a39d95207b1f.woff,1703397055160,3d786a89fa8a91c4ce85f1b7bfde31b0853d535f1635d5918d127b272cf9c150 -static/media/public-sans-latin-ext-400-normal.fb7d8869799c6eec9401.woff2,1703397055160,9ab844a64857f2c1a12a9b8a9efa25d47e3ddd60e4c9cc676da7c0a67bdadd69 -static/media/public-sans-vietnamese-400-normal.cd61d3bcc45fcd8389b9.woff2,1703397055160,a736201581a86c25eeb0a4e33d4941e0827fe034f7efb50d1cd7f93b772875b0 -static/media/public-sans-latin-400-normal.c49c54e2dace7c6c0d24.woff,1703397055160,d54a1ec84ddd47afd2661a3c9cdb879b818c1ddbba14295e34e61b5c9e919376 -static/js/main.6201615c.js,1703397055161,40f7aba5321654929b32ab5badfda00d43d6b8e3e275a5ee000271ad11401e0c -static/js/main.6201615c.js.map,1703397055164,6ef6d51e1a2f71a8cb13b5837d0111f1b76d51f7249a19a9d45140723b773fbf +index.html,1704171076903,b9fee5c7d405060668ec2b2ac24cedabd3ba0cae20841da03bc8541ae8f46c5d +asset-manifest.json,1704171076904,6cab8b37f277f528bad682d44ccdc25d6cc6803e59cb413de04ec8f361a6de3f +static/js/main.bc1aa7c6.js.LICENSE.txt,1704171076918,ac5a220873d7f6d9ea7abb16648904d28aaff03529a143225133761dc8b64cd9 +static/js/787.97a755d5.chunk.js,1704171076918,cc114f23b43e5415100680b4a7ceb5aa62d0c5bb5f54f160a9808319fd91935c +static/css/main.37bf2c02.css,1704171076917,7dc36c6606b5b9e05e1a1db815bf4589004a387cc93791b2f107ad0ea355243a +static/js/787.97a755d5.chunk.js.map,1704171076918,20b6b43ba98871fc71423361cfcc46397a0e31efa2dc284e97cbcfce4333dafb +static/css/main.37bf2c02.css.map,1704171076918,7f599aeebb0bdde30826e9d5a093a0e7819dbc76178bee4dc73dd3032b89b0ae +static/media/public-sans-latin-400-normal.395632508f028112812e.woff2,1704171076917,561c4f5d59db36f529a794d5948346d81f245744120c8959354e942b8e21ed3a +static/media/public-sans-vietnamese-400-normal.529cb4480800870e4c21.woff,1704171076918,e1a3002976a355cecb3b9970347d25c7d7222b72ec7dad04999445350bacf567 +static/media/public-sans-latin-ext-400-normal.fb7d8869799c6eec9401.woff2,1704171076917,9ab844a64857f2c1a12a9b8a9efa25d47e3ddd60e4c9cc676da7c0a67bdadd69 +static/media/public-sans-vietnamese-400-normal.cd61d3bcc45fcd8389b9.woff2,1704171076918,a736201581a86c25eeb0a4e33d4941e0827fe034f7efb50d1cd7f93b772875b0 +static/media/public-sans-latin-ext-400-normal.ec6f5fe4a39d95207b1f.woff,1704171076918,3d786a89fa8a91c4ce85f1b7bfde31b0853d535f1635d5918d127b272cf9c150 +static/media/public-sans-latin-400-normal.c49c54e2dace7c6c0d24.woff,1704171076918,d54a1ec84ddd47afd2661a3c9cdb879b818c1ddbba14295e34e61b5c9e919376 +static/js/main.bc1aa7c6.js,1704171076919,7071ac4c5f38f8806df4c458ca49c76f74f66d4e2e6e40f6e766dce538de5c97 +static/js/main.bc1aa7c6.js.map,1704171076922,aa28ed49101b485dadbc2c7ba913cec52742048e36d32bb2cbd3af2ccc142633 diff --git a/src/containers/HomePage/HomePage.tsx b/src/containers/HomePage/HomePage.tsx index 9bd8edff..89d128db 100644 --- a/src/containers/HomePage/HomePage.tsx +++ b/src/containers/HomePage/HomePage.tsx @@ -20,6 +20,7 @@ import { useEffect } from 'react'; import { RootState, useAppDispatch } from '../../redux/store'; import { useSelector, useDispatch } from 'react-redux'; import { diaryCardActions } from '../../redux/diary/slice'; +import { useNavigate } from 'react-router-dom'; import CalculateTimeElapsed from '../../utility/calculateTimeElapsed'; @@ -187,15 +188,16 @@ interface DiaryCardProps { const HomePage = () => { const [showSubmitCard, setShowSubmitCard] = useState(false); // state to track if submit card is open or not const [diaryEntries, setDiaryEntries] = useState([]); // state to track diary entries - const [showAlert, setShowAlert] = useState(false); - const [submitTime, setSubmitTime] = useState(null); - const [elapsedTime, setElapsedTime] = useState(''); - const [searchQuery, setSearchQuery] = useState(''); + const [showAlert, setShowAlert] = useState(false); // sate to track alert + const [submitTime, setSubmitTime] = useState(null); // state to track submit time + const [elapsedTime, setElapsedTime] = useState(''); // state to track elapsed time + const [searchQuery, setSearchQuery] = useState(''); // state to track search query const dispatch = useDispatch(); + const history = useNavigate(); // get history from react router dom const location = useLocation(); // get location from react router dom - const nickName = location.state.name || {}; // from that location get name + const nickName = location.state?.name || null; // from that location get name // checking the diary card list array useEffect(() => { @@ -203,10 +205,18 @@ const HomePage = () => { }, [diaryEntries]); // fetching the diarycard according to the username + // useEffect(() => { + // console.log("fetching diary card list"); + // dispatch(diaryCardActions.fetchDiaryCardList(nickName)); + // }, [dispatch, nickName]); + useEffect(() => { - console.log("fetching diary card list"); - dispatch(diaryCardActions.fetchDiaryCardList(nickName)); - }, [dispatch, nickName]); + if (!nickName) { + history('/'); // Redirect to the signing page if nickname is empty + } else { + dispatch(diaryCardActions.fetchDiaryCardList(nickName)); + } + }, [dispatch, history, nickName]); // function to handle submit card const handleOnSubmitCard = (title: string, description: string) => { From 12c356a7e9812e9a7783891c80319d8715d9d8b0 Mon Sep 17 00:00:00 2001 From: Pasindu Madusha Date: Tue, 2 Jan 2024 11:10:02 +0530 Subject: [PATCH 6/8] fixed issues --- src/containers/HomePage/HomePage.tsx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/containers/HomePage/HomePage.tsx b/src/containers/HomePage/HomePage.tsx index 89d128db..998c4ac4 100644 --- a/src/containers/HomePage/HomePage.tsx +++ b/src/containers/HomePage/HomePage.tsx @@ -205,27 +205,27 @@ const HomePage = () => { }, [diaryEntries]); // fetching the diarycard according to the username - // useEffect(() => { - // console.log("fetching diary card list"); - // dispatch(diaryCardActions.fetchDiaryCardList(nickName)); - // }, [dispatch, nickName]); - useEffect(() => { if (!nickName) { history('/'); // Redirect to the signing page if nickname is empty } else { - dispatch(diaryCardActions.fetchDiaryCardList(nickName)); + console.log("fetching diary card list"); + dispatch(diaryCardActions.fetchDiaryCardList(nickName)); } - }, [dispatch, history, nickName]); + }, [dispatch, history, 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 }); + + // Add the new card to the beginning of the diaryEntries array + setDiaryEntries([{ title, description, username: nickName }, ...diaryEntries]); + dispatch(diaryCardActions.addDiaryCard({ title, description, username: nickName })) // addding a new diary card to db // add new diary card to diary entries - + setSubmitTime(new Date()); // Capture the time when the user submits the card handleCloseSubmitCard(); // show alert @@ -251,7 +251,7 @@ const HomePage = () => { setDiaryEntries(entries); }, [entries]); - + // Function to filter diary entries based on search query const filteredDiaryEntries = diaryEntries.filter((entry) => { @@ -260,12 +260,12 @@ const HomePage = () => { }); - + // Function to calculate and update elapsed time const updateElapsedTime = () => { const timeElapsed = CalculateTimeElapsed(submitTime); - + // Check if there is any time elapsed if (timeElapsed) { setElapsedTime(`${timeElapsed}`); @@ -402,7 +402,7 @@ const HomePage = () => { display: showAlert ? 'flex' : 'none', backgroundColor: 'white', '& .MuiIconButton-root': { - color: 'rgba(75, 70, 92, 0.55)', + color: 'rgba(75, 70, 92, 0.55)', }, }} From 422fe98c5c5c201e88e111a0a957364d7e5d53b3 Mon Sep 17 00:00:00 2001 From: Pasindu Madusha Date: Wed, 3 Jan 2024 10:51:35 +0530 Subject: [PATCH 7/8] fixed issues after final demo --- .firebase/hosting.YnVpbGQ.cache | 30 +++++++------- src/App.tsx | 2 +- .../Routes => config/appRoutes}/appRoutes.tsx | 0 .../{ => firebaseConfig}/firebaseConfig.ts | 0 src/containers/HomePage/HomePage.tsx | 13 +++--- src/redux/diary/saga.ts | 40 +++++++++---------- src/redux/diary/slice.ts | 16 ++++---- 7 files changed, 50 insertions(+), 51 deletions(-) rename src/{components/Routes => config/appRoutes}/appRoutes.tsx (100%) rename src/config/{ => firebaseConfig}/firebaseConfig.ts (100%) diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache index 4c8a303b..d32d77f6 100644 --- a/.firebase/hosting.YnVpbGQ.cache +++ b/.firebase/hosting.YnVpbGQ.cache @@ -7,18 +7,18 @@ bg/bg.png,1701347069276,f3da082aa49cee668dac1d4f8edf150c36f7c9f485bf4a5d4b42b6b2 homePage/user.png,1701857344122,3bacf05181c4a286087afee612ab2971cd3c46b4ec45cde9147ee2dc076067f2 logo/image1.png,1701347048566,a8e687d0d310e78081f90752f3f81ca2b53ee1785378c9babd9b1995ea075d68 submitCard/close.svg,1701844216163,1fc165e347762212e40c3de9a81b678cef0b393509f1588b8e1b738bced2f96d -index.html,1704171076903,b9fee5c7d405060668ec2b2ac24cedabd3ba0cae20841da03bc8541ae8f46c5d -asset-manifest.json,1704171076904,6cab8b37f277f528bad682d44ccdc25d6cc6803e59cb413de04ec8f361a6de3f -static/js/main.bc1aa7c6.js.LICENSE.txt,1704171076918,ac5a220873d7f6d9ea7abb16648904d28aaff03529a143225133761dc8b64cd9 -static/js/787.97a755d5.chunk.js,1704171076918,cc114f23b43e5415100680b4a7ceb5aa62d0c5bb5f54f160a9808319fd91935c -static/css/main.37bf2c02.css,1704171076917,7dc36c6606b5b9e05e1a1db815bf4589004a387cc93791b2f107ad0ea355243a -static/js/787.97a755d5.chunk.js.map,1704171076918,20b6b43ba98871fc71423361cfcc46397a0e31efa2dc284e97cbcfce4333dafb -static/css/main.37bf2c02.css.map,1704171076918,7f599aeebb0bdde30826e9d5a093a0e7819dbc76178bee4dc73dd3032b89b0ae -static/media/public-sans-latin-400-normal.395632508f028112812e.woff2,1704171076917,561c4f5d59db36f529a794d5948346d81f245744120c8959354e942b8e21ed3a -static/media/public-sans-vietnamese-400-normal.529cb4480800870e4c21.woff,1704171076918,e1a3002976a355cecb3b9970347d25c7d7222b72ec7dad04999445350bacf567 -static/media/public-sans-latin-ext-400-normal.fb7d8869799c6eec9401.woff2,1704171076917,9ab844a64857f2c1a12a9b8a9efa25d47e3ddd60e4c9cc676da7c0a67bdadd69 -static/media/public-sans-vietnamese-400-normal.cd61d3bcc45fcd8389b9.woff2,1704171076918,a736201581a86c25eeb0a4e33d4941e0827fe034f7efb50d1cd7f93b772875b0 -static/media/public-sans-latin-ext-400-normal.ec6f5fe4a39d95207b1f.woff,1704171076918,3d786a89fa8a91c4ce85f1b7bfde31b0853d535f1635d5918d127b272cf9c150 -static/media/public-sans-latin-400-normal.c49c54e2dace7c6c0d24.woff,1704171076918,d54a1ec84ddd47afd2661a3c9cdb879b818c1ddbba14295e34e61b5c9e919376 -static/js/main.bc1aa7c6.js,1704171076919,7071ac4c5f38f8806df4c458ca49c76f74f66d4e2e6e40f6e766dce538de5c97 -static/js/main.bc1aa7c6.js.map,1704171076922,aa28ed49101b485dadbc2c7ba913cec52742048e36d32bb2cbd3af2ccc142633 +index.html,1704175810131,f9cc5c8c688a002d6baed5b2d731220db3dbaa3b2a8bf59e16aa2da525fb5a9b +asset-manifest.json,1704175810131,d8af1f61df0f364263bfc2eb6d4cb919ee36dad19d0d7c50af2d5f3b8d99e5c8 +static/css/main.37bf2c02.css,1704175810150,7dc36c6606b5b9e05e1a1db815bf4589004a387cc93791b2f107ad0ea355243a +static/js/787.97a755d5.chunk.js,1704175810148,cc114f23b43e5415100680b4a7ceb5aa62d0c5bb5f54f160a9808319fd91935c +static/css/main.37bf2c02.css.map,1704175810148,7f599aeebb0bdde30826e9d5a093a0e7819dbc76178bee4dc73dd3032b89b0ae +static/js/787.97a755d5.chunk.js.map,1704175810149,20b6b43ba98871fc71423361cfcc46397a0e31efa2dc284e97cbcfce4333dafb +static/js/main.5dee8f23.js.LICENSE.txt,1704175810148,ac5a220873d7f6d9ea7abb16648904d28aaff03529a143225133761dc8b64cd9 +static/media/public-sans-latin-400-normal.395632508f028112812e.woff2,1704175810147,561c4f5d59db36f529a794d5948346d81f245744120c8959354e942b8e21ed3a +static/media/public-sans-latin-ext-400-normal.ec6f5fe4a39d95207b1f.woff,1704175810147,3d786a89fa8a91c4ce85f1b7bfde31b0853d535f1635d5918d127b272cf9c150 +static/media/public-sans-vietnamese-400-normal.529cb4480800870e4c21.woff,1704175810147,e1a3002976a355cecb3b9970347d25c7d7222b72ec7dad04999445350bacf567 +static/media/public-sans-vietnamese-400-normal.cd61d3bcc45fcd8389b9.woff2,1704175810147,a736201581a86c25eeb0a4e33d4941e0827fe034f7efb50d1cd7f93b772875b0 +static/media/public-sans-latin-ext-400-normal.fb7d8869799c6eec9401.woff2,1704175810147,9ab844a64857f2c1a12a9b8a9efa25d47e3ddd60e4c9cc676da7c0a67bdadd69 +static/media/public-sans-latin-400-normal.c49c54e2dace7c6c0d24.woff,1704175810147,d54a1ec84ddd47afd2661a3c9cdb879b818c1ddbba14295e34e61b5c9e919376 +static/js/main.5dee8f23.js,1704175810148,f88f8000c03e9f2276eb97a08febe457f0611ae9244a24f2dbcad64bba6c6a6d +static/js/main.5dee8f23.js.map,1704175810153,d1f0f47ff087ecefc3e36605a54994b7e20363b01701661688982c479adafb4f diff --git a/src/App.tsx b/src/App.tsx index 3717463a..01490dc0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,7 @@ import './App.css'; -import AppRoutes from './components/Routes/appRoutes'; +import AppRoutes from './config/appRoutes/appRoutes'; function App() { return ( diff --git a/src/components/Routes/appRoutes.tsx b/src/config/appRoutes/appRoutes.tsx similarity index 100% rename from src/components/Routes/appRoutes.tsx rename to src/config/appRoutes/appRoutes.tsx diff --git a/src/config/firebaseConfig.ts b/src/config/firebaseConfig/firebaseConfig.ts similarity index 100% rename from src/config/firebaseConfig.ts rename to src/config/firebaseConfig/firebaseConfig.ts diff --git a/src/containers/HomePage/HomePage.tsx b/src/containers/HomePage/HomePage.tsx index 998c4ac4..87d00e2f 100644 --- a/src/containers/HomePage/HomePage.tsx +++ b/src/containers/HomePage/HomePage.tsx @@ -23,6 +23,7 @@ import { diaryCardActions } from '../../redux/diary/slice'; import { useNavigate } from 'react-router-dom'; import CalculateTimeElapsed from '../../utility/calculateTimeElapsed'; +import { SIGN_IN_PATH } from '../../utility/routeConstants'; const StyledMainDiv = styled.div` display: flex; @@ -178,7 +179,7 @@ const ToastContainerTime = styled.span` -interface DiaryCardProps { +interface IDiaryCardProps { title: string; description: string; username: string; @@ -187,7 +188,7 @@ interface DiaryCardProps { const HomePage = () => { const [showSubmitCard, setShowSubmitCard] = useState(false); // state to track if submit card is open or not - const [diaryEntries, setDiaryEntries] = useState([]); // state to track diary entries + const [diaryEntries, setDiaryEntries] = useState([]); // state to track diary entries const [showAlert, setShowAlert] = useState(false); // sate to track alert const [submitTime, setSubmitTime] = useState(null); // state to track submit time const [elapsedTime, setElapsedTime] = useState(''); // state to track elapsed time @@ -207,9 +208,9 @@ const HomePage = () => { // fetching the diarycard according to the username useEffect(() => { if (!nickName) { - history('/'); // Redirect to the signing page if nickname is empty + history(SIGN_IN_PATH); // Redirect to the signing page if nickname is empty } else { - console.log("fetching diary card list"); + dispatch(diaryCardActions.fetchDiaryCardList(nickName)); } }, [dispatch, history, nickName]); @@ -217,11 +218,11 @@ const HomePage = () => { // function to handle submit card const handleOnSubmitCard = (title: string, description: string) => { // create new diary card - console.log('Handling submit card:', { title, description, username: nickName }); + // Add the new card to the beginning of the diaryEntries array setDiaryEntries([{ title, description, username: nickName }, ...diaryEntries]); - + dispatch(diaryCardActions.addDiaryCard({ title, description, username: nickName })) // addding a new diary card to db // add new diary card to diary entries diff --git a/src/redux/diary/saga.ts b/src/redux/diary/saga.ts index 87bf13dd..f383f0e7 100644 --- a/src/redux/diary/saga.ts +++ b/src/redux/diary/saga.ts @@ -3,31 +3,27 @@ import { eventChannel } from 'redux-saga'; import { diaryCardActions } from './slice'; -import { db } from '../../config/firebaseConfig'; +import { db } from '../../config/firebaseConfig/firebaseConfig'; import { collection, addDoc, query, onSnapshot, where } from "firebase/firestore"; import { PayloadAction } from '@reduxjs/toolkit'; // props for DiaryCard component -interface DiaryCardProps { +interface IDiaryCardProps { title: string; description: string; username: string; } -// create a channel to listen to changes in the database -function snapshotChannel(db: any, username: string) { - // return an event channel that will subscribe to the database changes this will be used to real-time updates - return eventChannel((emitter) => { - const ref = collection(db, "DiaryCards"); // reference to the collection "DiaryCards" - const query1 = query(ref, where("username", "==", username)); // query to get the documents with the username +function snapshotChannel(db: any) { + return eventChannel((emitter) => { + const ref = collection(db, "DiaryCards"); - // listen to the changes in the database - const unsubscribe = onSnapshot(query1, (querySnapshot) => { - const updatedDiaryCards: DiaryCardProps[] = []; // array to store the updated diary cards + const unsubscribe = onSnapshot(ref, (querySnapshot) => { + const updatedDiaryCards: IDiaryCardProps[] = []; querySnapshot.forEach((doc) => { - const entry = doc.data() as DiaryCardProps; - updatedDiaryCards.push(entry); // add the updated diary card to the array + const entry = doc.data() as IDiaryCardProps; + updatedDiaryCards.push(entry); }); emitter(updatedDiaryCards); }); @@ -36,19 +32,20 @@ function snapshotChannel(db: any, username: string) { }); } + // add a diary card to the database -function* addDiaryCard(action: PayloadAction): Generator { +function* addDiaryCard(action: PayloadAction): Generator { try { // console.log('Adding diary card', action.payload) const { title, description, username } = action.payload; - const diaryCard: DiaryCardProps = { + const diaryCard: IDiaryCardProps = { title, description, username }; yield call(addDoc, collection(db, "DiaryCards"), diaryCard); // add the diary card to the database } catch (err) { - console.log('Adding card error', err); + console.error('Adding card error', err); alert(err); } } @@ -57,14 +54,15 @@ function* addDiaryCard(action: PayloadAction): Generator): Generator { try { const username = action.payload; - const channel = yield call(snapshotChannel, db, username); // create a channel to listen to changes in the database + const channel = yield call(snapshotChannel, db); // create a channel to listen to changes in the database while (true) { - const diaryCardList: DiaryCardProps[] = yield take(channel); // get the updated diary card list - // console.log('Diary card list', diaryCardList); - yield put(diaryCardActions.setDiaryCardList(diaryCardList)); // update the diary card list in the redux store + const diaryCardList: IDiaryCardProps[] = yield take(channel); // get the updated diary card list + const filteredDiaryCardList = diaryCardList.filter(card => card.username === username); + yield put(diaryCardActions.setDiaryCardList(filteredDiaryCardList)); // update the diary card list in the redux store + } } catch (err) { - console.log('Fetching diary card list error', err); + console.error('Fetching diary card list error', err); alert(err); } } diff --git a/src/redux/diary/slice.ts b/src/redux/diary/slice.ts index 5d49ef7f..1e18792f 100644 --- a/src/redux/diary/slice.ts +++ b/src/redux/diary/slice.ts @@ -1,17 +1,17 @@ import {createSlice, PayloadAction} from '@reduxjs/toolkit'; -interface DiaryCardProps { +interface IDiaryCardProps { title: string; description: string; username: string; } -interface DiaryCardState { - diaryCardList: DiaryCardProps[]; +interface IDiaryCardState { + diaryCardList: IDiaryCardProps[]; } -const initialState: DiaryCardState = { +const initialState: IDiaryCardState = { diaryCardList: [], }; @@ -19,12 +19,12 @@ export const diaryCardSlice = createSlice({ name: 'diaryCard', initialState, reducers: { - addDiaryCard: (state, action: PayloadAction) => { - // console.log('Adding diary card:', action.payload); + addDiaryCard: (state, action: PayloadAction) => { + state.diaryCardList.push(action.payload); // add the diary card to the diary card list - // console.log('Diary card list:', state.diaryCardList); + }, - setDiaryCardList: (state, action: PayloadAction) => { + setDiaryCardList: (state, action: PayloadAction) => { state.diaryCardList = action.payload; // set the diary card list to the updated diary card list }, fetchDiaryCardList: () => {}, // fetch the diary card list from the database From eac905b9f69e9f9a0e540fca7dbabcd8c9aa5c59 Mon Sep 17 00:00:00 2001 From: Pasindu Madusha Date: Wed, 3 Jan 2024 11:06:08 +0530 Subject: [PATCH 8/8] fixed issues after final demo --- src/containers/SignInPage/SignInPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/containers/SignInPage/SignInPage.tsx b/src/containers/SignInPage/SignInPage.tsx index 035814c1..8e2d6b67 100644 --- a/src/containers/SignInPage/SignInPage.tsx +++ b/src/containers/SignInPage/SignInPage.tsx @@ -85,7 +85,7 @@ const StyledLogoBox = styled(Box)` const StyledInputGrid = styled(Grid)` align-self: center; - margin: 0 24px 0 24px; + padding: 0px 5px 0px 5px; width: auto; @@ -99,7 +99,7 @@ const StyledTextField = styled(TextField)` color: #DBDADE; font-size: 13px; line-height: 21px; - margin-left: 5px; + margin-left: 16px; margin-right: 16px; margin-bottom: 5px; }`;