getfirms

src/app/store.jsx

@@ -1,9 +1,11 @@
 import { configureStore } from "@reduxjs/toolkit";
 import authReducer from "../features/authSlice";
+import firmReducer from "../features/firmSlice";
 
 const store = configureStore({
   reducer: {
     auth: authReducer,
+    getfirms : firmReducer,
   },
   devTools: process.env.NODE_ENV !== "production",
 });

src/components/DrawerList.jsx

@@ -53,8 +53,12 @@ const DrawerList = ({ handleClickPath }) => {
   const [selectedMenu, setSelectedMenu] = React.useState(null);
 
   const handleMenuClick = (event, index) => {
-    setAnchorEl(event.currentTarget);
-    setSelectedMenu(index);
+    if (index !== 0) {
+      setAnchorEl(event.currentTarget);
+      setSelectedMenu(index);
+    } else {
+      handleClickPath("/stock");
+    }
   };
 
   const handleClose = () => {
@@ -99,7 +103,6 @@ const DrawerList = ({ handleClickPath }) => {
     <List>
       {icons.map((item, index) => (
         <ListItem key={index} disablePadding>
-
           <ListItemButton
             sx={{
               color: "white",
@@ -114,7 +117,7 @@ const DrawerList = ({ handleClickPath }) => {
           >
             <ListItemIcon>{item.icon}</ListItemIcon>
             {item.title}
-            <KeyboardArrowDownIcon sx={{ ml: "auto" }} />
+            {index !== 0 && <KeyboardArrowDownIcon sx={{ ml: "auto" }} />}
           </ListItemButton>
           <StyledMenu
             id="demo-customized-menu"

src/features/firmSlice.jsx

@@ -0,0 +1,29 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+const initialState = {
+    firms: [],
+    loading: false,
+    error: false,
+}
+
+const firmSlice = createSlice({
+    name: "getfirms",
+    initialState,
+    reducers: {
+        fetchStart: (state) => {
+            state.loading = true
+        },
+        firmsList: (state, {payload}) => {
+            state.loading = false
+            state.firms = payload.data
+        },
+        fetchFail: (state) => {
+            state.loading = false
+            state.error = true
+        },
+    }
+});
+
+export const { fetchFail, firmsList, fetchStart } = firmSlice.actions
+
+export default firmSlice.reducer

src/pages/Dashboard.jsx

@@ -96,8 +96,8 @@ const Drawer = styled(MuiDrawer, {
 }));
 
 export default function MiniDrawer() {
-  const { user } = useSelector((state) => state.auth);
-  // console.log(user);
+  const { user,token } = useSelector((state) => state.auth);
+  console.log(token);
   const theme = useTheme();
   const [open, setOpen] = React.useState(false);
   const [anchorEl, setAnchorEl] = React.useState(null);
@@ -232,7 +232,7 @@ const navigate = useNavigate()
               )}
             </IconButton>
           </DrawerHeader>
-          <DrawerList handleClickPath={handleClickPath} />
+          <DrawerList handleClickPath={handleClickPath}/>
         </Paper>
       </Drawer>
       <Box component="main" sx={{ flexGrow: 1, p: 3 }}>

src/pages/ListFirms.jsx

@@ -1,11 +1,91 @@
-import React from 'react'
+import React, { useEffect } from "react";
+import { useSelector } from "react-redux";
+import useStockRequest from "../services/useStockRequest";
+import { Box, Container, Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import Card from "@mui/material/Card";
+import CardHeader from "@mui/material/CardHeader";
+import CardMedia from "@mui/material/CardMedia";
+import CardContent from "@mui/material/CardContent";
+import CardActions from "@mui/material/CardActions";
+import Collapse from "@mui/material/Collapse";
+import Avatar from "@mui/material/Avatar";
+import IconButton from "@mui/material/IconButton";
+import { red } from "@mui/material/colors";
+import FavoriteIcon from "@mui/icons-material/Favorite";
+import ShareIcon from "@mui/icons-material/Share";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+
+const ExpandMore = styled((props) => {
+  const { expand, ...other } = props;
+  return <IconButton {...other} />;
+})(({ theme, expand }) => ({
+  transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
+  marginLeft: "auto",
+  transition: theme.transitions.create("transform", {
+    duration: theme.transitions.duration.shortest,
+  }),
+}));
 
 const ListFirms = () => {
+  const [expanded, setExpanded] = React.useState(false);
+  const { firms } = useSelector((state) => state.getfirms);
+  const { getFirms } = useStockRequest();
+  // console.log(firms)
+
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+  };
+
+  useEffect(() => {
+    getFirms();
+  }, []);
   return (
-    <div>
-
-    </div>
-  )
-}
+    <Container>
+      <Typography>FİRMS</Typography>
+
+      <Box>
+        {firms.map((firm) => (
+          <Card key={firm.id} sx={{ maxWidth: 345 }}>
+            <CardHeader
+              title={firm.name}
+              sx={{textAlign:"center"}}
+            />
+            <CardMedia
+              component="img"
+              height="194"
+              image={firm.image}
+              alt="Paella dish"
+              sx={{ objectFit: "contain" }}
+            />
+            <CardContent>
+              <Typography variant="body2" color="text.secondary">
+                {firm.address}
+              </Typography>
+            </CardContent>
+            <CardActions disableSpacing>
+              <IconButton aria-label="add to favorites">
+                <FavoriteIcon />
+              </IconButton>
+              <IconButton aria-label="share">
+                <ShareIcon />
+              </IconButton>
+              <ExpandMore
+                expand={expanded}
+                onClick={handleExpandClick}
+                aria-expanded={expanded}
+                aria-label="show more"
+              >
+                <ExpandMoreIcon />
+              </ExpandMore>
+            </CardActions>
+
+          </Card>
+        ))}
+      </Box>
+    </Container>
+  );
+};
 
-export default ListFirms
+export default ListFirms;

src/services/useStockRequest.jsx

@@ -0,0 +1,24 @@
+import { useDispatch } from "react-redux"
+import useAxios from "./useAxios"
+import { fetchFail, fetchStart, firmsList } from "../features/firmSlice"
+
+const useStockRequest = () => {
+  const { axiosToken } = useAxios()
+  const dispatch = useDispatch()
+
+  const getFirms = async () => {
+    dispatch(fetchStart())
+    try {
+      const { data } =await axiosToken.get("/firms")
+      console.log(data)
+        dispatch(firmsList(data))
+    } catch (error) {
+        dispatch(fetchFail())
+      console.log(error)
+    }
+  }
+
+  return { getFirms }
+}
+
+export default useStockRequest