Skip to content

Commit

Permalink
Clean up EditPerson page
Browse files Browse the repository at this point in the history
  • Loading branch information
@danieljames-dj
danieljames-dj committed Oct 25, 2024
1 parent 27c28df commit 6c6fe0f
Show file tree
Hide file tree
Showing 3 changed files with 90 additions and 92 deletions.
4 changes: 2 additions & 2 deletions app/webpacker/components/Panel/PanelPages.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
generateDbTokenUrl,
} from '../../lib/requests/routes.js.erb';
import PostingCompetitionsTable from '../PostingCompetitions';
import EditPerson from './pages/EditPerson';
import BannedCompetitorsPage from './pages/BannedCompetitorsPage';
import GroupsManagerAdmin from './pages/GroupsManagerAdmin';
import Translators from './pages/Translators';
Expand All @@ -26,6 +25,7 @@ import OfficersEditor from './pages/OfficersEditor';
import RegionsAdmin from './pages/RegionsAdmin';
import RegionManager from './pages/RegionManager';
import DownloadVoters from './pages/DownloadVoters';
import EditPersonPage from './pages/EditPersonPage';

const DELEGATE_HANDBOOK_LINK = 'https://documents.worldcubeassociation.org/edudoc/delegate-handbook/delegate-handbook.pdf';

