add questionList component, update message UI

README.md

@@ -1,7 +1,7 @@
 This is new react app for ELEC5620 group project SmartHub
 
 # install releated react library
-npm install react-router-dom react-bootstrap bootstrap
+### npm install react-router-dom react-bootstrap bootstrap
 
 # Getting Started with Create React App
 

smarthub/src/components/QuestionList.js

@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from 'react';
+import { Card, Button } from 'react-bootstrap';
+
+// 假设的API方法，用于从数据库删除特定ID的题目
+const deleteQuestionFromDB = async (id) => {
+  // 在这里你可以调用API来从数据库删除题目
+  console.log(`Deleted question with ID: ${id}`);
+};
+
+function QuestionList({ questions, setQuestions }) { // 通过结构赋值来接受questions prop
+
+    const handleDelete = async (id) => {
+        // 删除数据库中的数据
+        await deleteQuestionFromDB(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>
+            ))}
+        </div>
+    );
+}
+
+
+export default QuestionList;

smarthub/src/containers/Message.js

@@ -1,7 +1,29 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Container, Row, Col } from 'react-bootstrap';
+import QuestionList from '../components/QuestionList';
 
 function Message() {
+
+
+  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(() => {
+  //     // 假设fetchQuestions是一个异步方法，从数据库获取问题列表
+  //     async function fetchQuestions() {
+  //         const data = await yourAPI.getQuestions(); // 替换为你实际的API调用
+  //         setQuestions(data);
+  //     }
+
+  //     fetchQuestions();
+  // }, []);
+
   return (
     <div>
       <Container fluid>
@@ -21,7 +43,7 @@ function Message() {
             <div className="py-3">
               <h3>Announcement List</h3>
               <hr />
-              <p>Message 1</p>
+              <QuestionList questions={questions} setQuestions={setQuestions} />
               <hr />
               <p>Message 2</p>
               <hr />