modified message and questionList

smarthub/src/components/QuestionList.js

@@ -7,29 +7,51 @@ const deleteQuestionFromDB = async (id) => {
   console.log(`Deleted question with ID: ${id}`);
 };
 
-function QuestionList({ questions, setQuestions }) { // 通过结构赋值来接受questions prop
+function QuestionList({ questions, setQuestions, currentTab }) { // 通过结构赋值来接受questions prop
 
     const handleDelete = async (id) => {
         // 删除数据库中的数据
         await deleteQuestionFromDB(id);
 
         //更新状态，移除已删除的问题
-        const updatedQuestions = questions.filter(q => q.question_id !== id);
+        //console.log("currentTab:", currentTab);
+        //console.log("currentQuestion:", questions);
+        let updatedQuestions = [];
+        if (currentTab === 'Announcement') {
+            updatedQuestions = questions.filter(q => q.announcement_id !== id);
+        } else if (currentTab === 'Assessment') {
+            updatedQuestions = questions.filter(q => q.question_id !== id);
+        }
+        //const updatedQuestions = questions.filter(q => q.question_id !== id);
         setQuestions(updatedQuestions);
       };
 
 
     return (
         <div>
-            {questions.map((question) => (
-                <Card key={question.question_id} style={{ marginBottom: '20px' }}>
-                    <Card.Body>
-                        <Card.Title>{question.question_title}</Card.Title>
-                        <Card.Text>{question.question_detail}</Card.Text>
-                        <Button variant="danger" onClick={() => handleDelete(question.question_id)}>delete</Button>
-                    </Card.Body>
-                </Card>
-            ))}
+            {questions.map((question) => {
+                // 根据 currentTab 决定要使用的属性
+                let idProperty, titleProperty, detailProperty;
+                if (currentTab === 'Announcement') {
+                    idProperty = 'announcement_id';
+                    titleProperty = 'announcement_title';
+                    detailProperty = 'announcement_detail';
+                } else if (currentTab === 'Assessment') {
+                    idProperty = 'question_id';
+                    titleProperty = 'question_title';
+                    detailProperty = 'question_detail';
+                }
+
+                return (
+                    <Card key={question[idProperty]} style={{ marginBottom: '20px' }}>
+                        <Card.Body>
+                            <Card.Title>{question[titleProperty]}</Card.Title>
+                            <Card.Text>{question[detailProperty]}</Card.Text>
+                            <Button variant="danger" onClick={() => handleDelete(question[idProperty])}>delete</Button>
+                        </Card.Body>
+                    </Card>
+                );
+            })}
         </div>
     );
 }

smarthub/src/containers/Message.js

@@ -1,17 +1,32 @@
 import React, { useState, useEffect } from 'react';
-import { Container, Row, Col } from 'react-bootstrap';
+import { Container, Row, Col, Button } from 'react-bootstrap';
 import QuestionList from '../components/QuestionList';
+import '../css/Styles.css';
 
 function Message() {
 
-
+  const [currentTab, setCurrentTab] = useState('Announcement'); // 用来判断切换当前标签
+  const [activeTab, setActiveTab] = useState('Announcement');  // 新状态变量来追踪激活的标签
+
+  const handleTabClick = (tab) => {
+    setActiveTab(tab);
+    setCurrentTab(tab);
+  }
+  const [announcements, setAnnouncements] = useState([
+    // ...你的示例数据
+    { announcement_id: 1, announcement_title: 'announcement 1', announcement_detail: 'Detail for announcement 1' },
+    { announcement_id: 2, announcement_title: 'announcement 2', announcement_detail: 'Detail for announcement 2' },
+    { announcement_id: 3, announcement_title: 'announcement 3', announcement_detail: 'Detail for announcement 3' },
+    { announcement_id: 4, announcement_title: 'announcement 4', announcement_detail: 'Detail for Question 4' },
+  ]);
+
   const [questions, setQuestions] = useState([
     // 示例数据，你可以从API获取真实数据
     { question_id: 1, question_title: 'Question 1', question_detail: 'Detail for Question 1' },
     { question_id: 2, question_title: 'Question 2', question_detail: 'Detail for Question 2' },
     { question_id: 3, question_title: 'Question 3', question_detail: 'Detail for Question 3' },
     { question_id: 4, question_title: 'Question 4', question_detail: 'Detail for Question 4' },
-    // ...其他问题
+
   ]);
 
   // useEffect(() => {
@@ -31,24 +46,37 @@ function Message() {
           {/* 左侧区域 */}
           <Col md={2} className="border-right">
             <div className="py-3">
-              <h5>Announcement</h5>
+              <Button
+                variant="outline-primary"
+                className={`tab-button ${activeTab === 'Announcement' ? 'active' : ''}`}
+                onClick={() => handleTabClick('Announcement')}
+                block  // 使按钮具有块级显示，填满容器宽度
+              >
+                Announcement
+              </Button>
             </div>
             <div className="py-3">
-              <h5>Assessment</h5>
+              <Button
+                variant="outline-primary"
+                className={`tab-button ${activeTab === 'Assessment' ? 'active' : ''}`}
+                onClick={() => handleTabClick('Assessment')}
+                block  // 使按钮具有块级显示，填满容器宽度
+              >
+                 Assessment 
+              </Button>
             </div>
           </Col>
 
           {/* 右侧区域 */}
           <Col md={9}>
             <div className="py-3">
-              <h3>Announcement List</h3>
-              <hr />
-              <QuestionList questions={questions} setQuestions={setQuestions} />
-              <hr />
-              <p>Message 2</p>
-              <hr />
-              <p>Message 3</p>
-              {/* ...更多消息 */}
+              <h3>{currentTab} List</h3>
+
+                <QuestionList 
+                questions={currentTab === 'Announcement' ? announcements : questions} 
+                setQuestions={currentTab === 'Announcement' ? setAnnouncements : setQuestions}
+                currentTab={currentTab} />
+
             </div>
           </Col>
         </Row>

smarthub/src/css/Styles.css

@@ -0,0 +1,12 @@
+/* styles.css */
+
+.tab-button {
+    width: 180px;
+    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
+}
+
+.tab-button.active {
+transform: scale(1.05);  /* 当按钮处于活动状态时，将其放大 */
+background-color: #007bff;  /* 设置背景颜色 */
+color: #fff;  /* 设置文字颜色 */
+}