Skip to content

Commit 24d0d6e

Browse files
committed
Use tab picker in place of existing implementations
1 parent 24fba54 commit 24d0d6e

File tree

2 files changed

+16
-33
lines changed

2 files changed

+16
-33
lines changed

src/app/components/elements/layout/SidebarLayout.tsx

Lines changed: 12 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React, { ChangeEvent, ReactNode, RefObject, useEffect, useRef, useState } from "react";
2-
import { Col, ColProps, RowProps, Input, Label, Offcanvas, OffcanvasBody, OffcanvasHeader, Row } from "reactstrap";
1+
import React, { ChangeEvent, RefObject, useEffect, useRef, useState } from "react";
2+
import { Col, ColProps, RowProps, Input, Offcanvas, OffcanvasBody, OffcanvasHeader, Row } from "reactstrap";
33
import partition from "lodash/partition";
44
import classNames from "classnames";
55
import { AssignmentDTO, ContentSummaryDTO, IsaacConceptPageDTO, QuestionDTO } from "../../../../IsaacApiTypes";
@@ -13,6 +13,7 @@ import { getHumanContext } from "../../../services/pageContext";
1313
import { AssignmentState } from "../../pages/MyAssignments";
1414
import { ShowLoadingQuery } from "../../handlers/ShowLoadingQuery";
1515
import { Spacer } from "../Spacer";
16+
import { StyledTabPicker } from "../inputs/StyledTabPicker";
1617

1718
export const SidebarLayout = (props: RowProps) => {
1819
const { className, ...rest } = props;
@@ -179,23 +180,7 @@ export const ConceptSidebar = (props: QuestionSidebarProps) => {
179180
return <QuestionSidebar {...props} />;
180181
};
181182

182-
interface FilterCheckboxBaseProps extends React.HTMLAttributes<HTMLLabelElement> {
183-
id: string;
184-
checked?: boolean;
185-
onInputChange?: React.ChangeEventHandler<HTMLInputElement> | undefined;
186-
filterTitle: ReactNode;
187-
conceptFilters?: Tag[];
188-
count?: number;
189-
}
190183

191-
const FilterCheckboxBase = (props: FilterCheckboxBaseProps) => {
192-
const { id, checked, onInputChange, filterTitle, count, ...rest } = props;
193-
return <Label {...rest} className="d-flex align-items-center filters-checkbox py-2 mb-1">
194-
<Input id={`problem-search-${id}`} type="checkbox" checked={checked ?? false} onChange={onInputChange} />
195-
<span className="ms-3">{filterTitle}</span>
196-
{isDefined(count) && <span className="badge rounded-pill ms-2">{count}</span>}
197-
</Label>;
198-
};
199184

200185
interface FilterCheckboxProps extends React.HTMLAttributes<HTMLLabelElement> {
201186
tag: Tag;
@@ -212,17 +197,17 @@ const FilterCheckbox = (props : FilterCheckboxProps) => {
212197
setChecked(conceptFilters.includes(tag));
213198
}, [conceptFilters, tag]);
214199

215-
return <FilterCheckboxBase {...rest} id={tag.id} checked={checked}
200+
return <StyledTabPicker {...rest} id={tag.id} checked={checked}
216201
onInputChange={(e: ChangeEvent<HTMLInputElement>) => setConceptFilters(f => e.target.checked ? [...f, tag] : f.filter(c => c !== tag))}
217-
filterTitle={tag.title} count={tagCounts && isDefined(tagCounts[tag.id]) ? tagCounts[tag.id] : undefined}
202+
checkboxTitle={tag.title} count={tagCounts && isDefined(tagCounts[tag.id]) ? tagCounts[tag.id] : undefined}
218203
/>;
219204
};
220205

