From 0d2ec3cb2725adcbd236c6f6977c0d8b4a9d19ac Mon Sep 17 00:00:00 2001
From: Andi-IM <andi.irhamm@gmail.com>
Date: Wed, 13 Sep 2023 00:23:54 +0700
Subject: [PATCH] updating layout for suggestions.

retrieve email from functions
---
 .../Suggestion/ModalDetailImgSuggestion.jsx   |  33 +-
 src/helpers/getUserById.js                    |  17 +
 src/page/Suggestion/SuggestionDetail.jsx      | 374 ++++++++----------
 src/page/Suggestion/SuggestionLists.jsx       |   7 -
 4 files changed, 194 insertions(+), 237 deletions(-)
 create mode 100644 src/helpers/getUserById.js

diff --git a/src/components/Suggestion/ModalDetailImgSuggestion.jsx b/src/components/Suggestion/ModalDetailImgSuggestion.jsx
index 83ee8e7..e543cae 100644
--- a/src/components/Suggestion/ModalDetailImgSuggestion.jsx
+++ b/src/components/Suggestion/ModalDetailImgSuggestion.jsx
@@ -1,25 +1,14 @@
-import { Col, Image, Modal, Row } from "antd";
-import DataDetailSuggestion from "./DataDetailSuggestion";
+import {Col, Image, Modal, Row} from "antd";
 
