Refactored code to replace AntD with Material-UI and other enhancemen…

…ts. Reference: https://chat.openai.com/share/1b4cef3c-30d8-464c-a05d-a23886150dea

package.json

@@ -1,9 +1,8 @@
 {
-  "name": "techfriendly",
+  "name": "jobsforit-de",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ant-design/icons": "^4.1.0",
     "@contentful/rich-text-react-renderer": "^13.4.0",
     "@data-ui/histogram": "^0.0.84",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
@@ -12,7 +11,6 @@
     "@fullpage/react-fullpage": "^0.1.16",
     "@material-ui/core": "^4.5.0",
     "@material-ui/icons": "^4.4.3",
-    "antd": "^3.23.6",
     "chart.js": "^2.9.4",
     "contentful": "^7.10.0",
     "contentful-management": "^6.1.1",

src/common/MobileTopNav.js

@@ -1,17 +1,18 @@
-import React, {Component} from "react";
-import {Col, Row} from "antd";
+import React, { useState, useCallback } from "react";
 import {
   MDBCollapse,
   MDBContainer,
   MDBHamburgerToggler,
   MDBNavbar,
   MDBNavbarBrand,
   MDBNavbarNav,
-  MDBNavItem, MDBNavLink
+  MDBNavItem,
+  MDBNavLink
 } from "mdbreact";
 import logoDE from 'assets/img/wiewior.png';
 import {withStyles} from "@material-ui/core";
 import {Link} from "react-router-dom";
+import Grid from '@material-ui/core/Grid';
 
 const styles = theme => ({
   topNav: {
@@ -24,48 +25,28 @@ const styles = theme => ({
   },
 });
 
-class MobileTopNav extends Component {
-  state = {
-    collapse: false,
-  };
+const MobileTopNav = ({ classes }) => {
+  const [collapse, setCollapse] = useState(false);
 
-  constructor() {
-    super();
-    this.toggleMenu= this.toggleMenu.bind(this);
-  }
+  const toggleMenu = useCallback(() => {
+    setCollapse(prevCollapse => !prevCollapse);
+  }, []);
 
-  toggleMenu() {
-    this.setState({
-      collapse: !this.state.collapse
-    });
-  };
-
-  render() {
-    const { classes } = this.props;
-    const logo = logoDE;
-    return (
-      <Row>
-        <Col span={24}>
-        <MDBNavbar
-          style={{padding: 0}}
-          color="#f3f6f8 lighten-4"
-          light
-        >
+  return (
+    <Grid container>
+      <Grid item xs={12}>
+        <MDBNavbar style={{padding: 0}} color="#f3f6f8 lighten-4" light>
           <MDBContainer>
             <MDBNavbarBrand>
               <Link to={'/'}>
                 <div className={classes.topNav}>
-                  <img src={logo} className={classes.logoImg} alt="JobsForIT"/>
+                  <img src={logoDE} className={classes.logoImg} alt="JobsForIT"/>
                 </div>
               </Link>
             </MDBNavbarBrand>
-            <MDBHamburgerToggler
-              color="#7f7f7f"
-              id="hamburger1"
-              onClick={this.toggleMenu}
-            />
+            <MDBHamburgerToggler color="#7f7f7f" id="hamburger1" onClick={toggleMenu} />
             <MDBCollapse
-              isOpen={this.state.collapse}
+              isOpen={collapse}
               style={{
                 padding: 0,
                 zIndex: 5,
@@ -80,9 +61,6 @@ class MobileTopNav extends Component {
                 <MDBNavItem active>
                   <MDBNavLink style={{paddingLeft: "7vw"}} to="/">Home</MDBNavLink>
                 </MDBNavItem>
-                {/*<MDBNavItem>*/}
-                {/*  <MDBNavLink style={{paddingLeft: "7vw"}} to="/about">About</MDBNavLink>*/}
-                {/*</MDBNavItem>*/}
                 <MDBNavItem>
                   <MDBNavLink style={{paddingLeft: "7vw"}} to="/imprint">Imprint</MDBNavLink>
                 </MDBNavItem>
@@ -96,10 +74,9 @@ class MobileTopNav extends Component {
             </MDBCollapse>
           </MDBContainer>
         </MDBNavbar>
-      </Col>
-      </Row>
-    )
-  }
-}
+      </Grid>
+    </Grid>
+  );
+};
 
 export default withStyles(styles)(MobileTopNav);

src/jobs/ZeroJobs/ZeroJobs.js

@@ -1,48 +1,46 @@
 import React from "react";
 import PropTypes from 'prop-types';
 
-import Paper from "@material-ui/core/Paper/Paper";
+import Paper from "@material-ui/core/Paper";
 import {withStyles} from '@material-ui/core/styles';
-import {Col, Row} from "antd";
-import Button from "common/Button/Button";
+import Grid from '@material-ui/core/Grid';
+import Button from "common/Button/Button"; // Assuming your custom button component
 import store from "../../stores/store";
 
-const styles = theme => (
-  {
-    sticker: {
-      margin: '2rem 35%',
-      width: '30%',
-      textAlign: 'center'
-    }
+const styles = theme => ({
+  sticker: {
+    margin: '2rem 35%',
+    width: '30%',
+    textAlign: 'center'
   }
-);
+});
 
 const ZeroJobs = (props) => {
   const resetAllFilters = () => {
     store.resetAllFilters();
   }
 
-  const {classes} = props;
+  const { classes } = props;
 
   return (
-    <Paper style={{paddingBottom: "50%"}}>
-      <Row>
-        <Col span={10}>
-          <h1 style={{paddingBottom: "30px", paddingTop: "2rem", textAlign: "center"}}>
+    <Paper style={{ paddingBottom: "50%" }}>
+      <Grid container>
+        <Grid item xs={10}>
+          <h1 style={{ paddingBottom: "30px", paddingTop: "2rem", textAlign: "center" }}>
             <span>Zero jobs like this 🙁</span>
           </h1>
-        </Col>
-        <Col span={3}></Col>
-      </Row>
-      <Row>
-        <Col span={10}>
-          <h3 style={{paddingBottom: "30px", paddingTop: "2rem", textAlign: "center"}}>
+        </Grid>
+        <Grid item xs={2}></Grid>
+      </Grid>
+      <Grid container>
+        <Grid item xs={10}>
+          <h3 style={{ paddingBottom: "30px", paddingTop: "2rem", textAlign: "center" }}>
             <Button variant="primary long" clicked={resetAllFilters}>
               Reset filters
             </Button>
           </h3>
-        </Col>
-      </Row>
+        </Grid>
+      </Grid>
     </Paper>
   );
 }