can any one help me with that actually i am trying to add useCallback function but it's seems not working it's loading not showing any data every time i change page and came back to the "users" url it's start re-render plz help me with this plz if any one can help me i would be a help for me.
here is my Sandbox link CodeSandbox for live
but i'm using my own django server
my Store.js here is my Store that is created
import React, { createContext, useEffect, useReducer } from "react";
import axios from "axios";
import { BlogReducer } from "./Reducer/Reducer";
const url = "http://localhost:8000/api/";
export const MyData = createContext();
axios.defaults.baseURL = url;
axios.defaults.withCredentials = true;
const Store = ({ children }) => {
const initialState = {
posts: [],
users: [],
user: {},
loading: true,
error: false,
addUsers: async (value) => {
const data = await axios.post(url, value);
dispatch({
type: "ADD_ARTICLE",
payload: data,
});
},
reset: () => {
dispatch({
type: "REST_ARTICLE",
});
},
};
const [state, dispatch] = useReducer(BlogReducer, initialState);
return (
<MyData.Provider value={{ state, dispatch }}>{children}</MyData.Provider>
);
};
export default Store;
my App.js i used react-router-dom .
my App.js
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
function App() {
return (
<Router>
<MyNavbar />
<Store>
<Switch>
<Route exact component={UsersList} path="/users" />
</Switch>
</Store>
<MyFooter />
</Router>
);
}
my Reducer.js
import { UserConst } from "../Const/userConst";
export const BlogReducer = (state, { type, payload }) => {
switch (type) {
case UserConst.ON_USERS_LIST_LOADING:
return { ...state, users: [], loading: true, error: false };
case UserConst.ON_USERS_LIST_FAIL:
return { ...state, users: [], loading: false, error: true };
case UserConst.ON_USERS_LIST_SUCCESS:
return { ...state, users: payload, loading: false, error: false };
case UserConst.ON_USER_REMOVE:
const newUserList = state.users.filter((user) => user.id !== payload);
return { ...state, users: newUserList };
default:
return state;
}
};
my UsersList.js
import React, { useContext, useEffect, useRef, useState } from "react";
import { MyData } from "../Store";
import axios from "axios";
import { UserConst } from "../Store/Const/userConst";
import { Link } from "react-router-dom";
import { Table, Modal } from "react-bootstrap";
import DeleteIcon from "@material-ui/icons/Delete";
import EditIcon from "@material-ui/icons/Edit";
import Button from "@material-ui/core/Button";
import Tooltip from "@material-ui/core/Tooltip";
import { List, ListItem } from "@material-ui/core";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import ListItemText from "@material-ui/core/ListItemText";
const UsersList = () => {
const { state, dispatch } = useContext(MyData); //state value
const getUsersData = async () => {
try {
dispatch({
type: UserConst.ON_USERS_LIST_LOADING,
});
const response = await axios.get("users");
const users = await response.data.data;
dispatch({
type: UserConst.ON_USERS_LIST_SUCCESS,
payload: users,
});
} catch (error) {
dispatch({
type: UserConst.ON_USERS_LIST_FAIL,
});
}
};
useEffect(() => {
getUsersData();
}, []);
const actions = (id) => {
return (
<>
<Tooltip title="Delete" arrow>
<Button variant="outlined">
<DeleteIcon color="action" onClick={() => deleteHandler(id)}>
Delete
</DeleteIcon>
</Button>
</Tooltip>
<Tooltip title="Edit" arrow>
<Link to={`/users/${id}/edit`}>
<Button variant="outlined">
<EditIcon color="primary">Edit</EditIcon>
</Button>
</Link>
</Tooltip>
</>
);
};
const deleteHandler = async (id) => {
await axios.delete(`users/${id}`);
setSearchData((people) => {
return people.filter((person) => person.id !== id);
});
dispatch({
type: UserConst.ON_USER_REMOVE,
payload: id,
});
};
const inputRef = useRef(null);
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => {
setShow(!show);
};
useEffect(() => {
if (show === true) {
inputRef.current.focus();
}
}, [show]);
const [search, setSearch] = useState(""); // input field
const [searchData, setSearchData] = useState([]); //the data what we want
const url = `users?search=${search}`; //search URL
return (
<div>
{state.loading ? (
<h3>Loading....</h3>
) : state.error ? (
<h3>Error</h3>
) : (
<>
<div className=" text-right">
<Button onClick={handleShow}>Search</Button>
</div>
<div>
<Modal
keyboard={true}
show={show}
onHide={handleClose}
backdrop="static"
>
<Modal.Header closeButton>
<Modal.Title>Search User</Modal.Title>
</Modal.Header>
<Modal.Body>
<input
ref={inputRef}
name="search"
onChange={async (e) => {
setSearch(() => e.target.value);
const response = await axios.get(url);
const data = await response.data.data;
setSearchData(data);
}}
value={search}
/>
<List>
{searchData.map((data) => {
return (
<ListItem key={data.id}>
<ListItemAvatar>{actions(data.id)}</ListItemAvatar>
<ListItemText className="ml-2">
{data.email}
</ListItemText>
<ListItemText>@{data.username}</ListItemText>
</ListItem>
);
})}
</List>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
</Modal.Footer>
</Modal>
</div>
<Table striped bordered hover size="sm">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Username</th>
<th></th>
</tr>
</thead>
<tbody>
{state.users.map((user) => {
return (
<tr key={user.id}>
<td>{user.id}</td>
<td>
{user.first_name} {user.last_name}
</td>
<td>{user.email}</td>
<td>@{user.username}</td>
<td>{actions(user.id)}</td>
</tr>
);
})}
</tbody>
</Table>
</>
)}
</div>
);
};
export default UsersList;
plz help me to stop re-rendering the state every time i cange the "users" url
