refactor: Feedback Detail

src/views/feedback/CustomerDetail.jsx

@@ -22,9 +22,9 @@ function Detail() {
   const [feedbackInfo, setFeedbackInfo] = useState({});
 
   useEffect(() => {
-    console.info('Detail.useEffect: ' + GRI_SN);
+    // console.info('Detail.useEffect: ' + GRI_SN);
     getFeedbackDetail(travelAgencyId, GRI_SN).then((res) => {
-      setFeedbackRate(res.feedbackRate);
+      // setFeedbackRate(res.feedbackRate);
       setFeedbackReview(res.feedbackReview);
     });
     getCustomerFeedbackDetail(travelAgencyId, GRI_SN, CII_SN).then((res) => setFeedbackRate(res));

src/views/feedback/Detail.jsx

@@ -1,29 +1,37 @@
 import { useParams, useNavigate } from "react-router-dom";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
-import { observer } from "mobx-react";
-import { toJS, runInAction } from "mobx";
 import { Row, Col, Space, Button, Divider, Form, Typography, Rate, Radio, Upload, Input, App, Card } from "antd";
-import { useStore } from "../../stores/StoreContext.js";
 import { PlusOutlined } from "@ant-design/icons";
-const { Title, Text, Paragraph } = Typography;
 import * as config from "@/config";
+import useAuthStore from '@/stores/Auth';
+import { getFeedbackDetail, getFeedbackImages, getFeedbackInfo, removeFeedbackImages, postFeedbackInfo } from '@/stores/Feedback';
+const { Title, Text, Paragraph } = Typography;
 
 function Detail() {
 	const navigate = useNavigate();
 	const { GRI_SN,RefNo } = useParams();
-	const { feedbackStore, authStore } = useStore();
+  const [travelAgencyId, token] = useAuthStore((state) => [state.loginUser.travelAgencyId, state.loginUser.token]);
-	const { feedbackRate, feedbackReview, feedbackImages, feedbackInfo } = feedbackStore;
 	const desc = ["none", "Unacceptable", "Poor", "Fair", "Very Good", "Excellent"];
 	const { notification } = App.useApp();
 	const [form] = Form.useForm();
 
+  const [feedbackRate, setFeedbackRate] = useState({});
+  const [feedbackReview, setFeedbackReview] = useState({});
+  const [feedbackImages, setFeedbackImages] = useState([]);
+  const [feedbackInfo, setFeedbackInfo] = useState({});
+
 	useEffect(() => {
-		console.info("Detail.useEffect: " + GRI_SN);
+		// console.info("Detail.useEffect: " + GRI_SN);
-		feedbackStore.getFeedbackDetail(authStore.login.travelAgencyId, GRI_SN);
+    getFeedbackDetail(travelAgencyId, GRI_SN).then((res) => {
-		feedbackStore.getFeedbackImages(authStore.login.travelAgencyId, GRI_SN);
+      setFeedbackRate(res.feedbackRate);
-		feedbackStore.getFeedbackInfo(authStore.login.travelAgencyId, GRI_SN).then(v => {
+      setFeedbackReview(res.feedbackReview);
-			form.setFieldsValue({ info_content: v.EEF_Content });
+    });
-		});
+    getFeedbackImages(travelAgencyId, GRI_SN).then((res) => setFeedbackImages(res));
+    getFeedbackInfo(travelAgencyId, GRI_SN).then((v) => {
+      form.setFieldsValue({ info_content: v.EEF_Content });
+      setFeedbackInfo(v);
+    });
+
 	}, [GRI_SN]);
 
 	const HWO_Guide = feedbackRate && feedbackRate.HWO_Guide ? feedbackRate.HWO_Guide : 0;
@@ -34,10 +42,10 @@ function Detail() {
 	const OtherThoughts = feedbackRate && feedbackRate.OtherThoughts ? feedbackRate.OtherThoughts : "";
 	const PhotoPermission = feedbackRate && feedbackRate.PhotoPermission && feedbackRate.PhotoPermission == "YES" ? true : false;
 	const ECI_Content = feedbackReview && feedbackReview.ECI_Content ? feedbackReview.ECI_Content : "None";
-	const fileList = toJS(feedbackImages);
+	const fileList = (feedbackImages);
 
 	const handleChange = info => {
-		console.log(info);
+		// console.log(info);
 		let newFileList = [...info.fileList];
 		newFileList = newFileList.map(file => {
 			if (file.response && file.response.result) {
@@ -45,19 +53,17 @@ function Detail() {
 			}
 			return file;
 		});
-		runInAction(() => {
+    setFeedbackImages(newFileList);
-			feedbackStore.feedbackImages = newFileList;
-		});
 	};
 
 	const handRemove = info => {
-		return feedbackStore.removeFeedbackImages(info.url);
+		return removeFeedbackImages(info.url);
 	};
 
 	const onFinish = values => {
-		console.log("Success:", values);
+		// console.log("Success:", values);
 		if (values) {
-			feedbackStore.postFeedbackInfo(feedbackInfo.EEF_VEI_SN, feedbackInfo.EEF_GRI_SN, feedbackInfo.EEF_EOI_SN, values.info_content).then(() => {
+			postFeedbackInfo(feedbackInfo.EEF_VEI_SN, feedbackInfo.EEF_GRI_SN, feedbackInfo.EEF_EOI_SN, values.info_content).then(() => {
 				notification.success({
 					message: `Notification`,
 					description: "Submit Successful",
@@ -72,7 +78,7 @@ function Detail() {
 		<Space direction="vertical" style={{ width: "100%" }}>
 			<Row gutter={16}>
 				<Col span={20}>
-					
+
 				</Col>
 				<Col span={4}>
 					<Button type="link" onClick={() => navigate("/feedback")}>
@@ -161,7 +167,7 @@ function Detail() {
 									name="ghhfile"
 									// accept="image/*"
 									multiple={true}
-									action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GRI_SN}&VEI_SN=${authStore.login.travelAgencyId}&token=${authStore.login.token}`}
+									action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GRI_SN}&VEI_SN=${travelAgencyId}&token=${token}`}
 									fileList={fileList}
 									listType="picture-card"
 									onChange={handleChange}
@@ -196,4 +202,4 @@ function Detail() {
 	);
 }
 
-export default observer(Detail);
+export default (Detail);