Expand All @@ -36,7 +36,7 @@ export default {
},
[PANEL_PAGES.editPerson]: {
name: 'Edit Person',
component: EditPerson,
component: EditPersonPage,
},
[PANEL_PAGES.regionsManager]: {
name: 'Regions Manager',
Expand Down
124 changes: 34 additions & 90 deletions ...mponents/Panel/pages/EditPerson/index.jsx → ...l/pages/EditPersonPage/EditPersonForm.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
import React, { useState, useEffect } from 'react';
import {
Button, Form, Icon, Item, Message,
Button, Form, Icon, Message,
} from 'semantic-ui-react';
import _ from 'lodash';
import { adminCheckRecordsUrl, apiV0Urls } from '../../../../lib/requests/routes.js.erb';
import { apiV0Urls, adminCheckRecordsUrl } from '../../../../lib/requests/routes.js.erb';
import useSaveAction from '../../../../lib/hooks/useSaveAction';
import WcaSearch from '../../../SearchWidget/WcaSearch';
import SEARCH_MODELS from '../../../SearchWidget/SearchModel';
import Loading from '../../../Requests/Loading';
import I18n from '../../../../lib/i18n';
import { genders, countries } from '../../../../lib/wca-data.js.erb';
import useQueryParams from '../../../../lib/hooks/useQueryParams';
import useLoadedData from '../../../../lib/hooks/useLoadedData';
import Errored from '../../../Requests/Errored';
import UtcDatePicker from '../../../wca/UtcDatePicker';
Expand All @@ -27,7 +24,7 @@ const countryOptions = _.map(countries.byIso2, (country) => ({
value: country.iso2,
}));

function EditPersonForm({ wcaId, clearWcaId, setResponse }) {
export default function EditPersonForm({ wcaId }) {
const {
data: personFetchData, loading, error: personError,
} = useLoadedData(
Expand All @@ -37,6 +34,7 @@ function EditPersonForm({ wcaId, clearWcaId, setResponse }) {
const [editedUserDetails, setEditedUserDetails] = useState();
const [originalUserDetails, setOriginalUserDetails] = useState();
const [incorrectClaimCount, setIncorrectClaimCount] = useState(0);
const [response, setResponse] = useState();
const { save, saving } = useSaveAction();

useEffect(() => {
Expand Down Expand Up @@ -100,20 +98,32 @@ function EditPersonForm({ wcaId, clearWcaId, setResponse }) {

return (
<>
<Item>
<Item.Content>
<Item.Header>
WCA ID:
{' '}
{person.wca_id}
</Item.Header>
<Item.Description>
<Button onClick={() => clearWcaId()}>
Clear
</Button>
</Item.Description>
</Item.Content>
</Item>
{response != null && (
<Message
success={response.success}
error={!response.success}
content={response.message}
>
<Message.Content>
{response.success && (
<>
Success!
<br />
</>
)}
{response.showCountryChangeWarning && (
<>
The change you made may have affected national and continental records, be sure to
run
{' '}
<a href={adminCheckRecordsUrl}>check_regional_record_markers</a>
.
</>
)}
{!response.success && response.message}
</Message.Content>
</Message>
)}
<Form>
<Form.Input
label={I18n.t('activerecord.attributes.user.name')}
Expand Down Expand Up @@ -172,78 +182,12 @@ function EditPersonForm({ wcaId, clearWcaId, setResponse }) {
Destroy
</Button>
{incorrectClaimCount > 0 && (
<Button onClick={handleResetClaimCount}>
<Icon name="redo" />
Reset Claim Count
</Button>
<Button onClick={handleResetClaimCount}>
<Icon name="redo" />
Reset Claim Count
</Button>
)}
</Form>
</>
);
}

function EditPerson() {
const [response, setResponse] = useState();
const [queryParams, updateQueryParam] = useQueryParams();
const [loading, setLoading] = useState(false);
const { wcaId } = queryParams;

if (loading) return <Loading />;

return (
<>
<div>
To know the difference between fix and update, refer to the Delegate Handbook&apos;s
&#34;Requesting Changes to Personal Data&#34; section.
</div>
{response != null && (
<Message
success={response.success}
error={!response.success}
content={response.message}
>
<Message.Content>
{response.success && (
<>
Success!
<br />
</>
)}
{response.showCountryChangeWarning && (
<>
The change you made may have affected national and continental records, be sure to
run
{' '}
<a href={adminCheckRecordsUrl}>check_regional_record_markers</a>
.
</>
)}
{!response.success && response.message}
</Message.Content>
</Message>
)}
{wcaId
? (
<EditPersonForm
wcaId={wcaId}
clearWcaId={() => {
setLoading(true);
updateQueryParam('wcaId', '');
}}
setResponse={setResponse}
/>
)
: (
<WcaSearch
onChange={(e, { value }) => {
setLoading(true);
updateQueryParam('wcaId', value.id);
}}
multiple={false}
model={SEARCH_MODELS.person}
/>
)}
</>
);
}
export default EditPerson;
54 changes: 54 additions & 0 deletions app/webpacker/components/Panel/pages/EditPersonPage/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React, { useState } from 'react';
import { Button, Item } from 'semantic-ui-react';
import WcaSearch from '../../../SearchWidget/WcaSearch';
import SEARCH_MODELS from '../../../SearchWidget/SearchModel';
import Loading from '../../../Requests/Loading';
import useQueryParams from '../../../../lib/hooks/useQueryParams';
import EditPersonForm from './EditPersonForm';

export default function EditPersonPage() {
const [queryParams, updateQueryParam] = useQueryParams();
const [loading, setLoading] = useState(false);
const { wcaId } = queryParams;

if (loading) return <Loading />;

return (
<>
<div>
To know the difference between fix and update, refer to the Delegate Handbook&apos;s
&#34;Requesting Changes to Personal Data&#34; section.
</div>
{wcaId
? (
<>
<Item>
<Item.Content>
<Item.Header>{`WCA ID: ${wcaId}`}</Item.Header>
<Item.Description>
<Button onClick={() => {
setLoading(true);
updateQueryParam('wcaId', '');
}}
>
Clear
</Button>
</Item.Description>
</Item.Content>
</Item>
<EditPersonForm wcaId={wcaId} />
</>
)
: (
<WcaSearch
onChange={(e, { value }) => {
setLoading(true);
updateQueryParam('wcaId', value.id);
}}
multiple={false}
model={SEARCH_MODELS.person}
/>
)}
</>
);
}

0 comments on commit 6c6fe0f

Please sign in to comment.