Skip to content

Commit

Permalink
prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
AdamKyle committed Sep 11, 2024
1 parent 08a8fce commit d5cefec
Show file tree
Hide file tree
Showing 8 changed files with 160 additions and 134 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default class BuildingsToUpgradeSection extends React.Component<
CapitalCityBuildingUpgradeRepairTableEvent,
);
this.buildingToUpgradeService = serviceContainer().fetch(
BuildingToUpgradeService
BuildingToUpgradeService,
);

this.buildingToUpgradeService.setComponent(this);
Expand All @@ -79,7 +79,6 @@ export default class BuildingsToUpgradeSection extends React.Component<
}

resetFilters() {

this.setState(
{
search_query: "",
Expand All @@ -89,13 +88,11 @@ export default class BuildingsToUpgradeSection extends React.Component<
this.buildingToUpgradeService.updateFilteredBuildingData(); // apply the reset
},
);
};
}

resetQueue() {

this.setState({ building_queue: [] });
};

}

render() {
if (this.state.loading) {
Expand All @@ -117,15 +114,19 @@ export default class BuildingsToUpgradeSection extends React.Component<
<input
type="text"
value={this.state.search_query}
onChange={(e: ChangeEvent<HTMLInputElement>) => this.buildingToUpgradeService.handleSearchChange(e)}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
this.buildingToUpgradeService.handleSearchChange(e)
}
placeholder="Search by kingdom name, map name, or building name"
className="w-full my-4 px-4 py-2 border rounded text-gray-900 dark:text-white bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 placeholder-gray-700 dark:placeholder-gray-300"
aria-label="Search by kingdom name, map name, or building name"
/>

<div className="flex space-x-4 mb-4">
<PrimaryOutlineButton
on_click={() => this.buildingToUpgradeService.sortBuildings()}
on_click={() =>
this.buildingToUpgradeService.sortBuildings()
}
button_label={
<>
Sort by Building Level
Expand All @@ -145,10 +146,12 @@ export default class BuildingsToUpgradeSection extends React.Component<
<>
<DangerOutlineButton
on_click={() => this.resetQueue()}
button_label={'Reset Queue'}
button_label={"Reset Queue"}
/>
<SuccessOutlineButton
on_click={() => this.buildingToUpgradeService.sendOrders()}
on_click={() =>
this.buildingToUpgradeService.sendOrders()
}
button_label="Send Orders"
/>
</>
Expand All @@ -160,64 +163,84 @@ export default class BuildingsToUpgradeSection extends React.Component<
{this.state.building_data.length}
</div>

{this.buildingToUpgradeService.getPaginatedData().map((kingdom: Kingdom) => (
<div
key={kingdom.kingdom_id}
className="bg-gray-100 dark:bg-gray-700 shadow-md rounded-lg overflow-hidden mb-4"
>
{this.buildingToUpgradeService
.getPaginatedData()
.map((kingdom: Kingdom) => (
<div
className="p-4 flex justify-between items-center cursor-pointer"
onClick={() =>
this.buildingToUpgradeService.toggleDetails(kingdom.kingdom_id)
}
key={kingdom.kingdom_id}
className="bg-gray-100 dark:bg-gray-700 shadow-md rounded-lg overflow-hidden mb-4"
>
<div>
<h2 className="text-xl font-bold dark:text-white">
{kingdom.kingdom_name}
</h2>
<p className="text-gray-500 dark:text-gray-400">
{kingdom.map_name}
</p>
<div
className="p-4 flex justify-between items-center cursor-pointer"
onClick={() =>
this.buildingToUpgradeService.toggleDetails(
kingdom.kingdom_id,
)
}
>
<div>
<h2 className="text-xl font-bold dark:text-white">
{kingdom.kingdom_name}
</h2>
<p className="text-gray-500 dark:text-gray-400">
{kingdom.map_name}
</p>
</div>
<i
className={`fas fa-chevron-${this.state.open_kingdom_ids.has(kingdom.kingdom_id) ? "down" : "up"} text-gray-500 dark:text-gray-400`}
></i>
</div>
<i
className={`fas fa-chevron-${this.state.open_kingdom_ids.has(kingdom.kingdom_id) ? "down" : "up"} text-gray-500 dark:text-gray-400`}
></i>
</div>

{this.state.open_kingdom_ids.has(
kingdom.kingdom_id,
) && (
<div className="bg-gray-300 dark:bg-gray-600 p-4">
<OrangeButton
on_click={() =>
this.buildingToUpgradeService.toggleQueueAllBuildings(
kingdom.kingdom_id,
)
}
button_label={
this.state.building_queue.find(
(item: any) =>
item.kingdomId ===
{this.state.open_kingdom_ids.has(
kingdom.kingdom_id,
) && (
<div className="bg-gray-300 dark:bg-gray-600 p-4">
<OrangeButton
on_click={() =>
this.buildingToUpgradeService.toggleQueueAllBuildings(
kingdom.kingdom_id,
)?.buildingIds.length ===
kingdom.buildings.length
? "Remove All from Queue"
: "Add All to Queue"
}
additional_css="w-full mb-4"
/>
{kingdom.buildings.map((building: Building) => (
<BuildingDetails building={building}
kingdom={kingdom}
toggle_building_queue={this.buildingToUpgradeService.toggleBuildingQueue.bind(this.buildingToUpgradeService)}
has_building_in_queue={this.buildingToUpgradeService.hasBuildingInQueue.bind(this.buildingToUpgradeService)}
)
}
button_label={
this.state.building_queue.find(
(item: any) =>
item.kingdomId ===
kingdom.kingdom_id,
)?.buildingIds.length ===
kingdom.buildings.length
? "Remove All from Queue"
: "Add All to Queue"
}
additional_css="w-full mb-4"
/>
))}
</div>
)}
</div>
))}
<Pagination on_page_change={this.buildingToUpgradeService.handlePageChange.bind(this.buildingToUpgradeService)} current_page={this.state.currentPage} items_per_page={MAX_ITEMS_PER_PAGE} total_items={this.state.filtered_building_data.length} />
{kingdom.buildings.map(
(building: Building) => (
<BuildingDetails
building={building}
kingdom={kingdom}
toggle_building_queue={this.buildingToUpgradeService.toggleBuildingQueue.bind(
this
.buildingToUpgradeService,
)}
has_building_in_queue={this.buildingToUpgradeService.hasBuildingInQueue.bind(
this
.buildingToUpgradeService,
)}
/>
),
)}
</div>
)}
</div>
))}
<Pagination
on_page_change={this.buildingToUpgradeService.handlePageChange.bind(
this.buildingToUpgradeService,
)}
current_page={this.state.currentPage}
items_per_page={MAX_ITEMS_PER_PAGE}
total_items={this.state.filtered_building_data.length}
/>
</div>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@ import clsx from "clsx";
import PaginationButtonProps from "../types/components/pagination-button-props";
import PaginationButtonState from "../types/components/pagination-button-state";

export default class PaginationButton extends React.Component<PaginationButtonProps, PaginationButtonState> {
export default class PaginationButton extends React.Component<
PaginationButtonProps,
PaginationButtonState
> {
constructor(props: PaginationButtonProps) {
super(props);
}
Expand All @@ -16,18 +19,18 @@ export default class PaginationButton extends React.Component<PaginationButtonPr
const buttonClasses = clsx(
"px-4 py-2 mx-1 rounded",
{
"bg-blue-500 text-white": this.props.page_number === this.props.current_page,
"bg-gray-200 text-gray-700": this.props.page_number !== this.props.current_page,
"hover:bg-blue-400": this.props.page_number === this.props.current_page,
"bg-blue-500 text-white":
this.props.page_number === this.props.current_page,
"bg-gray-200 text-gray-700":
this.props.page_number !== this.props.current_page,
"hover:bg-blue-400":
this.props.page_number === this.props.current_page,
},
"focus:outline-none focus:ring-2 focus:ring-blue-500"
"focus:outline-none focus:ring-2 focus:ring-blue-500",
);

return (
<button
onClick={this.handleClick}
className={buttonClasses}
>
<button onClick={this.handleClick} className={buttonClasses}>
{this.props.page_number}
</button>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,14 @@ import PaginationButton from "./pagination-button";
import PaginationProps from "../types/components/pagination-props";
import PaginationState from "../types/components/pagination-state";


export default class Pagination extends React.Component<PaginationProps, PaginationState> {
export default class Pagination extends React.Component<
PaginationProps,
PaginationState
> {
renderPagination() {
const total_pages = Math.ceil(this.props.total_items / this.props.items_per_page);
const total_pages = Math.ceil(
this.props.total_items / this.props.items_per_page,
);

const pages = [];
for (let i = 1; i <= total_pages; i++) {
Expand All @@ -16,7 +20,7 @@ export default class Pagination extends React.Component<PaginationProps, Paginat
current_page={this.props.current_page}
on_page_change={this.props.on_page_change}
page_number={i}
/>
/>,
);
}

Expand Down
Loading

0 comments on commit d5cefec

Please sign in to comment.