Skip to content

Commit f180e3e

Browse files
DaneEverittDaneEveritt
committed
Attempting to get an edit modal to display without a re-render
1 parent 40c377f commit f180e3e

File tree

4 files changed

+97
-52
lines changed

4 files changed

+97
-52
lines changed

‎resources/scripts/api/server/schedules/getServerSchedule.ts‎

Whitespace-only changes.

‎resources/scripts/components/server/schedules/EditScheduleModal.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import { Schedule } from '@/api/server/schedules/getServerSchedules';
3+
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
4+
5+
type Props = {
6+
schedule?: Schedule;
7+
} & RequiredModalProps;
8+
9+
export default ({ schedule, ...props }: Props) => {
10+
return (
11+
<Modal {...props}>
12+
<p>Testing</p>
13+
</Modal>
14+
);
15+
};

‎resources/scripts/components/server/schedules/ScheduleContainer.tsx‎

Lines changed: 29 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,35 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React, { useMemo, useState } from 'react';
22
import getServerSchedules, { Schedule } from '@/api/server/schedules/getServerSchedules';
33
import { ServerContext } from '@/state/server';
44
import Spinner from '@/components/elements/Spinner';
5-
import { Link } from 'react-router-dom';
6-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
7-
import { faCalendarAlt } from '@fortawesome/free-solid-svg-icons/faCalendarAlt';
8-
import classNames from 'classnames';
9-
import format from 'date-fns/format';
5+
import { Link, RouteComponentProps } from 'react-router-dom';
106
import FlashMessageRender from '@/components/FlashMessageRender';
7+
import ScheduleRow from '@/components/server/schedules/ScheduleRow';
8+
import { httpErrorToHuman } from '@/api/http';
119
import { Actions, useStoreActions } from 'easy-peasy';
1210
import { ApplicationStore } from '@/state';
13-
import { httpErrorToHuman } from '@/api/http';
11+
import EditScheduleModal from '@/components/server/schedules/EditScheduleModal';
12+
13+
interface Params {
14+
schedule?: string;
15+
}
1416