-const ModalDetailImgSuggestion = ({ open, setOpen, objDetailImg }) => {
-  return (
-    <Modal open={open} onCancel={() => setOpen(false)} title="Deskripsi Foto">
-      <Row gutter={16} align="middle">
-        <Col span={12}>
-          <Image />
-        </Col>
-        <Col span={12}>
-          <DataDetailSuggestion
-            label="Description"
-            value={objDetailImg?.description}
-          />
-          <DataDetailSuggestion
-            label="Attribution"
-            value={objDetailImg?.attribution}
-          />
-        </Col>
-      </Row>
-    </Modal>
-  );
+const ModalDetailImgSuggestion = ({open, setOpen, objDetailImg}) => {
+    return (
+        <Modal open={open} onCancel={() => setOpen(false)} title="Deskripsi Foto">
+            <Row gutter={16} align="middle">
+                <Col span={12}>
+                    <Image src={objDetailImg?.url}/>
+                </Col>
+            </Row>
+        </Modal>
+    );
 };
 export default ModalDetailImgSuggestion;
diff --git a/src/helpers/getUserById.js b/src/helpers/getUserById.js
new file mode 100644
index 0000000..ab31d5e
--- /dev/null
+++ b/src/helpers/getUserById.js
@@ -0,0 +1,17 @@
+import {getFunctions, httpsCallable} from "firebase/functions";
+import {message} from "antd";
+
+const getUserById = async (id) => {
+    try {
+        const functions = getFunctions();
+        const request = httpsCallable(functions, 'getUserById');
+        return await request({userId: id});
+    } catch (error) {
+        // Getting the Error details.
+        return message.error({
+            content: `Error! : ${error.message}`
+        })
+    }
+}
+
+export default getUserById;
\ No newline at end of file
diff --git a/src/page/Suggestion/SuggestionDetail.jsx b/src/page/Suggestion/SuggestionDetail.jsx
index 48a0a5d..f7cab8a 100644
--- a/src/page/Suggestion/SuggestionDetail.jsx
+++ b/src/page/Suggestion/SuggestionDetail.jsx
@@ -1,226 +1,184 @@
-import {
-  ArrowLeftOutlined,
-  CloseCircleOutlined,
-} from "@ant-design/icons/lib/icons";
-import {
-  Badge,
-  Button,
-  Col,
-  Form,
-  Image,
-  Modal,
-  Row,
-  Space,
-  Spin,
-  Tooltip,
-  Typography,
-} from "antd";
-import { Fragment, useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import {ArrowLeftOutlined, CloseCircleOutlined,} from "@ant-design/icons/lib/icons";
+import {Badge, Button, Col, Form, Image, Modal, Row, Space, Spin, Tooltip, Typography,} from "antd";
+import {Fragment, useEffect, useState} from "react";
+import {useNavigate, useParams} from "react-router-dom";
 import DataDetailSuggestion from "../../components/Suggestion/DataDetailSuggestion";
 import ModalDetailImgSuggestion from "../../components/Suggestion/ModalDetailImgSuggestion";
 import getDocPS from "../../helpers/getDocPS";
+import getUserById from "../../helpers/getUserById.js";
 
-const SuggestionDetail = ({ type }) => {
-  const [FormInstance] = Form.useForm();
-  const { id } = useParams();
-  const navigate = useNavigate();
+const SuggestionDetail = ({type}) => {
+    const [FormInstance] = Form.useForm();
+    const {id} = useParams();
+    const navigate = useNavigate();
 
-  const [imageData, setImageData] = useState([]);
-  const [openModalImg, setOpenModalImg] = useState(false);
-  const [objDetailImg, setObjDetailImg] = useState({
-    url: "",
-    desc: "",
-    attribution: "",
-  });
-  const [loading, setLoading] = useState(false);
+    const [imageData, setImageData] = useState([]);
+    const [userData, setUserData] = useState(null)
+    const [openModalImg, setOpenModalImg] = useState(false);
+    const [objDetailImg, setObjDetailImg] = useState({
+        url: "",
+        desc: "",
+        attribution: "",
+    });
+    const [loading, setLoading] = useState(false);
 
-  const [objDetailSuggest, setObjDetailSuggest] = useState({});
+    const [objDetailSuggest, setObjDetailSuggest] = useState({});
 
-  const deleteImgHandler = (id) => {
-    Modal.confirm({
-      content: "Apakah yakin untuk hapus ?",
-      onOk: () => {
-        setImageData(imageData?.filter((data) => data?.id !== id));
-      },
-      okText: "Hapus",
-      okButtonProps: {
-        danger: true,
-      },
-    });
-  };
+    const deleteImgHandler = (id) => {
+        Modal.confirm({
+            content: "Apakah yakin untuk hapus ?",
+            onOk: () => {
+                setImageData(imageData?.filter((data) => data?.id !== id));
+            },
+            okText: "Hapus",
+            okButtonProps: {
+                danger: true,
+            },
+        });
+    };
 
-  const getDetailSuggestions = () => {
-    setLoading(true);
-    getDocPS({
-      collectionName: "suggestions",
-      id,
-    })
-      ?.then((objData) => {
-        setObjDetailSuggest(objData);
-        setImageData(objData?.images);
-      })
-      ?.finally(() => {
-        setLoading(false);
-      });
-  };
+    const getDetailSuggestions = () => {
+        setLoading(true);
+        getDocPS({
+            collectionName: "suggestions",
+            id,
+        })
+            ?.then((objData) => {
+                setObjDetailSuggest(objData);
+                getUser(objData?.userId)
+                setImageData(objData?.images);
+            })
+            ?.finally(() => {
+                setLoading(false);
+            });
+    };
 
-  useEffect(() => {
-    getDetailSuggestions();
-  }, []);
+    const getUser = (id) => {
+        if (id !== null) {
+            getUserById(id)
+                .then(result => {
+                    setUserData(result)
+                });
+        }
+    }
 
-  return (
-    <Spin spinning={loading}>
-      <div style={{ background: "white", padding: 20, borderRadius: 10 }}>
-        <Row align="middle">
-          <Col span={2}>
-            <Button
-              shape="circle"
-              icon={<ArrowLeftOutlined />}
-              onClick={() => {
-                navigate("/suggestion_lists");
-              }}
-            />
-          </Col>
+    useEffect(() => {
+        getDetailSuggestions();
+    }, []);
 
-          <Col span={22}>
-            <Typography.Title>Detail Suggestion</Typography.Title>
-          </Col>
-        </Row>
+    return (
+        <Spin spinning={loading}>
+            <div style={{background: "white", padding: 20, borderRadius: 10}}>
+                <Row align="middle">
+                    <Col span={2}>
+                        <Button
+                            shape="circle"
+                            icon={<ArrowLeftOutlined/>}
+                            onClick={() => {
+                                navigate("/suggestion_lists");
+                            }}
+                        />
+                    </Col>
 
-        <Form
-          initialValues={{
-            ...(type === "add" && {
-              common_name: [""],
-            }),
-          }}
-          form={FormInstance}
-        >
-          <Row gutter={[16, 16]}>
-            <Col span={12}>
-              <DataDetailSuggestion
-                label="Plant Name"
-                value={objDetailSuggest?.name || "-"}
-              />
-              <DataDetailSuggestion
-                label="Species"
-                value={objDetailSuggest?.species || "-"}
-              />
-              <DataDetailSuggestion
-                label="Other Name"
-                render={() => {
-                  if (objDetailSuggest?.common_name?.length) {
-                    return (
-                      <ul>
-                        {objDetailSuggest?.common_name?.map((cmnName, key) => (
-                          <li key={key}>{cmnName?.name}</li>
-                        ))}
-                      </ul>
-                    );
-                  }
-                  return <Typography.Text>No Other Name</Typography.Text>;
-                }}
-              />
-              <DataDetailSuggestion
-                label="Description"
-                value={objDetailSuggest?.description}
-              />
-            </Col>
-            <Col span={12}>
-              <DataDetailSuggestion
-                label="Genus"
-                value={objDetailSuggest?.taxonomy?.genus || "-"}
-              />
-              <DataDetailSuggestion
-                label="Class"
-                value={objDetailSuggest?.taxonomy?.class || "-"}
-              />
-              <DataDetailSuggestion
-                label="Family"
-                value={objDetailSuggest?.taxonomy?.family || "-"}
-              />
-              <DataDetailSuggestion
-                label="Order"
-                value={objDetailSuggest?.taxonomy?.order || "-"}
-              />
-              <DataDetailSuggestion
-                label="Phylum"
-                value={objDetailSuggest?.taxonomy?.phylum || "-"}
-              />
-            </Col>
-          </Row>
+                    <Col span={22}>
+                        <Typography.Title>Detail Suggestion</Typography.Title>
+                    </Col>
+                </Row>
 
-          <Row>
-            <Col span={24}>
-              <Space size="large" wrap>
-                <DataDetailSuggestion
-                  label="Images"
-                  render={() => {
-                    if (imageData?.length) {
-                      return (
-                        <>
-                          {imageData?.map((dataPreview, idx) => (
-                            <Tooltip
-                              title={dataPreview?.desc || "Tidak ada informasi"}
-                              key={idx}
-                            >
-                              <Badge
-                                count={
-                                  <Button
-                                    icon={
-                                      <CloseCircleOutlined
-                                        style={{
-                                          cursor: "pointer",
-                                          fontSize: 28,
-                                        }}
-                                      />
-                                    }
-                                    shape="circle"
-                                    danger
-                                    onClick={() =>
-                                      deleteImgHandler(dataPreview?.id)
-                                    }
-                                    style={{
-                                      background: "transparent",
-                                      border: 0,
+                <Form
+                    initialValues={{
+                        ...(type === "add" && {
+                            common_name: [""],
+                        }),
+                    }}
+                    form={FormInstance}
+                >
+                    <Row gutter={[16, 16]}>
+                        <Col span={12}>
+                            <DataDetailSuggestion
+                                label="User"
+                                value={objDetailSuggest?.userId || "-"}
+                            />
+                            <DataDetailSuggestion
+                                label="email"
+                                value={userData?.data.email || "-"}
+                            />
+                            <DataDetailSuggestion
+                                label="Description"
+                                value={objDetailSuggest?.description || "-"}
+                            />
+                        </Col>
+                    </Row>
+
+                    <Row>
+                        <Col span={24}>
+                            <Space size="large" wrap>
+                                <DataDetailSuggestion
+                                    label="Images"
+                                    render={() => {
+                                        if (imageData?.length) {
+                                            return (
+                                                <>
+                                                    {imageData?.map((dataPreview, idx) => (
+                                                        <Tooltip
+                                                            title={dataPreview?.desc || "Tidak ada informasi"}
+                                                            key={idx}>
+                                                            <Badge
+                                                                count={
+                                                                    <Button
+                                                                        icon={
+                                                                            <CloseCircleOutlined
+                                                                                style={{
+                                                                                    cursor: "pointer",
+                                                                                    fontSize: 28,
+                                                                                }}
+                                                                            />
+                                                                        }
+                                                                        shape="circle"
+                                                                        danger
+                                                                        onClick={() =>
+                                                                            deleteImgHandler(dataPreview?.id)
+                                                                        }
+                                                                        style={{
+                                                                            background: "transparent",
+                                                                            border: 0,
+                                                                        }}
+                                                                    />
+                                                                }>
+                                                                <Image
+                                                                    style={{cursor: "pointer"}}
+                                                                    src={dataPreview?.url}
+                                                                    width={100}
+                                                                    height={100}
+                                                                    preview={false}
+                                                                    onClick={() => {
+                                                                        setObjDetailImg({
+                                                                            ...dataPreview,
+                                                                        });
+                                                                        setOpenModalImg(true);
+                                                                    }}
+                                                                />
+                                                            </Badge>
+                                                        </Tooltip>
+                                                    ))}
+                                                </>
+                                            );
+                                        }
+                                        return <Typography.Text>No Images</Typography.Text>;
                                     }}
-                                  />
-                                }
-                              >
-                                <Image
-                                  style={{ cursor: "pointer" }}
-                                  src={dataPreview?.url}
-                                  width={100}
-                                  height={100}
-                                  preview={false}
-                                  onClick={() => {
-                                    setObjDetailImg({
-                                      ...dataPreview,
-                                    });
-                                    setOpenModalImg(true);
-                                  }}
                                 />
-                              </Badge>
-                            </Tooltip>
-                          ))}
-                        </>
-                      );
-                    }
-                    return <Typography.Text>No Images</Typography.Text>;
-                  }}
-                />
-              </Space>
-            </Col>
-          </Row>
-        </Form>
-      </div>
+                            </Space>
+                        </Col>
+                    </Row>
+                </Form>
+            </div>
 
-      <ModalDetailImgSuggestion
-        open={openModalImg}
-        setOpen={setOpenModalImg}
-        objDetailImg={objDetailImg}
-      />
-    </Spin>
-  );
+            <ModalDetailImgSuggestion
+                open={openModalImg}
+                setOpen={setOpenModalImg}
+                objDetailImg={objDetailImg}
+            />
+        </Spin>
+    );
 };
 export default SuggestionDetail;
diff --git a/src/page/Suggestion/SuggestionLists.jsx b/src/page/Suggestion/SuggestionLists.jsx
index ac5f27f..99bc69e 100644
--- a/src/page/Suggestion/SuggestionLists.jsx
+++ b/src/page/Suggestion/SuggestionLists.jsx
@@ -5,7 +5,6 @@ import {
   Typography,
   Table,
   Spin,
-  Image,
   Modal,
   message,
 } from "antd";
@@ -72,12 +71,6 @@ const SuggestionLists = () => {
         <Col span={24}>
           <Spin spinning={loading}>
             <Table dataSource={arrDatas} tableLayout="fixed">
-              <Column
-                title="Thumbnail"
-                render={(record) => {
-                  return <Image src={record?.images?.[0]?.url} width={150} />;
-                }}
-              />
               <Column dataIndex="id" title="id" />
               <Column dataIndex="description" title="Description" />
               <Column