= ({openSnackbar, handleCloseSnackbar, submissionTime})=> {
+ return (
+
+
+
+ {` Record saved successfully ${submissionTime ? `${Math.floor((new Date().getTime() - submissionTime.getTime()) / 60000)} mins ago` : ''}`}
+
+ }
+ action={
+
+
+
+
+
+ }
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ sx={
+ {
+ '& .MuiSnackbarContent-root': {
+ backgroundColor: '#FFFFFF',
+ color: '#000',
+ borderRadius: '6px',
+ },
+ }
+
+ }
+ />
+
+ )
+}
+
+export default SnackBar
\ No newline at end of file
diff --git a/src/pages/SignIn/SignIn.tsx b/src/pages/SignIn/SignIn.tsx
index d58573a5..9bad7fe7 100644
--- a/src/pages/SignIn/SignIn.tsx
+++ b/src/pages/SignIn/SignIn.tsx
@@ -5,6 +5,8 @@ import Background from "../../components/Background/Background";
import { Box, Button, TextField, Typography, Card, CardContent} from "@mui/material";
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import {generateRandomName} from '../../utility/generateRandomName';
+import { useDispatch } from "react-redux";
+import { setDiaries } from "../../redux/diarySlice";
const styles = {
card: {
@@ -76,10 +78,12 @@ const styles = {
backgroundColor: '#0092DD',
opacity: '65%',
},
+ textTransform: 'none',
},
continueButton: {
backgroundColor: '#0092DD',
opacity: '65%',
+ textTransform: 'none',
},
}
@@ -98,12 +102,13 @@ const SignIn: React.FC = () => {
};
const navigate = useNavigate();
-
+ const dispatch = useDispatch();
const handleContinueClick = () => {
if (text.trim() === '') {
alert('Please enter a nickname');
} else {
localStorage.setItem('nickname', text);
+ dispatch(setDiaries([]));
navigate('/home');
}
}
diff --git a/src/redux/Sagas/diarySagas.tsx b/src/redux/Sagas/diarySagas.tsx
new file mode 100644
index 00000000..b893f936
--- /dev/null
+++ b/src/redux/Sagas/diarySagas.tsx
@@ -0,0 +1,40 @@
+import { eventChannel } from 'redux-saga';
+import { call, put, take, takeEvery } from 'redux-saga/effects';
+import { PayloadAction } from '@reduxjs/toolkit';
+import { collection, addDoc, onSnapshot, query, where } from 'firebase/firestore';
+import db from '../../utility/firebase';
+import { addDiary, setDiaries, fetchDiaries } from '../diarySlice';
+
+interface Diary {
+ title: string;
+ description: string;
+ nickname: string;
+ }
+
+function* addDiarySaga(action: PayloadAction) {
+ const diariesCollection = collection(db, 'diaries');
+ yield call(addDoc, diariesCollection, action.payload);
+}
+function* fetchDiariesSaga(action: PayloadAction<{ nickname: string }>): Generator {
+ const { nickname } = action.payload;
+ const diariesCollection = collection(db, 'diaries');
+ const q = query(diariesCollection, where("nickname", "==", nickname));
+
+ const channel = eventChannel(emitter => {
+ const unsubscribe = onSnapshot(q, snapshot => {
+ emitter(snapshot.docs.map(doc => doc.data()));
+ });
+
+ return () => unsubscribe();
+ });
+
+ while (true) {
+ const diariesArray = yield take(channel);
+ yield put(setDiaries(diariesArray));
+ }
+}
+
+export function* watchDiarySagas() {
+ yield takeEvery(addDiary.type, addDiarySaga);
+ yield takeEvery(fetchDiaries.type, fetchDiariesSaga);
+}
diff --git a/src/redux/diarySlice.tsx b/src/redux/diarySlice.tsx
new file mode 100644
index 00000000..02ee8dae
--- /dev/null
+++ b/src/redux/diarySlice.tsx
@@ -0,0 +1,26 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+interface Diary {
+ title: string;
+ description: string;
+ nickname: string;
+}
+
+const diarySlice = createSlice({
+ name: 'diaries',
+ initialState: [] as Diary[],
+
+ reducers: {
+ addDiary: (state, action: PayloadAction) => {
+ state.push(action.payload);
+ },
+ setDiaries: (state, action: PayloadAction) => {
+ return action.payload;
+ },
+ fetchDiaries: (state, action: PayloadAction<{ nickname: string | null }>) => {},
+ },
+});
+
+export const { addDiary, setDiaries, fetchDiaries } = diarySlice.actions;
+
+export default diarySlice.reducer;
diff --git a/src/redux/store.tsx b/src/redux/store.tsx
new file mode 100644
index 00000000..8daee563
--- /dev/null
+++ b/src/redux/store.tsx
@@ -0,0 +1,19 @@
+import { configureStore } from '@reduxjs/toolkit';
+import diaryReducer from './diarySlice';
+import createSagaMiddleware from 'redux-saga';
+import { watchDiarySagas } from './Sagas/diarySagas';
+
+const sagaMiddleware = createSagaMiddleware();
+const middleware: any[] = [sagaMiddleware];
+
+const store = configureStore({
+ reducer: {
+ diaries: diaryReducer,
+ },
+ middleware: (getDefaultMiddleware) =>
+ getDefaultMiddleware().concat(middleware),
+});
+
+sagaMiddleware.run(watchDiarySagas);
+
+export default store;
diff --git a/src/utility/firebase.tsx b/src/utility/firebase.tsx
new file mode 100644
index 00000000..3e06f11a
--- /dev/null
+++ b/src/utility/firebase.tsx
@@ -0,0 +1,20 @@
+import { initializeApp } from "firebase/app";
+import { getFirestore } from "firebase/firestore";
+
+const firebaseConfig = {
+ apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
+ authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
+ projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
+ storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
+ messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
+ appId: process.env.REACT_APP_FIREBASE_APP_ID,
+ };
+
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+
+// Get a reference to the database service
+const db = getFirestore(app);
+
+export default db;
\ No newline at end of file