feat: added ui + state for viewing malicious reports

Author: arteevraina

frontend/src/pages/viewMalicousReports.js

@@ -0,0 +1,60 @@
+import { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Card, Container, Modal, Spinner } from "react-bootstrap";
+import {
+  fetchMalicousReports,
+  resetData,
+} from "../store/actions/viewMalicousReportActions";
+
+const ViewMalicousReports = (props) => {
+  const accessToken = useSelector((state) => state.auth.accessToken);
+  const reports = useSelector((state) => state.malicousReport.reports);
+  const loading = useSelector((state) => state.malicousReport.isLoading);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (!props.show) {
+      return;
+    }
+
+    dispatch(fetchMalicousReports(accessToken));
+  }, [props.show]);
+
+  const onExit = () => {
+    dispatch(resetData());
+  };
+
+  return (
+    <Modal show={props.show} onHide={props.onHide} onExit={onExit}>
+      <Modal.Header closeButton>
+        <Modal.Title>View Malicious Reports</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        {loading && (
+          <div className="d-flex justify-content-center">
+            <Spinner
+              animation="border"
+              role="status"
+              style={{ alignItems: "center" }}
+            >
+              <span className="visually-hidden">Loading...</span>
+            </Spinner>
+          </div>
+        )}
+        {reports.map((report, index) => {
+          return (
+            <Card key={index}>
+              <Card.Body>
+                <h5>Namespace - {report.namespace}</h5>
+                <h6>Package - {report.package}</h6>
+                <p style={{ textAlign: "left" }}>{report.reason}</p>
+              </Card.Body>
+            </Card>
+          );
+        })}
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default ViewMalicousReports;

frontend/src/store/actions/viewMalicousReportActions.js

@@ -0,0 +1,43 @@
+import axios from "axios";
+
+export const FETCH_MALICIOUS_REPORTS = "FETCH_MALICIOUS_REPORTS";
+export const FETCH_MALICIOUS_REPORTS_SUCCESS =
+  "FETCH_MALICIOUS_REPORTS_SUCCESS";
+export const FETCH_MALICIOUS_REPORTS_ERROR = "FETCH_MALICIOUS_REPORTS_ERROR";
+export const RESET_DATA = "RESET_DATA";
+
+export const fetchMalicousReports = (accessToken) => {
+  return async (dispatch) => {
+    dispatch({ type: FETCH_MALICIOUS_REPORTS });
+    try {
+      const result = await axios({
+        method: "get",
+        url: `${process.env.REACT_APP_REGISTRY_API_URL}/report/view`,
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      });
+
+      dispatch({
+        type: FETCH_MALICIOUS_REPORTS_SUCCESS,
+        payload: {
+          reports: result.data.reports,
+        },
+      });
+    } catch (error) {
+      dispatch({
+        type: FETCH_MALICIOUS_REPORTS_ERROR,
+        payload: {
+          statuscode: error.response.data.code,
+          message: error.response.data.message,
+        },
+      });
+    }
+  };
+};
+
+export const resetData = () => (dispatch) => {
+  dispatch({
+    type: RESET_DATA,
+  });
+};

frontend/src/store/reducers/rootReducer.js

@@ -18,6 +18,7 @@ import addRemoveNamespaceAdminReducer from "./namespaceAdminReducer";
 import verifyEmailReducer from "./verifyEmailReducer";
 import userListReducer from "./userListReducer";
 import reportPackageReducer from "./reportPackageReducer";
+import viewMalicousReportsReducer from "./viewMalicousReportsReducer";
 
 const rootReducer = combineReducers({
   auth: authReducer,
@@ -39,6 +40,7 @@ const rootReducer = combineReducers({
   userList: userListReducer,
   archives: archivesReducer,
   reportPackage: reportPackageReducer,
+  malicousReport: viewMalicousReportsReducer,
 });
 
 export default rootReducer;

frontend/src/store/reducers/viewMalicousReportsReducer.js

@@ -0,0 +1,46 @@
+import {
+  FETCH_MALICIOUS_REPORTS,
+  FETCH_MALICIOUS_REPORTS_SUCCESS,
+  FETCH_MALICIOUS_REPORTS_ERROR,
+  RESET_DATA,
+} from "../actions/viewMalicousReportActions";
+
+const initialState = {
+  reports: [],
+  isLoading: false,
+  error: null,
+};
+
+const viewMalicousReportsReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case FETCH_MALICIOUS_REPORTS:
+      return {
+        ...state,
+        isLoading: true,
+        error: null,
+      };
+    case FETCH_MALICIOUS_REPORTS_SUCCESS:
+      return {
+        ...state,
+        reports: action.payload.reports,
+        isLoading: false,
+        error: null,
+      };
+    case FETCH_MALICIOUS_REPORTS_ERROR:
+      return {
+        ...state,
+        isLoading: false,
+        error: action.payload.message,
+      };
+    case RESET_DATA:
+      return {
+        reports: [],
+        isLoading: false,
+        error: null,
+      };
+    default:
+      return state;
+  }
+};
+
+export default viewMalicousReportsReducer;