Skip to content

Commit

Permalink
select operative works now
Browse files Browse the repository at this point in the history
  • Loading branch information
jaaimino committed Oct 29, 2024
1 parent 0bf58cc commit dae2156
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 35 deletions.
4 changes: 2 additions & 2 deletions src/hooks/use-api/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ import React from "react";
export const API_PATH = "https://ktdash.app/api";

export function useAPI() {
const request = (endpoint, content) => {
const request = React.useCallback((endpoint, content) => {
return fetch(`${API_PATH}${endpoint}`, {
credentials: "include",
method: "GET",
...content
}).then(response => response.json()).catch(e => console.log(e));
}
}, [])
return { request }
}

Expand Down
48 changes: 30 additions & 18 deletions src/pages/dashboard/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,14 @@ import { IconEdit, IconListCheck, IconMinus, IconPlus, IconRefresh } from "@tabl
import useAuth from "../../hooks/use-auth";
import { useAppContext } from "../../hooks/app-context";
import { useLocalStorage } from "@mantine/hooks";
import { debounce, groupBy } from "lodash";
import { debounce, groupBy, keyBy } from "lodash";
import PloyCards from "../../components/ploy-cards";
import EquipmentCards from "../../components/equipment-cards";
import TacOpCards from "../../components/tacop-cards";
import { SelectOperativesModal } from "./modals";
import { modals } from "@mantine/modals";
import { notifications } from "@mantine/notifications";
import useWindowDimensions from "../../hooks/get-window-dimensions";

