Change Modals in components/Occupied.tsx

Author: xkiso

app/components/Occupied.tsx

@@ -41,6 +41,8 @@ type ClickEvent = React.MouseEvent<HTMLElement>;
 const Occupied: React.FC = () => {
   const { applications, getApplications, deleteApp } = useContext(DashboardContext);
   const [open, setOpen] = useState<boolean>(false);
+  const [addOpen, setAddOpen] = useState<boolean>(false);
+
   const [index, setIndex] = useState<number>(0);
   const [app, setApp] = useState<string>('');
 
@@ -128,7 +130,7 @@ const Occupied: React.FC = () => {
 
         <div className="cardContainer">
           <div className="card" id={`card-add`}>
-            <Button className={classes.paper} onClick={() => setOpen(true)}>
+            <Button className={classes.paper} onClick={() => setAddOpen(true)}>
               <AddCircleOutlineTwoToneIcon className={classes.icon} />
             </Button>
           </div>
@@ -158,11 +160,11 @@ const Occupied: React.FC = () => {
               </Card>
             </div>
           ))}
-          <Modal open={open} onClose={() => setOpen(false)}>
-            <ServicesModal open={open} onClose={() => setOpen(false)} i={index} app={app} />
+          <Modal open={addOpen} onClose={() => setAddOpen(false)}>
+            <AddModal setOpen={setAddOpen} />
           </Modal>
           <Modal open={open} onClose={() => setOpen(false)}>
-            <AddModal open={open} onClose={() => setOpen(false)} setOpen={setOpen} />
+            <ServicesModal i={index} app={app} />
           </Modal>
         </div>
       </div>

package-lock.json

@@ -111,6 +111,7 @@
     "typescript": "^3.9.5",
     "url-loader": "^2.1.0",
     "webpack": "^4.43.0",
+    "webpack-bundle-analyzer": "^3.8.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.11.0"
   }

package.json

@@ -1,5 +1,6 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 module.exports = {
   entry: './app/index.tsx',
@@ -58,6 +59,10 @@ module.exports = {
     new HtmlWebpackPlugin({
       template: 'app/index.html',
     }),
+    // new BundleAnalyzerPlugin({
+    //   openAnalyzer: true,
+    //   analyzerMode: 'static'
+    // }),
   ],
   resolve: {
     extensions: ['.js', '.jsx', '.ts', '.tsx'],