Make RS imports consistent

Author: jacbn

src/app/components/content/IsaacQuestion.tsx

@@ -10,7 +10,6 @@ import {
 import {IsaacContent} from "./IsaacContent";
 import * as ApiTypes from "../../../IsaacApiTypes";
 import {ContentDTO} from "../../../IsaacApiTypes";
-import * as RS from "reactstrap";
 import {
     below,
     determineFastTrackPrimaryAction,
@@ -35,6 +34,7 @@ import { submitInlineRegion, useInlineRegionPart } from "./IsaacInlineRegion";
 import LLMFreeTextQuestionFeedbackView from "../elements/LLMFreeTextQuestionFeedbackView";
 import { LLMFreeTextQuestionRemainingAttemptsView } from "../elements/LLMFreeTextQuestionRemainingAttemptsView";
 import { skipToken } from "@reduxjs/toolkit/query";
+import { Alert, Button, Col, Form, Row } from "reactstrap";
 
 function useCanAttemptQuestionType(questionType?: string): ReturnType<typeof useCanAttemptQuestionTypeQuery> {
     // We skip the check with the API if the question type is not a restricted question type
@@ -169,7 +169,7 @@ export const IsaacQuestion = withRouter(({doc, location}: {doc: ApiTypes.Questio
         <IsaacContent doc={validationResponse?.explanation as ContentDTO}/>;
 
     return <ConfidenceContext.Provider value={{recordConfidence}}>
-        <RS.Form onSubmit={(event) => {
+        <Form onSubmit={(event) => {
             if (event) {event.preventDefault();}
             submitCurrentAttempt(questionPart, doc.id as string, doc.type as string, currentGameboard, currentUser, dispatch);
             setHasSubmitted(true);
@@ -195,13 +195,13 @@ export const IsaacQuestion = withRouter(({doc, location}: {doc: ApiTypes.Questio
                 }
 
                 {/* CS Hint Reminder */}
-                {isAda && (!validationResponse || !correct || canSubmit) && <RS.Row>
-                    <RS.Col xl={{size: 10}} >
+                {isAda && (!validationResponse || !correct || canSubmit) && <Row>
+                    <Col xl={{size: 10}} >
                         {doc.hints && !!doc.hints.length && <p className="no-print mb-0">
                             <small>{"Don't forget to use the hints if you need help."}</small>
                         </p>}
-                    </RS.Col>
-                </RS.Row>}
+                    </Col>
+                </Row>}
 
                 {/* CS Hints */}
                 {isAda && <IsaacLinkHints questionPartId={doc.id as string} hints={doc.hints} />}
@@ -226,21 +226,21 @@ export const IsaacQuestion = withRouter(({doc, location}: {doc: ApiTypes.Questio
                             <span>You can view feedback for a specific box by either selecting it above, or by using the control panel below.</span>
                             <div className={`feedback-panel-${almost ? "light" : "dark"}`} role="note" aria-labelledby="answer-feedback">
                                 <div className={`w-100 mt-2 d-flex feedback-panel-header justify-content-around`}>
-                                    <RS.Button color="transparent" onClick={() => {
+                                    <Button color="transparent" onClick={() => {
                                         inlineContext.setFeedbackIndex(((inlineContext?.feedbackIndex as number - 1) + numInlineQuestions) % numInlineQuestions);
                                     }}>
                                         {below["xs"](deviceSize) ? "◀" : "Previous" }
-                                    </RS.Button>
-                                    <RS.Button color="transparent" className="inline-part-jump align-self-center" onClick={() => {
+                                    </Button>
+                                    <Button color="transparent" className="inline-part-jump align-self-center" onClick={() => {
                                         if (inlineContext.feedbackIndex) inlineContext.setFocusSelection(true);
                                     }}>
                                         Box {inlineContext.feedbackIndex as number + 1} of {numInlineQuestions}
-                                    </RS.Button>
-                                    <RS.Button color="transparent" onClick={() => {
+                                    </Button>
+                                    <Button color="transparent" onClick={() => {
                                         inlineContext.setFeedbackIndex((inlineContext?.feedbackIndex as number + 1) % numInlineQuestions);
                                     }}>
                                         {below["xs"](deviceSize) ? "▶" : "Next"}
-                                    </RS.Button>
+                                    </Button>
                                 </div>
                                 <div className="feedback-panel-content p-3">
                                     {validationFeedback}
@@ -251,9 +251,9 @@ export const IsaacQuestion = withRouter(({doc, location}: {doc: ApiTypes.Questio
                 </div>}
 
                 {/* Lock */}
-                {locked && <RS.Alert color="danger" className={"no-print"}>
+                {locked && <Alert color="danger" className={"no-print"}>
                     This question is locked until at least {<DateString formatter={TIME_ONLY}>{locked}</DateString>} to prevent repeated guessing.
-                </RS.Alert>}
+                </Alert>}
 
                 {/* Action Buttons */}
                 {recordConfidence ?
@@ -286,7 +286,7 @@ export const IsaacQuestion = withRouter(({doc, location}: {doc: ApiTypes.Questio
                     <IsaacTabbedHints questionPartId={doc.id as string} hints={doc.hints} />
                 </div>}
             </div>
-        </RS.Form>
+        </Form>
 
         {/* LLM free-text question validation response */}
         {isLLMFreeTextQuestion && showQuestionFeedback && validationResponse && showInlineAttemptStatus && !canSubmit &&

src/app/components/content/IsaacSymbolicQuestion.tsx

@@ -1,5 +1,4 @@
 import React, {ChangeEvent, lazy, Suspense, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from "react";
-import * as RS from "reactstrap";
 import {IsaacContentValueOrChildren} from "./IsaacContentValueOrChildren";
 import {FormulaDTO, IsaacSymbolicQuestionDTO} from "../../../IsaacApiTypes";
 import katex from "katex";
@@ -18,6 +17,7 @@ import {v4 as uuid_v4} from "uuid";
 import {IsaacQuestionProps} from "../../../IsaacAppTypes";
 import classNames from "classnames";
 import QuestionInputValidation from "../elements/inputs/QuestionInputValidation";
+import { InputGroup, Input, Button, UncontrolledTooltip } from "reactstrap";
 
 const InequalityModal = lazy(() => import("../elements/modals/inequality/InequalityModal"));
 
@@ -237,15 +237,15 @@ const IsaacSymbolicQuestion = ({doc, questionId, readonly}: IsaacQuestionProps<I
             </Suspense>}
             {!readonly && <div className="eqn-editor-input">
                 <div ref={hiddenEditorRef} className="equation-editor-text-entry" style={{height: 0, overflow: "hidden", visibility: "hidden"}} />
-                <RS.InputGroup className="my-2 separate-input-group">
-                    <RS.Input type="text" onChange={updateEquation} value={textInput}
+                <InputGroup className="my-2 separate-input-group">
+                    <Input type="text" onChange={updateEquation} value={textInput}
                         placeholder="Type your formula here"/>
                     <>
                         {siteSpecific(
-                            <RS.Button type="button" className="eqn-editor-help" id={helpTooltipId} tag="a" href="/solving_problems#symbolic_text">?</RS.Button>,
+                            <Button type="button" className="eqn-editor-help" id={helpTooltipId} tag="a" href="/solving_problems#symbolic_text">?</Button>,
                             <span id={helpTooltipId} className="icon-help-q my-auto"/>
                         )}
-                        {<RS.UncontrolledTooltip placement="top" autohide={false} target={helpTooltipId}>
+                        {<UncontrolledTooltip placement="top" autohide={false} target={helpTooltipId}>
                             Here are some examples of expressions you can type:<br />
                             <br />
                             a*x^2 + b x + c<br />
@@ -254,9 +254,9 @@ const IsaacSymbolicQuestion = ({doc, questionId, readonly}: IsaacQuestionProps<I
                             log(x_a, 2) == log(x_a) / log(2)<br />
                             <br />
                             As you type, the box below will preview the result.
-                        </RS.UncontrolledTooltip>}
+                        </UncontrolledTooltip>}
                     </>
-                </RS.InputGroup>
+                </InputGroup>
                 <QuestionInputValidation userInput={textInput} validator={symbolicInputValidator} />
                 {symbolList && <div className="eqn-editor-symbols">
                     The following symbols may be useful: <pre>{symbolList}</pre>

src/app/components/elements/Accordion.tsx

@@ -1,5 +1,4 @@
 import React, {useEffect, useRef, useState} from "react";
-import * as RS from "reactstrap";
 import {RouteComponentProps, withRouter} from "react-router-dom";
 import {
     above,
@@ -23,6 +22,7 @@ import {Markup} from "./markup";
 import {ReportAccordionButton} from "./ReportAccordionButton";
 import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow.js';
 import debounce from "lodash/debounce";
+import { Button, Row, UncontrolledTooltip, Collapse, Card, CardBody } from "reactstrap";
 
 interface AccordionsProps extends RouteComponentProps {
     id?: string;
@@ -148,7 +148,7 @@ export const Accordion = withRouter(({id, trustedTitle, index, children, startOp
 
     return <div className="accordion">
         <div className="accordion-header">
-            <RS.Button
+            <Button
                 id={anchorId || ""} block color="link"
                 tabIndex={disabled ? -1 : 0}
                 onFocus={(e) => {
@@ -184,7 +184,7 @@ export const Accordion = withRouter(({id, trustedTitle, index, children, startOp
                     )}
                 </span>}
                 <div className="accordion-title ps-3">
-                    <RS.Row className="h-100">
+                    <Row className="h-100">
                         <div className="d-flex align-items-center p-0 h-100">
                             {/* FIXME Revisit this maybe? https://github.com/isaacphysics/isaac-react-app/pull/473#discussion_r841556455 */}
                             <span className="accordion-part p-3 text-secondary text-nowrap">Part {ALPHABET[(index as number) % ALPHABET.length]}  {" "}</span>
@@ -197,29 +197,29 @@ export const Accordion = withRouter(({id, trustedTitle, index, children, startOp
                             </div>}
                             {typeof disabled === "string" && disabled.length > 0 && <div className={"p-3"}>
                                 <span id={`disabled-tooltip-${componentId}`} className="icon-help" />
-                                <RS.UncontrolledTooltip placement="right" target={`disabled-tooltip-${componentId}`}
+                                <UncontrolledTooltip placement="right" target={`disabled-tooltip-${componentId}`}
                                     modifiers={[preventOverflow]}>
                                     {disabled}
-                                </RS.UncontrolledTooltip>
+                                </UncontrolledTooltip>
                             </div>}
                         </div>
-                    </RS.Row>
+                    </Row>
                 </div>
 
                 {accordionIcon && isPhy && <span className={"accordion-icon align-self-center accordion-icon-" + accordionIcon}>
                     <span className="visually-hidden">{accordionIcon == "tick" ? "All questions in this part are answered correctly" : "All questions in this part are answered incorrectly"}</span>
                 </span>}
-            </RS.Button>
+            </Button>
         </div>
-        <RS.Collapse isOpen={isOpen} className="mt-1">
+        <Collapse isOpen={isOpen} className="mt-1">
             <AccordionSectionContext.Provider value={{id, clientId: clientId.current, open: isOpen}}>
-                <RS.Card>
-                    <RS.CardBody>
+                <Card>
+                    <CardBody>
                         {children}
-                    </RS.CardBody>
+                    </CardBody>
                     <ReportAccordionButton pageId={getPage()?.id} sectionId={id} sectionTitle={trustedTitle}/>
-                </RS.Card>
+                </Card>
             </AccordionSectionContext.Provider>
-        </RS.Collapse>
+        </Collapse>
     </div>;
 });

src/app/components/elements/BookChapter.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import * as RS from "reactstrap";
 import {closeActiveModal, openActiveModal, useAppDispatch} from "../../state";
 import {PageFragment} from "./PageFragment";
 import {SUBJECTS} from "../../services";
+import { Container } from "reactstrap";
 
 interface ChapterProps {
     chapterId: string;
@@ -25,7 +25,7 @@ export const BookChapter = ({chapterId, chapterTitle, chapterSubHeading, chapter
         }));
     }
 
-    return <RS.Container>
+    return <Container>
         <button onClick={() => bookChapterLoad()} className="btn book-chapter">
             <span className="icon-stack">
                 <svg className="book-contents-icon" viewBox="0 0 11.7 13.5">
@@ -35,5 +35,5 @@ export const BookChapter = ({chapterId, chapterTitle, chapterSubHeading, chapter
             </span>
             {chapterTitle} <br/><span className="chapter-subheading">{chapterSubHeading}</span>
         </button>
-    </RS.Container>;
+    </Container>;
 };