I have just started updating some class components into functional components but now when navigating through to other pages (using ) the page will only display after an initial refresh.
Below is an example This is a component I have updated to use the useState() hook.
function AdminWorkstationss({ initialCount }) {
const [WSAHeaders, setWSAHeaders] = useState([{}]);
const [currentPage, setPage] = useState(1);
const [WSAPerPage, setWSA] = useState(10);
const [pageNumbers, createPageNumber] = useState([]);
const [loadingToken, setLoadingToken] = useState(null);
const indexOfLastTodo = currentPage * WSAPerPage;
const indexOfFirstTodo = indexOfLastTodo - WSAPerPage;
const currentTodos = WSAHeaders.slice(indexOfFirstTodo, indexOfLastTodo);
// const pageNumbers = [];
useEffect(async () => {
setLoadingToken(true);
let recordset = await fetch(`/admin-completed-workstations`);
let results = await recordset.json();
setWSAHeaders(results.recordset);
var pNumbers = [];
for (
let i = 1;
i <= Math.ceil(results.recordset.length / WSAPerPage);
i++
) {
// pageNumbers.push(i);
pNumbers.push(i);
}
createPageNumber(pNumbers);
setLoadingToken(false);
}, []);
function handleClick(event) {
setPage(Number(event.target.id));
}
if (!loadingToken) {
return (
<>
<Fade>
<Slide left>
<h2 style={{ textAlign: "center" }}>
Workstation Assessments(<b> Completed</b>)
</h2>
</Slide>
</Fade>
<ul>
<button disabled className="btn btn-secondary">
Workstation Assessments
</button>
<Link to="./admin-center">
<button className="btn btn-secondary">Edit Questions</button>
</Link>
<Link to="./admin-center-view-users">
<button className="btn btn-secondary">View Users</button>
</Link>
<DropdownButton
style={{ float: "right" }}
id="dropdown-basic-button"
title="WSA's Per Page"
>
<Dropdown.Item onClick={() => setWSA(10)}>10</Dropdown.Item>
<Dropdown.Item onClick={() => setWSA(20)}>20</Dropdown.Item>
<Dropdown.Item onClick={() => setWSA(40)}>40</Dropdown.Item>
<Dropdown.Item onClick={() => setWSA(100)}>100</Dropdown.Item>
</DropdownButton>{" "}
<DropdownButton
style={{ float: "right" }}
id="dropdown-basic-button"
title="Completed"
>
//HERE. This button in drop down takes me to the correct page but just requires a refresh or it will not load.
<Dropdown.Item>
{" "}
<Link to="admin-view-workstation-assessments-declined">
In Progress
</Link>
</Dropdown.Item>
</DropdownButton>{" "}
</ul>
{currentTodos.map(number => (
<ul>
{" "}
<div className="jumbotron">
//Mapping child component
<Questions
workStation={number.AssignedWorkstation}
date={number.Date}
completeToken={number.QuestionStatus}
RUId={number.RUId}
WSAId={number.WSAId}
></Questions>
</div>
</ul>
))}
<div style={{ alignContent: "center", width: "10%" }}></div>
<div style={{ textAlign: "center", alignContent: "center" }}>
{" "}
<b> Current Page </b>: {currentPage}
<br />
<div>
{pageNumbers.map(number => (
<button
className="btn btn-primary"
key={number}
id={number}
onClick={handleClick}
>
{number}
</button>
))}
</div>
</div>
<br />
</>
);
} else if (loadingToken) {
return (
<>
<ul>
<button disabled className="btn btn-secondary">
Workstation Assessments
</button>
<Link to="./admin-center">
<button className="btn btn-secondary">Edit Questions</button>
</Link>
<Link to="./admin-center-view-users">
<button className="btn btn-secondary">View Users</button>
</Link>
<DropdownButton
style={{ float: "right" }}
id="dropdown-basic-button"
title="Completed"
>
<Dropdown.Item>
{" "}
<Link to="admin-view-workstation-assessments-declined">
In Progress
</Link>
</Dropdown.Item>
</DropdownButton>{" "}
</ul>
<h3 style={{ textAlign: "center" }}>LOADING</h3>
</>
);
}
}
I then have a child component of this one (this is within the .map) called questions. This is still a class component will this be the issue?
class Questions extends React.Component {
constructor(props) {
super(props);
console.log(props);
this.state = {
...props,
questionsAccepted: [],
questionsAcceptedCounter: "",
selectedSet: [],
ViewActivityToken: false,
noteToBeAdded: "",
notesFromDB: [],
addNoteToken: false,
answeredQuestions: []
};
}
render() {
if (!this.state.ViewActivity) {
if (!this.state.viewDetails && !this.state.ViewActivityToken) {
console.log(moment.locale());
return (
<div>
<ModalCompletedQuestions
RUId={this.props.RUId}
workStation={this.props.workStation}
WSAId={this.props.WSAId}
/>
// This Link is a link to another page but this page also needs a refresh before it is visible.
<Link
to={{
pathname: "/admin-view-full-user-wsa-responses",
state: {
WSAId: this.props.WSAId
}
}}
>
<button style={{ float: "right" }} className="btn btn-primary">
View Full Details
</button>
</Link>
<br />
<li>
<b>User Id: </b>
{this.props.RUId}
</li>
<li>
<b>Workstation: </b>
{this.props.workStation}
</li>
<li>
<b>Date: </b>
{moment(this.props.date).format("L")}
</li>
<li>
<b>Complete Token: </b>
{this.props.completeToken}
</li>
</div>
);
} else if (this.state.viewDetails && !this.state.ViewActivityToken) {
return (
<div>
<button
style={{ float: "right" }}
onClick={e =>
this.setState({
ViewActivity: false,
viewDetails: false,
ViewActivityToken: false,
addNoteToken: false
})
}
className="btn btn-secondary"
>
Revert
</button>
<br />
<br />
{this.state.selectedSet &&
this.state.selectedSet.map((item, index) => {
return (
<div>
<li>
{" "}
<b>{item.QuestionWhenAnswered}</b>{" "}
</li>
<li>{item.QuestionResponse}</li>
<li>{item.Accepted}</li>
</div>
);
})}
</div>
);
}
} else if (this.state.ViewActivity && !this.state.addNoteToken) {
return (
<>
<button
style={{ float: "right" }}
onClick={e =>
this.setState({
ViewActivity: false,
viewDetails: false,
ViewActivityToken: false,
addNoteToken: false
})
}
className="btn btn-secondary"
>
Revert
</button>
<br />
<li>
<b>User Id: </b>
{this.props.RUId}
</li>
<li>
<b>Workstation: </b>
{this.props.workStation}
</li>
<li>
<b>Date: </b>
{moment(this.props.date).format("DD/MM/YYYY")}
</li>
<li>
<b>Complete Token: </b>
{this.props.completeToken}
</li>
{this.state.notesFromDB &&
this.state.notesFromDB.map((item, index) => {
return (
<div
style={{
backgroundColor: "white",
border: "inset",
borderWidth: "0.2px"
}}
>
<div style={{ float: "right" }}>
{moment(item.CreationTime).format("HH:MM DD/MM/YYYY ")}
</div>
<div>
<b>{`${item.UserStatus} `}</b>
</div>
<div style={{ textAlign: "left" }}>{item.Notes}</div>
</div>
);
})}
<br />
<button
onClick={this.AddNoteBtn}
className="btn btn-primary"
style={{ width: "100%" }}
>
Add Note
</button>
</>
);
}
}
}
Why are these pages not loading automatically and why would they need a refresh to laod? Is there any chance it is because I am using class components along with functional components? Any help is much appreciated.