export default function Dashboard() {
const { user: userData } = useAuth();
Expand All @@ -21,35 +23,45 @@ export default function Dashboard() {
const [dashboardRosterId] = useLocalStorage({ key: 'dashboardrosterid' });
const { data: roster, isFetching: isFetchinigTeam, setData: setRoster } = useRequest(`/roster.php?rid=${dashboardRosterId}&loadrosterdetail=1`, {}, !!dashboardRosterId);
const [, navigate] = useLocation();
const { width } = useWindowDimensions();
const isSmallScreen = width <= 600;
const canEdit = userData?.username === roster?.username;
const killteam = roster?.killteam;
const isNarrativeEquipment = (equip) => equip.eqid.includes('BS-') || equip.eqid.includes('BH-');
const groupedEquipment = groupBy(roster?.rostereqs?.filter(equip => !isNarrativeEquipment(equip)), 'eqcategory');
const handleUpdateOperatives = React.useCallback((operatives) => {
console.log(operatives);
// const updatedOperative = {
// ...operative,
// hidden: checked ? 0 : 1
// }
// setRoster({
// ...roster,
// operatives: roster.operatives?.map((op) => op.rosteropid === operative.rosteropid ? updatedOperative : op)
// });
// api.request(`/rosteroperative.php`, {
// method: "POST",
// body: JSON.stringify(updatedOperative)
// })
const oldOperatives = keyBy(roster.operatives, 'rosteropid');
setRoster({
...roster,
operatives
});
let opCount = 0;
operatives.forEach((op) => {
// Only send requests for operatives we actually toggled
if (oldOperatives[op.rosteropid].hidden !== op.hidden) {
opCount += 1;
api.request(`/rosteroperative.php`, {
method: "POST",
body: JSON.stringify(op)
})
}
})
notifications.show({
title: 'Updated Operatives',
message: `Successfully updated ${opCount} operatives.`,
})
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [roster]);
const handleShowSelectOperatives = React.useCallback(() => {
modals.open({
fullScreen: isSmallScreen,
modalId: "select-operatives",
size: "xl",
title: <Title order={2}>Select Operatives</Title>,
children: <SelectOperativesModal roster={roster} onClose={handleUpdateOperatives} />
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [roster]);
}, [roster, isSmallScreen]);
// eslint-disable-next-line react-hooks/exhaustive-deps
const handleSaveUpdateRoster = React.useCallback(debounce((newRoster) => {
api.request(`/roster.php`, {
Expand Down Expand Up @@ -214,7 +226,7 @@ export default function Dashboard() {
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [canEdit, handleShowSelectOperatives, handleUpdateOperatives]);
}, [canEdit, handleShowSelectOperatives]);
if (isFetchinigTeam) {
return (<LoadingOverlay visible={isFetchinigTeam} />);
}
Expand All @@ -226,7 +238,7 @@ export default function Dashboard() {
<Container py="md" px="md" fluid>
<Stack>
<Card>
<SimpleGrid cols={{ base: 3 }} spacing="sm" py="sm">
<SimpleGrid cols={{ base: 3 }} spacing={0} py="sm">
<Stack justify="center" align="center" gap="xs">
<Title order={3}>CP</Title>
<Group gap="xs">
Expand Down Expand Up @@ -271,7 +283,7 @@ export default function Dashboard() {
<Tabs.Panel value="operatives">
<SimpleGrid cols={{ base: 1, sm: 2, lg: 3, xl: 4 }} mt="md" spacing="md">
{roster?.operatives?.filter((op) => !op.hidden)?.map((operative) => (
<OperativeCard woundTracker onUpdateWounds={(wounds) => handleUpdateOperativeWounds(operative, wounds)} operative={operative} />
<OperativeCard collapsible woundTracker onUpdateWounds={(wounds) => handleUpdateOperativeWounds(operative, wounds)} operative={operative} />
))}
</SimpleGrid>
</Tabs.Panel>
Expand Down
23 changes: 11 additions & 12 deletions src/pages/dashboard/modals/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,9 @@ function MiniOperativeCard(props) {
}

export function SelectOperativesModal(props) {
const { onClose = () => {}, roster } = props;
const { onClose = () => { }, roster } = props;

const [ operatives, setOperatives ] = React.useState(roster.operatives || []);
const [operatives, setOperatives] = React.useState(roster.operatives || []);

const handleUpdateRoster = () => {
onClose(operatives);
Expand All @@ -66,19 +66,18 @@ export function SelectOperativesModal(props) {
</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="operatives">
<form
onSubmit={handleUpdateRoster}
>
<Stack pt="md">
<Stack pt="md">
<SimpleGrid cols={{ base: 1, sm: 2 }}>
{operatives.map((operative) => (
<MiniOperativeCard operative={operative} onChange={handleUpdateOperative} />

))}
<Group justify="flex-end">
<Button variant="default" onClick={() => modals.close("select-operatives")}>Cancel</Button>
<Button type="submit">Save</Button>
</Group>
</Stack>
</form>
</SimpleGrid>
<Group justify="flex-end">
<Button variant="default" onClick={() => modals.close("select-operatives")}>Cancel</Button>
<Button type="submit" onClick={() => handleUpdateRoster()}>Save</Button>
</Group>
</Stack>
</Tabs.Panel>
<Tabs.Panel value="composition">
<Box pt="md">
Expand Down
11 changes: 8 additions & 3 deletions src/pages/roster/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { useLocalStorage } from "@mantine/hooks";
import { OperativeModal, UpdateRosterModal } from "./modals";
import { modals } from "@mantine/modals";
import { notifications } from "@mantine/notifications";
import useWindowDimensions from "../../hooks/get-window-dimensions";

export default function Roster() {
const { user: userData } = useAuth();
Expand All @@ -20,6 +21,8 @@ export default function Roster() {
const [, setDashboardrosterId] = useLocalStorage({ key: 'dashboardrosterid' });
const [, navigate] = useLocation();
const canEdit = userData?.username === roster?.username;
const { width } = useWindowDimensions();
const isSmallScreen = width <= 600;
const showTeamComp = () =>
modals.open({
size: "lg",
Expand Down Expand Up @@ -49,7 +52,7 @@ export default function Roster() {
"opname": operative.opname,
"wepids": operative?.weapons?.map((weapon) => weapon.wepid).join(","),
"eqids": operative?.equipments?.map((equip) => equip.eqid).join(","),
"notes": ""
"notes": operative.notes
}
api.request("/rosteroperative.php", {
method: "POST",
Expand Down Expand Up @@ -80,7 +83,7 @@ export default function Roster() {
"opname": operative.opname,
"wepids": operative?.weapons?.map((weapon) => weapon.wepid).join(","),
"eqids": operative?.equipments?.map((equip) => equip.eqid).join(","),
"notes": ""
"notes": operative.notes
}
api.request("/rosteroperative.php", {
method: "POST",
Expand All @@ -101,6 +104,7 @@ export default function Roster() {
}, [roster]);
const handleShowEditOperative = (operative) => {
modals.open({
fullScreen: isSmallScreen,
modalId: "edit-operative",
size: "xl",
title: <Title order={2}>Edit Operative</Title>,
Expand Down Expand Up @@ -167,6 +171,7 @@ export default function Roster() {
text: "Add Operative",
onClick: () => {
modals.open({
fullScreen: isSmallScreen,
modalId: "add-operative",
size: "xl",
title: <Title order={2}>Add Operative</Title>,
Expand Down Expand Up @@ -230,7 +235,7 @@ export default function Roster() {
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [canEdit, handleAddOperative]);
}, [canEdit, isSmallScreen, handleAddOperative]);
if (isFetchinigTeam) {
return (<LoadingOverlay visible={isFetchinigTeam} />);
}
Expand Down

0 comments on commit dae2156

Please sign in to comment.