221206
const AllFiltersCheckbox = (props: Omit<FilterCheckboxProps, "tag">) => {
222207
const { conceptFilters, setConceptFilters, tagCounts, ...rest } = props;
223208
const [previousFilters, setPreviousFilters] = useState<Tag[]>([]);
224-
return <FilterCheckboxBase {...rest}
225-
id="all" checked={!conceptFilters.length} filterTitle="All" count={tagCounts && Object.values(tagCounts).reduce((a, b) => a + b, 0)}
209+
return <StyledTabPicker {...rest}
210+
id="all" checked={!conceptFilters.length} checkboxTitle="All" count={tagCounts && Object.values(tagCounts).reduce((a, b) => a + b, 0)}
226211
onInputChange={(e) => {
227212
if (e.target.checked) {
228213
setPreviousFilters(conceptFilters);
@@ -312,8 +297,8 @@ interface AssignmentStatusCheckboxProps extends React.HTMLAttributes<HTMLLabelEl
312297

313298
const AssignmentStatusCheckbox = (props: AssignmentStatusCheckboxProps) => {
314299
const {status, statusFilter, setStatusFilter, count, ...rest} = props;
315-
return <FilterCheckboxBase
316-
id={status ?? ""} filterTitle={status}
300+
return <StyledTabPicker
301+
id={status ?? ""} checkboxTitle={status}
317302
onInputChange={() => !statusFilter.includes(status) ? setStatusFilter(c => [...c.filter(s => s !== AssignmentState.ALL), status]) : setStatusFilter(c => c.filter(s => s !== status))}
318303
checked={statusFilter.includes(status)}
319304
count={count} {...rest}
@@ -323,8 +308,8 @@ const AssignmentStatusCheckbox = (props: AssignmentStatusCheckboxProps) => {
323308
const AssignmentStatusAllCheckbox = (props: Omit<AssignmentStatusCheckboxProps, "status">) => {
324309
const { statusFilter, setStatusFilter, count, ...rest } = props;
325310
const [previousFilters, setPreviousFilters] = useState<AssignmentState[]>([]);
326-
return <FilterCheckboxBase
327-
id="all" filterTitle="All"
311+
return <StyledTabPicker
312+
id="all" checkboxTitle="All"
328313
onInputChange={(e) => {
329314
if (e.target.checked) {
330315
setPreviousFilters(statusFilter);
@@ -505,4 +490,4 @@ export const MyAccountSidebar = (props: SidebarProps) => {
505490
return <ContentSidebar buttonTitle="Account settings" {...props}>
506491
{props.children}
507492
</ContentSidebar>;
508-
};
493+
};

src/app/components/pages/MyAccount.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@ import {
4848
allRequiredInformationIsPresent,
4949
history,
5050
ifKeyIsEnter,
51-
isAda,
5251
isDefined,
5352
isDobOldEnoughForSite,
5453
isFirstLoginInPersistence,
@@ -73,6 +72,7 @@ import {UserProfile} from '../elements/panels/UserProfile';
7372
import {UserContent} from '../elements/panels/UserContent';
7473
import {ExigentAlert} from "../elements/ExigentAlert";
7574
import {MainContent, MyAccountSidebar, SidebarLayout} from '../elements/layout/SidebarLayout';
75+
import { StyledTabPicker } from '../elements/inputs/StyledTabPicker';
7676

7777
const UserMFA = lazy(() => import("../elements/panels/UserMFA"));
7878

@@ -332,12 +332,10 @@ const AccountPageComponent = ({user, getChosenUserAuthSettings, error, userAuthS
332332
<div className="section-divider mt-0"/>
333333
<h5>Account settings</h5>
334334
{ACCOUNT_TABS.filter(tab => !tab.hidden && !(editingOtherUser && tab.hiddenIfEditingOtherUser)).map(({tab, title}) =>
335-
<NavLink
336-
key={tab} tabIndex={0} className={classnames("sidebar-tab", {"active-tab": activeTab === tab})}
335+
<StyledTabPicker
336+
key={tab} id={title} tabIndex={0} checkboxTitle={title} checked={activeTab === tab}
337337
onClick={() => setActiveTab(tab)} onKeyDown={ifKeyIsEnter(() => setActiveTab(tab))}
338-
>
339-
{title}
340-
</NavLink>
338+
/>
341339
)}
342340
</MyAccountSidebar>
343341
<MainContent className="w-lg-50">

0 commit comments

Comments
 (0)