Merge pull request #94 from ligangty/2.0-refactor

Let RemoteList support packageType re-rendering on route change

src/main/webui/src/app/components/content/remote/RemoteList.jsx

@@ -15,17 +15,20 @@
  */
 
 import React, {useEffect, useState} from 'react';
+import {useParams} from 'react-router';
+import {PropTypes} from 'prop-types';
 import {ListJsonDebugger} from '../common/Debugger.jsx';
 import ListControl from "../common/ListControl.jsx";
 import {remoteOptionLegend as options, STORE_API_BASE_URL} from "../../ComponentConstants.js";
 import {StoreListingWidget} from '../common/StoreListingWidget.jsx';
 import {Utils} from '#utils/AppUtils.js';
 import {jsonRest} from '#utils/RestClient.js';
 
-const init = (state, setState) => {
+
+const init = (packageType, setState) => {
   useEffect(()=>{
     const fetchdData = async ()=>{
-      const response = await jsonRest.get(`${STORE_API_BASE_URL}/_all/remote`);
+      const response = await jsonRest.get(`${STORE_API_BASE_URL}/${packageType}/remote`);
       if (response.ok){
         const timeoutResponse = await jsonRest.get('/api/admin/schedule/store/all/disable-timeout');
         let disabledMap = {};
@@ -40,7 +43,6 @@ const init = (state, setState) => {
         const data = await response.json();
         setState({
           listing: data.items,
-          rawListing: data.items,
           disabledMap
         });
       }else{
@@ -52,13 +54,10 @@ const init = (state, setState) => {
       }
     };
     fetchdData();
-  }, []);
+  }, [packageType]);
 };
 
 const handlers = {
-  createNew: () => {
-    // mock
-  },
   handleDebug: (event, setState) => {
     setState({
       enableDebug: event.target.checked
@@ -72,24 +71,23 @@ const handlers = {
 };
 
 export default function RemoteList() {
+  const {packageType} = useParams();
   const [state, setState] = useState({
     listing: [],
-    rawListing: [],
     disabledMap: {},
     enableDebug: false,
     message: ''
   });
 
-  init(state, setState);
-  // Utils.logMessage(state);
+  init(packageType,setState);
   const listing = state.listing;
   const disMap = state.disabledMap;
   return (
     <div className="container-fluid">
       <ListControl
         type="remote"
         legends={options}
-        handleSearch={event => handlers.handleSearch(event, state.rawListing, setState)}
+        handleSearch={event => handlers.handleSearch(event, state.listing, setState)}
         handleDebug={event => handlers.handleDebug(event, setState)}
       />
       {

src/main/webui/src/server/app.js

@@ -36,19 +36,18 @@ app.get('/api/stats/version-info', (req, res) => {
     });
 });
 
-app.get(`${STORE_API_BASE}/_all/remote`, (req, res) => {
-  const remoteList = require('./mock/list/FakeRemoteList.json');
-  res.status(200).json(remoteList);
-});
-
-app.get(`${STORE_API_BASE}/_all/hosted`, (req, res) => {
-  const hostedList = require('./mock/list/FakeHostedList.json');
-  res.status(200).json(hostedList);
-});
-
-app.get(`${STORE_API_BASE}/_all/group`, (req, res) => {
-  const groupList = require('./mock/list/FakeGroupList.json');
-  res.status(200).json(groupList);
+// For store listing
+app.get(`${STORE_API_BASE}/:packageType/:type`, (req, res) => {
+  const [pkgType, type] = [req.params.packageType, req.params.type];
+  const pkgToFileMapping = {"maven": "Maven", "npm": "NPM"};
+  const typeToFileMapping = {"remote": "Remote", "hosted": "Hosted", "group": "Group"};
+  let list = [];
+  if(pkgType==="_all"){
+    // TODO: do all packageType for type handling here
+  }
+  const mockFile = `./mock/list/Fake${pkgToFileMapping[pkgType]}${typeToFileMapping[type]}List.json`;
+  list = require(mockFile);
+  res.status(200).json(list);
 });
 
 app.get('/api/admin/schedule/store/all/disable-timeout', (req, res) => {
@@ -72,7 +71,7 @@ app.get('/api/admin/schedule/store/:packageType/:type/:name/disable-timeout', (r
 app.get(`${STORE_API_BASE}/maven/remote/:name`, (req, res) => {
   const name = req.params.name;
   if(name){
-    const remoteList = require('./mock/list/FakeRemoteList.json');
+    const remoteList = require('./mock/list/FakeMavenRemoteList.json');
     const result = remoteList.items.find(item=>item.name===name);
     if(result){
       res.status(200).json(result);
@@ -87,7 +86,7 @@ app.get(`${STORE_API_BASE}/maven/remote/:name`, (req, res) => {
 app.get(`${STORE_API_BASE}/maven/hosted/:name`, (req, res) => {
   const name=req.params.name;
   if(name){
-    const remoteList = require('./mock/list/FakeHostedList.json');
+    const remoteList = require('./mock/list/FakeMavenHostedList.json');
     const result = remoteList.items.find(item=>item.name===name);
     if(result){
       res.status(200).json(result);
@@ -102,7 +101,7 @@ app.get(`${STORE_API_BASE}/maven/hosted/:name`, (req, res) => {
 app.get(`${STORE_API_BASE}/maven/group/:name`, (req, res) => {
   const name=req.params.name;
   if(name){
-    const remoteList = require('./mock/list/FakeGroupList.json');
+    const remoteList = require('./mock/list/FakeMavenGroupList.json');
     const result = remoteList.items.find(item=>item.name===name);
     if(result){
       res.status(200).json(result);
@@ -135,7 +134,7 @@ app.post(`${STORE_API_BASE}/:packageType/:type/:name`, (req, res) => {
   const newRepo = req.body;
   if(req.headers['content-type']==="application/json"){
     if (newRepo.packageType&&newRepo.type&&newRepo.name){
-      // res.status(204);
+      console.log(`${req.method} ${req.path}\n ${JSON.stringify(newRepo)}`);
       res.sendStatus(204);
     }else{
       res.status(400).json({error: "Bad repo request: missing packageType or type or name for repo!"});
@@ -149,6 +148,7 @@ app.put(`${STORE_API_BASE}/:packageType/:type/:name`, (req, res) => {
   const updatedRepo = req.body;
   if(req.headers['content-type']==="application/json"){
     if (updatedRepo.packageType&&updatedRepo.type&&updatedRepo.name){
+      console.log(`${req.method} ${req.path}\n ${JSON.stringify(updatedRepo)}`);
       res.status(200).json(updatedRepo);
     }else{
       res.status(400).json({error: "Bad repo request: missing packageType or type or name for repo!"});