Report package UI (#66)

* feat: added the UI for report form

* feat: connected ui to the report package api

* fix: show correct responses from the server

* refactor: post malicous api and remove stale conditions

backend/packages.py

@@ -957,26 +957,6 @@ def post_malicious(namespace, package):
         }
         return jsonify({"message": error_message}), 404
 
-    if user["_id"] in package_doc["malicious_report"]["users"] and package_doc["malicious_report"][
-        "users"
-    ][user["_id"]]['reason'] == str(reason):
-        return jsonify({"message": "Malicious Report Submitted Successfully", "code": 200}), 200
-
-    if user["_id"] in package_doc["malicious_report"]["users"] and package_doc["malicious_report"][
-        "users"
-    ][user["_id"]]['reason'] != str(reason):
-        package_version_doc = db.packages.update_one(
-            {"name": package, "namespace": namespace_doc["_id"]},
-            {
-                "$set": {
-                    f"malicious_report.users.{user['_id']}": { 'reason': str(reason), 'isViewed': False },
-                    "malicious_report.isViewed": False,
-
-                },
-            },
-        )
-        return jsonify({"message": "Malicious Report Updated Successfully", "code": 200}), 200
-
     package_version_doc = db.packages.update_one(
         {"name": package, "namespace": namespace_doc["_id"]},
         {

frontend/src/pages/package.js

@@ -22,6 +22,8 @@ import {
   verifyUserRole,
 } from "../store/actions/packageActions";
 import ShowUserListDialog from "./showUserListDialog";
+import ReportPackageForm from "./reportPackageForm";
+import { Button } from "react-bootstrap";
 
 const PackagePage = () => {
   const [iconsActive, setIconsActive] = useState("readme");
@@ -33,6 +35,7 @@ const PackagePage = () => {
   const navigate = useNavigate();
   const [togglePackageMaintainersDialog, settogglePackageMaintainersDialog] =
     useState(false);
+  const [showReportForm, setShowReportForm] = useState(false);
 
   const handleIconsClick = (value) => {
     if (value === iconsActive) {
@@ -111,7 +114,7 @@ const PackagePage = () => {
             <MDBRow>
               <MDBCol size="9">{data.description}</MDBCol>
 
-              {sideBar(data)}
+              {sideBar(data, setShowReportForm)}
             </MDBRow>
           </MDBContainer>
         </MDBTabsPane>
@@ -177,6 +180,12 @@ const PackagePage = () => {
           </MDBContainer>
         </MDBTabsPane>
       </MDBTabsContent>
+      <ReportPackageForm
+        namespace={namespace_name}
+        package={package_name}
+        show={showReportForm}
+        onHide={() => setShowReportForm(false)}
+      />
     </Container>
   ) : (
     <Container style={{ margin: "200px" }}>
@@ -226,7 +235,7 @@ const ViewPackageMaintainersButton = ({
   );
 };
 
-const sideBar = (data) => {
+const sideBar = (data, setShowReportForm) => {
   return (
     <MDBCol size="3">
       <p style={{ fontSize: 16, textAlign: "left" }}>Install</p>
@@ -248,6 +257,13 @@ const sideBar = (data) => {
       <p style={{ fontSize: 16, textAlign: "left" }}>Last publish</p>
       {updatedDays(data.updated_at)} days ago
       <hr></hr>
+      <Button
+        variant="danger"
+        style={{ margin: 0 }}
+        onClick={() => setShowReportForm(true)}
+      >
+        Report
+      </Button>
     </MDBCol>
   );
 };

frontend/src/pages/reportPackageForm.js

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from "react";
+import { Form, Button, Modal, Spinner } from "react-bootstrap";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  reportPackage,
+  resetErrorMessage,
+} from "../store/actions/reportPackageActions";
+import { toast, ToastContainer } from "react-toastify";
+import { reset } from "../store/actions/accountActions";
+
+const ReportPackageForm = (props) => {
+  const dispatch = useDispatch();
+  const [reason, setReason] = useState("");
+  const accessToken = useSelector((state) => state.auth.accessToken);
+  const isLoading = useSelector((state) => state.reportPackage.isLoading);
+  const statusCode = useSelector((state) => state.reportPackage.statuscode);
+  const message = useSelector((state) => state.reportPackage.message);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    dispatch(
+      reportPackage(
+        { reason: reason, namespace: props.namespace, package: props.package },
+        accessToken
+      )
+    );
+  };
+
+  useEffect(() => {
+    console.log("Inside use effect");
+    if (statusCode === 200) {
+      toast.success(message);
+    } else {
+      toast.error(message);
+    }
+
+    dispatch(resetErrorMessage());
+  }, [statusCode]);
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <Modal {...props} size="lg">
+        <Modal.Header closeButton>
+          <Modal.Title>Report Package</Modal.Title>
+        </Modal.Header>
+        <ToastContainer
+          position="top-center"
+          autoClose={5000}
+          hideProgressBar={false}
+          newestOnTop={false}
+          closeOnClick
+          rtl={false}
+          pauseOnFocusLoss
+          pauseOnHover
+          theme="light"
+        />
+        <Modal.Body>
+          <Form.Group
+            className="mb-3"
+            controlId="formReportPackage"
+            id="namespace-description-textfield"
+          >
+            <Form.Label>Reason for reporting package</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder="Describe the reason for reporting the package"
+              as="textarea"
+              name="report_description"
+              value={reason}
+              onChange={(e) => setReason(e.target.value)}
+            />
+            <Form.Text className="text-muted">
+              Write a brief description of the reason for reporting the package.
+            </Form.Text>
+          </Form.Group>
+        </Modal.Body>
+        <Modal.Footer>
+          {!isLoading ? (
+            <Button variant="primary" type="submit" onClick={handleSubmit}>
+              Submit
+            </Button>
+          ) : (
+            <div style={{ margin: 0 }}>
+              <Spinner
+                className="spinner-border m-3"
+                animation="border"
+                role="status"
+              >
+                <span className="visually-hidden">Loading...</span>
+              </Spinner>
+            </div>
+          )}
+        </Modal.Footer>
+      </Modal>
+    </Form>
+  );
+};
+
+export default ReportPackageForm;

frontend/src/store/actions/reportPackageActions.js

@@ -0,0 +1,52 @@
+import axios from "axios";
+
+export const REPORT_PACKAGE_REQUEST = "REPORT_PACKAGE_REQUEST";
+export const REPORT_PACKAGE_SUCCESS = "REPORT_PACKAGE_SUCCESS";
+export const REPORT_PACKAGE_FAILURE = "REPORT_PACKAGE_FAILURE";
+
+export const RESET_ERROR_MESSAGE = "RESET_ERROR_MESSAGE";
+
+export const reportPackage = (data, access_token) => async (dispatch) => {
+  let formData = new FormData();
+  formData.append("reason", data.reason);
+
+  let package_name = data.package;
+  let namespace_name = data.namespace;
+
+  try {
+    dispatch({
+      type: REPORT_PACKAGE_REQUEST,
+    });
+
+    const result = await axios({
+      method: "post",
+      url: `${process.env.REACT_APP_REGISTRY_API_URL}/report/${namespace_name}/${package_name}`,
+      data: formData,
+      headers: {
+        Authorization: `Bearer ${access_token}`,
+      },
+    });
+
+    dispatch({
+      type: REPORT_PACKAGE_SUCCESS,
+      payload: {
+        message: result.data.message,
+        statuscode: result.data.code,
+      },
+    });
+  } catch (error) {
+    dispatch({
+      type: REPORT_PACKAGE_FAILURE,
+      payload: {
+        message: error.response.data.message,
+        statuscode: error.response.data.code,
+      },
+    });
+  }
+};
+
+export const resetErrorMessage = () => (dispatch) => {
+  dispatch({
+    type: RESET_ERROR_MESSAGE,
+  });
+};

frontend/src/store/reducers/reportPackageReducer.js

@@ -0,0 +1,48 @@
+import {
+  REPORT_PACKAGE_REQUEST,
+  REPORT_PACKAGE_SUCCESS,
+  REPORT_PACKAGE_FAILURE,
+  RESET_ERROR_MESSAGE,
+} from "../actions/reportPackageActions";
+
+const initialState = {
+  isLoading: false,
+  error: null,
+  message: null,
+  statuscode: 0,
+};
+
+const reportPackageReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case REPORT_PACKAGE_REQUEST:
+      return {
+        ...state,
+        isLoading: true,
+      };
+    case REPORT_PACKAGE_SUCCESS:
+      return {
+        ...state,
+        isLoading: false,
+        message: action.payload.message,
+        statuscode: action.payload.statuscode,
+      };
+    case REPORT_PACKAGE_FAILURE:
+      return {
+        ...state,
+        isLoading: false,
+        message: action.payload.message,
+        statuscode: action.payload.statuscode,
+      };
+    case RESET_ERROR_MESSAGE:
+      return {
+        ...state,
+        error: null,
+        message: null,
+        statuscode: 0,
+      };
+    default:
+      return state;
+  }
+};
+
+export default reportPackageReducer;

frontend/src/store/reducers/rootReducer.js

@@ -17,6 +17,7 @@ import addRemoveNamespaceMaintainerReducer from "./namespaceMaintainersReducer";
 import addRemoveNamespaceAdminReducer from "./namespaceAdminReducer";
 import verifyEmailReducer from "./verifyEmailReducer";
 import userListReducer from "./userListReducer";
+import reportPackageReducer from "./reportPackageReducer";
 
 const rootReducer = combineReducers({
   auth: authReducer,
@@ -37,6 +38,7 @@ const rootReducer = combineReducers({
   verifyEmail: verifyEmailReducer,
   userList: userListReducer,
   archives: archivesReducer,
+  reportPackage: reportPackageReducer,
 });
 
 export default rootReducer;