Merge pull request #26 from HackYourFuture-CPH/frontend-question/meraj

Frontend question/meraj

packages/client/src/App.js

@@ -1,9 +1,9 @@
+// /* eslint-disable */
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Dashboard from './containers/Dashboard/Dashboard';
 import { LandingPageContainer } from './containers/LandingPage/LandingPage';
-import { PageNotFound } from './containers/PageNotFound/PageNotFound';
-import { CheckinQuestions } from './containers/LandingPage/CheckinQuestionsPage/CheckinQuestions';
+import { CheckinQuestions } from './containers/QuestionPage/CheckinQuestions';
 import { TeamIdContextProvider } from './hooks/contextHook';
 
 function App() {
@@ -12,11 +12,9 @@ function App() {
       <TeamIdContextProvider>
         <Router>
           <Routes>
-            {/* TODO: put back comment after the login flow is down */}
             <Route path="/" element={<LandingPageContainer />} />
             <Route path="/dashboard" element={<Dashboard />} />
             <Route path="/questions" element={<CheckinQuestions />} />
-            {/* <Route path="*" element={<PageNotFound />} /> */}
           </Routes>
         </Router>
       </TeamIdContextProvider>

packages/client/src/components/CheckinQuestionsPage/AddCheckinQuestionModal.jsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, TextField, Modal, Box, Typography } from '@mui/material';
+
+const style = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'background.paper',
+  boxShadow: 24,
+  p: 4,
+};
+
+const AddCheckinQuestionModal = ({
+  showAddModal,
+  setShowAddModal,
+  newQuestionText,
+  setNewQuestionText,
+  handleAdd,
+}) => {
+  const [error, setError] = useState(false);
+
+  const onSave = () => {
+    if (newQuestionText.trim() === '') {
+      setError(true);
+      return;
+    }
+    handleAdd();
+    setNewQuestionText('');
+  };
+
+  return (
+    <Modal
+      open={showAddModal}
+      onClose={() => setShowAddModal(false)}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <Box sx={style} className="modal-container">
+        <Typography
+          variant="h6"
+          style={{ textAlign: 'center', marginBottom: '10px' }}
+        >
+          Add Checkin Question
+        </Typography>
+        <TextField
+          id="outlined-multiline-static"
+          label="Write your question here..."
+          multiline
+          rows={4}
+          value={newQuestionText}
+          onChange={(e) => {
+            setNewQuestionText(e.target.value);
+            setError(false);
+          }}
+          fullWidth
+          variant="outlined"
+          error={error}
+          helperText={error ? 'Question cannot be empty' : ''}
+          sx={{ mb: 2 }}
+        />
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+          <Button variant="contained" onClick={onSave}>
+            Add Question
+          </Button>
+          <Button variant="outlined" onClick={() => setShowAddModal(false)}>
+            Cancel
+          </Button>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
+
+AddCheckinQuestionModal.propTypes = {
+  showAddModal: PropTypes.bool.isRequired,
+  setShowAddModal: PropTypes.func.isRequired,
+  newQuestionText: PropTypes.string.isRequired,
+  setNewQuestionText: PropTypes.func.isRequired,
+  handleAdd: PropTypes.func.isRequired,
+};
+
+export { AddCheckinQuestionModal };

packages/client/src/components/CheckinQuestionsPage/EditCheckinQuestionModal.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, TextField, Modal, Box, Typography } from '@mui/material';
+
+const EditCheckinQuestionModal = ({
+  showEditModal,
+  questionId,
+  questionText,
+  setQuestionText,
+  handleSaveEdit,
+  handleClose,
+}) => {
+  if (!showEditModal) {
+    return null;
+  }
+
+  return (
+    <Modal
+      open={showEditModal}
+      onClose={handleClose}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <Box className="modal-container">
+        <Typography variant="h6" className="modal-title">
+          Edit Checkin Question
+        </Typography>
+        <TextField
+          className="modal-textfield"
+          id="outlined-multiline-static"
+          label="Write your question here..."
+          multiline
+          rows={4}
+          value={questionText}
+          onChange={(e) => setQuestionText(e.target.value)}
+          fullWidth
+          variant="outlined"
+        />
+        <Box className="button-container-edit-question">
+          <Button
+            variant="contained"
+            onClick={() => handleSaveEdit(questionId)}
+          >
+            Save
+          </Button>
+          <Button variant="outlined" onClick={handleClose}>
+            Cancel
+          </Button>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
+
+EditCheckinQuestionModal.propTypes = {
+  showEditModal: PropTypes.bool.isRequired,
+  questionId: PropTypes.number.isRequired,
+  questionText: PropTypes.string.isRequired,
+  setQuestionText: PropTypes.func.isRequired,
+  handleSaveEdit: PropTypes.func.isRequired,
+  handleClose: PropTypes.func.isRequired,
+};
+
+export { EditCheckinQuestionModal };

packages/client/src/components/CheckinQuestionsPage/QuestionList.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Typography, IconButton } from '@mui/material';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import '../../containers/QuestionPage/CheckinQuestions.css';
+
+const QuestionList = ({
+  checkinQuestions,
+  editQuestionId,
+  handleEditQuestion,
+  handleDeleteQuestion,
+}) => {
+  return (
+    <ul className="question-list">
+      {checkinQuestions.map((question) => (
+        <li key={question.question_id} className="question-item">
+          <div className="question-content">
+            <Typography>{question.question_text}</Typography>
+            {editQuestionId !== question.question_id && (
+              <div className="question-actions">
+                <IconButton
+                  onClick={() =>
+                    handleEditQuestion(
+                      question.question_id,
+                      question.question_text,
+                    )
+                  }
+                >
+                  <EditIcon />
+                </IconButton>
+                <IconButton
+                  onClick={() => handleDeleteQuestion(question.question_id)}
+                >
+                  <DeleteIcon />
+                </IconButton>
+              </div>
+            )}
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+QuestionList.propTypes = {
+  checkinQuestions: PropTypes.arrayOf(PropTypes.object).isRequired,
+  editQuestionId: PropTypes.number,
+  handleEditQuestion: PropTypes.func.isRequired,
+  handleDeleteQuestion: PropTypes.func.isRequired,
+};
+
+export default QuestionList;