Use tab picker in place of existing implementations

Author: jacbn

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

@@ -1,5 +1,5 @@
-import React, { ChangeEvent, ReactNode, RefObject, useEffect, useRef, useState } from "react";
-import { Col, ColProps, RowProps, Input, Label, Offcanvas, OffcanvasBody, OffcanvasHeader, Row } from "reactstrap";
+import React, { ChangeEvent, RefObject, useEffect, useRef, useState } from "react";
+import { Col, ColProps, RowProps, Input, Offcanvas, OffcanvasBody, OffcanvasHeader, Row } from "reactstrap";
 import partition from "lodash/partition";
 import classNames from "classnames";
 import { AssignmentDTO, ContentSummaryDTO, IsaacConceptPageDTO, QuestionDTO } from "../../../../IsaacApiTypes";
@@ -13,6 +13,7 @@ import { getHumanContext } from "../../../services/pageContext";
 import { AssignmentState } from "../../pages/MyAssignments";
 import { ShowLoadingQuery } from "../../handlers/ShowLoadingQuery";
 import { Spacer } from "../Spacer";
+import { StyledTabPicker } from "../inputs/StyledTabPicker";
 
 export const SidebarLayout = (props: RowProps) => {
     const { className, ...rest } = props;
@@ -179,23 +180,7 @@ export const ConceptSidebar = (props: QuestionSidebarProps) => {
     return <QuestionSidebar {...props} />;
 };
 
-interface FilterCheckboxBaseProps extends React.HTMLAttributes<HTMLLabelElement> {
-    id: string;
-    checked?: boolean;
-    onInputChange?: React.ChangeEventHandler<HTMLInputElement> | undefined;
-    filterTitle: ReactNode;
-    conceptFilters?: Tag[];
-    count?: number;
-}
 
-const FilterCheckboxBase = (props: FilterCheckboxBaseProps) => {
-    const { id, checked, onInputChange, filterTitle, count, ...rest } = props;
-    return <Label {...rest} className="d-flex align-items-center filters-checkbox py-2 mb-1">
-        <Input id={`problem-search-${id}`} type="checkbox" checked={checked ?? false} onChange={onInputChange} />
-        <span className="ms-3">{filterTitle}</span>
-        {isDefined(count) && <span className="badge rounded-pill ms-2">{count}</span>}
-    </Label>;
-};
 
 interface FilterCheckboxProps extends React.HTMLAttributes<HTMLLabelElement> {
     tag: Tag;
@@ -212,17 +197,17 @@ const FilterCheckbox = (props : FilterCheckboxProps) => {
         setChecked(conceptFilters.includes(tag));
     }, [conceptFilters, tag]);
 
-    return <FilterCheckboxBase {...rest} id={tag.id} checked={checked} 
+    return <StyledTabPicker {...rest} id={tag.id} checked={checked} 
         onInputChange={(e: ChangeEvent<HTMLInputElement>) => setConceptFilters(f => e.target.checked ? [...f, tag] : f.filter(c => c !== tag))}
-        filterTitle={tag.title} count={tagCounts && isDefined(tagCounts[tag.id]) ? tagCounts[tag.id] : undefined}
+        checkboxTitle={tag.title} count={tagCounts && isDefined(tagCounts[tag.id]) ? tagCounts[tag.id] : undefined}
     />;
 };
 
 const AllFiltersCheckbox = (props: Omit<FilterCheckboxProps, "tag">) => {
     const { conceptFilters, setConceptFilters, tagCounts, ...rest } = props;
     const [previousFilters, setPreviousFilters] = useState<Tag[]>([]);
-    return <FilterCheckboxBase {...rest} 
-        id="all" checked={!conceptFilters.length} filterTitle="All" count={tagCounts && Object.values(tagCounts).reduce((a, b) => a + b, 0)}
+    return <StyledTabPicker {...rest} 
+        id="all" checked={!conceptFilters.length} checkboxTitle="All" count={tagCounts && Object.values(tagCounts).reduce((a, b) => a + b, 0)}
         onInputChange={(e) => {
             if (e.target.checked) {
                 setPreviousFilters(conceptFilters);
@@ -312,8 +297,8 @@ interface AssignmentStatusCheckboxProps extends React.HTMLAttributes<HTMLLabelEl
 
 const AssignmentStatusCheckbox = (props: AssignmentStatusCheckboxProps) => {
     const {status, statusFilter, setStatusFilter, count, ...rest} = props;
-    return <FilterCheckboxBase 
-        id={status ?? ""} filterTitle={status}
+    return <StyledTabPicker 
+        id={status ?? ""} checkboxTitle={status}
         onInputChange={() => !statusFilter.includes(status) ? setStatusFilter(c => [...c.filter(s => s !== AssignmentState.ALL), status]) : setStatusFilter(c => c.filter(s => s !== status))}
         checked={statusFilter.includes(status)}
         count={count} {...rest}
@@ -323,8 +308,8 @@ const AssignmentStatusCheckbox = (props: AssignmentStatusCheckboxProps) => {
 const AssignmentStatusAllCheckbox = (props: Omit<AssignmentStatusCheckboxProps, "status">) => {
     const { statusFilter, setStatusFilter, count, ...rest } = props;
     const [previousFilters, setPreviousFilters] = useState<AssignmentState[]>([]);
-    return <FilterCheckboxBase 
-        id="all" filterTitle="All"
+    return <StyledTabPicker 
+        id="all" checkboxTitle="All"
         onInputChange={(e) => {
             if (e.target.checked) {
                 setPreviousFilters(statusFilter);
@@ -505,4 +490,4 @@ export const MyAccountSidebar = (props: SidebarProps) => {
     return <ContentSidebar buttonTitle="Account settings" {...props}>
         {props.children}
     </ContentSidebar>;
-};
+};

src/app/components/pages/MyAccount.tsx

@@ -48,7 +48,6 @@ import {
     allRequiredInformationIsPresent,
     history,
     ifKeyIsEnter,
-    isAda,
     isDefined,
     isDobOldEnoughForSite,
     isFirstLoginInPersistence,
@@ -73,6 +72,7 @@ import {UserProfile} from '../elements/panels/UserProfile';
 import {UserContent} from '../elements/panels/UserContent';
 import {ExigentAlert} from "../elements/ExigentAlert";
 import {MainContent, MyAccountSidebar, SidebarLayout} from '../elements/layout/SidebarLayout';
+import { StyledTabPicker } from '../elements/inputs/StyledTabPicker';
 
 const UserMFA = lazy(() => import("../elements/panels/UserMFA"));
 
@@ -332,12 +332,10 @@ const AccountPageComponent = ({user, getChosenUserAuthSettings, error, userAuthS
                         <div className="section-divider mt-0"/>
                         <h5>Account settings</h5>
                         {ACCOUNT_TABS.filter(tab => !tab.hidden && !(editingOtherUser && tab.hiddenIfEditingOtherUser)).map(({tab, title}) => 
-                            <NavLink
-                                key={tab} tabIndex={0} className={classnames("sidebar-tab", {"active-tab": activeTab === tab})}
+                            <StyledTabPicker
+                                key={tab} id={title} tabIndex={0} checkboxTitle={title} checked={activeTab === tab}
                                 onClick={() => setActiveTab(tab)} onKeyDown={ifKeyIsEnter(() => setActiveTab(tab))}
-                            >
-                                {title}
-                            </NavLink>
+                            />
                         )}
                     </MyAccountSidebar>
                     <MainContent className="w-lg-50">