style: improve page style

src/App.js

@@ -1,26 +1,27 @@
 import React from "react";
-import { makeStyles, Paper, IconButton, Snackbar } from "@material-ui/core";
+import { makeStyles, Paper, Snackbar } from "@material-ui/core";
 import TextField from "@material-ui/core/TextField";
-import SearchIcon from "@material-ui/icons/Search";
 import MuiAlert from "@material-ui/lab/Alert";
 import Autocomplete from "@material-ui/lab/Autocomplete";
 import Tabs from "@material-ui/core/Tabs";
 import Tab from "@material-ui/core/Tab";
 import PropTypes from "prop-types";
 import Typography from "@material-ui/core/Typography";
 import Box from "@material-ui/core/Box";
-import Button from "@material-ui/core/Button";
+import IconButton from "@material-ui/core/IconButton";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import SearchIcon from "@material-ui/icons/Search";
+import cloneDeep from "lodash.clonedeep";
 
 import ContirbutorLineChart from "./components/contributor";
 import ActivityChart from "./components/activity";
 import { getParameterByName } from "./utils";
+import CompareComponent from "./components/compare";
 
 const Alert = props => {
   return <MuiAlert elevation={6} variant="filled" {...props} />;
 };
 
-const ALLOW_MERGE_LIST = ["skywalking", "apisix"];
-
 const useStyles = makeStyles(theme => ({
   button: {
     margin: theme.spacing(1)
@@ -37,11 +38,11 @@ const useStyles = makeStyles(theme => ({
     display: "flex",
     flexWrap: "wrap",
     alignItems: "center",
-    width: 600
+    width: "100%"
   },
   autocomplete: {
-    marginLeft: theme.spacing(1),
-    flex: 1
+    flex: 1,
+    paddingTop: "5px"
   },
   iconButton: {
     padding: 10
@@ -85,27 +86,15 @@ function a11yProps(index) {
   };
 }
 
-const useTabStyles = makeStyles(theme => ({
-  root: {
-    flexGrow: 1,
-    width: "100%",
-    backgroundColor: theme.palette.background.paper
-  }
-}));
-
 const App = () => {
   const [repo, setRepo] = React.useState("apache/apisix");
   const [message, setMessage] = React.useState("");
   const [open, setOpen] = React.useState(false);
   const [alertType, setAlertType] = React.useState("success");
   const [searchOption, setSearchOption] = React.useState([]);
   const [contributorRepoList, setContributorRepoList] = React.useState([]);
-  const classesTable = useTabStyles();
   const [value, setValue] = React.useState(0);
   const [tabdisabled, setTabDisabled] = React.useState(false);
-  const [showMergeButton, setShowMergeButton] = React.useState(false);
-  const [mergeStatus, setMergeStatus] = React.useState(false);
-  const [mergeRepo, setMergeRepo] = React.useState("apache/apisix");
 
   const handleChange = (event, newValue) => {
     setValue(newValue);
@@ -128,10 +117,6 @@ const App = () => {
   };
 
   const updateChart = repo => {
-    const index = ALLOW_MERGE_LIST.findIndex(item => repo.includes(item));
-    if (index === -1) {
-      setMergeStatus(false);
-    }
     if (!contributorRepoList.includes(repo)) {
       setContributorRepoList([...contributorRepoList, repo]);
     }
@@ -158,25 +143,14 @@ const App = () => {
   React.useEffect(() => {
     getSearchOptions();
     const repo = getParameterByName("repo") || "apache/apisix";
+    const repoArr = repo.split(",").filter(Boolean);
+    setContributorRepoList(repoArr);
+
     const chart = getParameterByName("chart");
     if (chart === "contributorMonthlyActivity") {
       setValue(1);
     } else {
-      const merge = getParameterByName("merge");
-      setRepo(repo);
-      const index = ALLOW_MERGE_LIST.findIndex(item => repo.includes(item));
-      if (merge === "true" && index !== -1) {
-        setTimeout(() => {
-          setMergeStatus(true);
-          setShowMergeButton(true);
-        }, 500);
-      }
-    }
-    if (repo) {
-      const repoArr = repo.split(",").filter(Boolean);
-      setContributorRepoList(repoArr);
-    } else {
-      setContributorRepoList(["apache/apisix"]);
+      setValue(0);
     }
   }, []);
 
@@ -190,26 +164,6 @@ const App = () => {
     );
   }, [value]);
 
-  React.useEffect(() => {
-    const index = ALLOW_MERGE_LIST.findIndex(item => repo.includes(item));
-    if (index !== -1) {
-      setShowMergeButton(true);
-    } else {
-      setShowMergeButton(false);
-      setMergeStatus(false);
-    }
-    if (contributorRepoList.length === 0) {
-      setMergeStatus(false);
-      setShowMergeButton(false);
-    }
-    if (repo.includes("skywalking")) {
-      setMergeRepo("apache/skywalking");
-    }
-    if (repo.includes("apisix")) {
-      setMergeRepo("apache/apisix");
-    }
-  }, [repo, contributorRepoList]);
-
   return (
     <>
       <Snackbar
@@ -225,9 +179,93 @@ const App = () => {
       </Snackbar>
       <div
         className="content"
-        style={{ display: "flex", justifyContent: "center" }}
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center"
+        }}
       >
-        <div className="right" style={{ width: "90%", marginTop: "10px" }}>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            flexDirection: "column",
+            width: "40%"
+          }}
+        >
+          <Paper className={classes.root} elevation={0}>
+            <Autocomplete
+              freeSolo
+              className={classes.autocomplete}
+              size="small"
+              id="autocomplete"
+              disableClearable
+              options={searchOption}
+              onInputChange={(event, value, reason) => {
+                if (reason === "reset") {
+                  setRepo(value);
+                  updateChart(value);
+                }
+              }}
+              renderInput={params => (
+                <TextField
+                  {...params}
+                  label="Search Github Repository Name"
+                  margin="normal"
+                  variant="outlined"
+                  helperText="Keep searching to complete the comparison"
+                  className={classes.searchTextField}
+                  onChange={e => {
+                    setRepo(e.target.value);
+                  }}
+                  onKeyPress={ev => {
+                    if (ev.key === "Enter") {
+                      updateChart(repo);
+                      ev.preventDefault();
+                    }
+                  }}
+                  InputProps={{
+                    ...params.InputProps,
+                    endAdornment: (
+                      <InputAdornment>
+                        <IconButton
+                          onClick={() => {
+                            updateChart(repo);
+                          }}
+                        >
+                          <SearchIcon />
+                        </IconButton>
+                      </InputAdornment>
+                    )
+                  }}
+                />
+              )}
+            />
+          </Paper>
+          <div>
+            <CompareComponent
+              list={contributorRepoList}
+              onDelete={e => {
+                const clonedContributorRepoList = cloneDeep(
+                  contributorRepoList
+                );
+                const newContributorRepoList = clonedContributorRepoList.filter(
+                  item => item !== e
+                );
+                setContributorRepoList(newContributorRepoList);
+              }}
+            />
+          </div>
+        </div>
+        <div
+          className="right"
+          style={{
+            width: "70%",
+            border: "1px solid #dadce0",
+            borderRadius: "12px"
+          }}
+        >
           <div style={{ display: "flex", justifyContent: "center" }}>
             <div
               className="search-container"
@@ -236,80 +274,16 @@ const App = () => {
                 justifyContent: "center",
                 flexDirection: "column"
               }}
-            >
-              <Paper className={classes.root} elevation={0}>
-                <Autocomplete
-                  freeSolo
-                  className={classes.autocomplete}
-                  size="small"
-                  id="autocomplete"
-                  disableClearable
-                  options={searchOption}
-                  onInputChange={(event, value, reason) => {
-                    if (reason === "reset") {
-                      setRepo(value);
-                      updateChart(value);
-                    }
-                  }}
-                  renderInput={params => (
-                    <TextField
-                      {...params}
-                      label="Search Github Repository Name"
-                      margin="normal"
-                      variant="outlined"
-                      helperText="Keep searching to complete the comparison"
-                      className={classes.searchTextField}
-                      onChange={e => {
-                        setRepo(e.target.value);
-                      }}
-                      onKeyPress={ev => {
-                        if (ev.key === "Enter") {
-                          updateChart(repo);
-                          ev.preventDefault();
-                        }
-                      }}
-                      InputProps={{ ...params.InputProps, type: "search" }}
-                    />
-                  )}
-                />
-                <IconButton
-                  className={classes.iconButton}
-                  aria-label="search"
-                  onClick={() => {
-                    updateChart(repo);
-                  }}
-                >
-                  <SearchIcon />
-                </IconButton>
-              </Paper>
-              {Boolean(!value) && Boolean(showMergeButton) && (
-                <Button
-                  variant="contained"
-                  color="primary"
-                  size="small"
-                  onClick={() => {
-                    setMergeStatus(!mergeStatus);
-                  }}
-                  style={{ width: "260px", marginLeft: "8px" }}
-                >
-                  {Boolean(!mergeStatus)
-                    ? `View all repos related to ${
-                        repo.includes("skywalking")
-                          ? "apache/skywalking"
-                          : "apache/apisix"
-                      }`
-                    : "Cancel merge view"}
-                </Button>
-              )}
-            </div>
+            ></div>
           </div>
 
-          <div className={classesTable.root} style={{ marginTop: "20px" }}>
+          <div>
             <div
               style={{
                 width: "100%",
                 display: "flex",
-                justifyContent: "center"
+                justifyContent: "left",
+                padding: "5px"
               }}
             >
               <Paper color="default" elevation={0}>
@@ -340,17 +314,11 @@ const App = () => {
             <TabPanel value={value} index={0}>
               <ContirbutorLineChart
                 repoList={contributorRepoList}
-                isMerge={mergeStatus}
-                mergeRepo={mergeRepo}
                 showAlert={showAlert}
                 onLoading={e => {
                   setTabDisabled(e);
                 }}
                 onDelete={e => {
-                  if (mergeStatus) {
-                    setMergeStatus(false);
-                    return;
-                  }
                   setContributorRepoList(
                     contributorRepoList.filter(item => item !== e)
                   );