15-
export default () => {
17+
export default ({ history, match, location: { hash } }: RouteComponentProps<Params>) => {
1618
const { id, uuid } = ServerContext.useStoreState(state => state.server.data!);
1719
const [ schedules, setSchedules ] = useState<Schedule[] | null>(null);
20+
const { clearFlashes, addError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
1821

19-
const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
20-
21-
useEffect(() => {
22+
useMemo(() => {
2223
clearFlashes('schedules');
2324
getServerSchedules(uuid)
2425
.then(schedules => setSchedules(schedules))
2526
.catch(error => {
2627
addError({ message: httpErrorToHuman(error), key: 'schedules' });
2728
console.error(error);
2829
});
29-
}, [ uuid, setSchedules ]);
30+
}, [ setSchedules ]);
31+
32+
const matched = (schedules || []).find(schedule => schedule.id === Number(hash.match(/\d+$/) || 0));
3033

3134
return (
3235
<div className={'my-10 mb-6'}>
@@ -35,49 +38,23 @@ export default () => {
3538
<Spinner size={'large'} centered={true}/>
3639
:
3740
schedules.map(schedule => (
38-
<Link key={schedule.id} to={`/servers/${id}/schedules/${schedule.id}`} className={'grey-row-box'}>
39-
<div className={'icon'}>
40-
<FontAwesomeIcon icon={faCalendarAlt} fixedWidth={true}/>
41-
</div>
42-
<div className={'flex-1 ml-4'}>
43-
<p>{schedule.name}</p>
44-
<p className={'text-xs text-neutral-400'}>
45-
Last run at: {schedule.lastRunAt ? format(schedule.lastRunAt, 'MMM Do [at] h:mma') : 'never'}
46-
</p>
47-
</div>
48-
<div className={'flex items-center mx-8'}>
49-
<div>
50-
<p className={'font-medium text-center'}>{schedule.cron.minute}</p>
51-
<p className={'text-2xs text-neutral-500 uppercase'}>Minute</p>
52-
</div>
53-
<div className={'ml-4'}>
54-
<p className={'font-medium text-center'}>{schedule.cron.hour}</p>
55-
<p className={'text-2xs text-neutral-500 uppercase'}>Hour</p>
56-
</div>
57-
<div className={'ml-4'}>
58-
<p className={'font-medium text-center'}>{schedule.cron.dayOfMonth}</p>
59-
<p className={'text-2xs text-neutral-500 uppercase'}>Day (Month)</p>
60-
</div>
61-
<div className={'ml-4'}>
62-
<p className={'font-medium text-center'}>*</p>
63-
<p className={'text-2xs text-neutral-500 uppercase'}>Month</p>
64-
</div>
65-
<div className={'ml-4'}>
66-
<p className={'font-medium text-center'}>{schedule.cron.dayOfWeek}</p>
67-
<p className={'text-2xs text-neutral-500 uppercase'}>Day (Week)</p>
68-
</div>
69-
</div>
70-
<div>
71-
<p className={classNames('py-1 px-3 rounded text-xs uppercase', {
72-
'bg-green-600': schedule.isActive,
73-
'bg-neutral-400': !schedule.isActive,
74-
})}>
75-
{schedule.isActive ? 'Active' : 'Inactive'}
76-
</p>
77-
</div>
41+
<Link
42+
key={schedule.id}
43+
to={`/server/${id}/schedules/#/schedule/${schedule.id}`}
44+
className={'grey-row-box'}
45+
>
46+
<ScheduleRow schedule={schedule}/>
7847
</Link>
7948
))
8049
}
50+
{matched &&
51+
<EditScheduleModal
52+
schedule={matched}
53+
visible={true}
54+
appear={true}
55+
onDismissed={() => history.push(match.url)}
56+
/>
57+
}
8158
</div>
8259
);
8360
};

‎resources/scripts/components/server/schedules/ScheduleRow.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
import { Schedule } from '@/api/server/schedules/getServerSchedules';
3+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4+
import { faCalendarAlt } from '@fortawesome/free-solid-svg-icons/faCalendarAlt';
5+
import format from 'date-fns/format';
6+
import classNames from 'classnames';
7+
8+
export default ({ schedule }: { schedule: Schedule }) => (
9+
<>
10+
<div className={'icon'}>
11+
<FontAwesomeIcon icon={faCalendarAlt} fixedWidth={true}/>
12+
</div>
13+
<div className={'flex-1 ml-4'}>
14+
<p>{schedule.name}</p>
15+
<p className={'text-xs text-neutral-400'}>
16+
Last run
17+
at: {schedule.lastRunAt ? format(schedule.lastRunAt, 'MMM Do [at] h:mma') : 'never'}
18+
</p>
19+
</div>
20+
<div className={'flex items-center mx-8'}>
21+
<div>
22+
<p className={'font-medium text-center'}>{schedule.cron.minute}</p>
23+
<p className={'text-2xs text-neutral-500 uppercase'}>Minute</p>
24+
</div>
25+
<div className={'ml-4'}>
26+
<p className={'font-medium text-center'}>{schedule.cron.hour}</p>
27+
<p className={'text-2xs text-neutral-500 uppercase'}>Hour</p>
28+
</div>
29+
<div className={'ml-4'}>
30+
<p className={'font-medium text-center'}>{schedule.cron.dayOfMonth}</p>
31+
<p className={'text-2xs text-neutral-500 uppercase'}>Day (Month)</p>
32+
</div>
33+
<div className={'ml-4'}>
34+
<p className={'font-medium text-center'}>*</p>
35+
<p className={'text-2xs text-neutral-500 uppercase'}>Month</p>
36+
</div>
37+
<div className={'ml-4'}>
38+
<p className={'font-medium text-center'}>{schedule.cron.dayOfWeek}</p>
39+
<p className={'text-2xs text-neutral-500 uppercase'}>Day (Week)</p>
40+
</div>
41+
</div>
42+
<div>
43+
<p
44+
className={classNames('py-1 px-3 rounded text-xs uppercase', {
45+
'bg-green-600': schedule.isActive,
46+
'bg-neutral-400': !schedule.isActive,
47+
})}
48+
>
49+
{schedule.isActive ? 'Active' : 'Inactive'}
50+
</p>
51+
</div>
52+
</>
53+
);

0 commit comments

Comments
 (0)