Add typescript import sorter and sort LA Letter Builder code. (#2227)

* Add better CSS for la letter builder site

* Run lingui:extract

* Add ask name step'

* Add import sorter and sort LA Letter builder folder

* Order import members desc

.devcontainer/devcontainer.json

@@ -57,7 +57,8 @@
 		"ms-python.python",
 		"esbenp.prettier-vscode",
 		"dbaeumer.vscode-eslint",
-		"ms-python.vscode-pylance"
+		"ms-python.vscode-pylance",
+		"mike-co.import-sorter"
 	],
 
 	"mounts": [

.import-sorter.json

@@ -0,0 +1,4 @@
+{
+  "importSorter.importStringConfiguration.quoteMark": "double",
+  "importSorter.sortConfiguration.importMembers.direction": "desc"
+}

frontend/lib/laletterbuilder/about.tsx

@@ -1,11 +1,13 @@
 import React from "react";
-import Page from "../ui/page";
+
+import { Trans, t } from "@lingui/macro";
+
+import { li18n } from "../i18n-lingui";
+import { JustfixLogo } from "../norent/components/logo"; // TODO: change this
+import { JumpArrow, getNorentImageSrc } from "../norent/homepage"; // TODO: move these out of NoRent
 import { OutboundLink } from "../ui/outbound-link";
-import { getNorentImageSrc, JumpArrow } from "../norent/homepage"; // TODO: move these out of NoRent
+import Page from "../ui/page";
 import { StaticImage } from "../ui/static-image";
-import { JustfixLogo } from "../norent/components/logo"; // TODO: change this
-import { li18n } from "../i18n-lingui";
-import { t, Trans } from "@lingui/macro";
 
 type PartnerLogo = {
   name: string;

frontend/lib/laletterbuilder/components/footer.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { FooterLanguageToggle } from "../../ui/language-toggle";
 import { LegalDisclaimer } from "../../ui/legal-disclaimer";
 

frontend/lib/laletterbuilder/homepage.tsx

@@ -1,5 +1,7 @@
-import { Trans } from "@lingui/macro";
 import React from "react";
+
+import { Trans } from "@lingui/macro";
+
 import Page from "../ui/page";
 
 export const LALetterBuilderHomepage: React.FC<{}> = () => (

frontend/lib/laletterbuilder/letter-builder/confirmation.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { ProgressStepProps } from "../../progress/progress-step-route";
 import Page from "../../ui/page";
 

frontend/lib/laletterbuilder/letter-builder/error-pages.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { AlreadyLoggedInErrorPage } from "../../common-steps/error-pages";
 import { LALetterBuilderRoutes } from "../route-info";
 

frontend/lib/laletterbuilder/letter-builder/route-info.ts

@@ -1,5 +1,5 @@
-import { ROUTE_PREFIX } from "../../util/route-util";
 import { createStartAccountOrLoginRouteInfo } from "../../start-account-or-login/route-info";
+import { ROUTE_PREFIX } from "../../util/route-util";
 
 export type LALetterBuilderRouteInfo = ReturnType<
   typeof createLALetterBuilderRouteInfo

frontend/lib/laletterbuilder/letter-builder/routes.tsx

@@ -1,15 +1,15 @@
+import { AskNameStep } from "../../common-steps/ask-name";
 import {
-  buildProgressRoutesComponent,
   ProgressRoutesProps,
+  buildProgressRoutesComponent,
 } from "../../progress/progress-routes";
+import { skipStepsIf } from "../../progress/skip-steps-if";
 import { createStartAccountOrLoginSteps } from "../../start-account-or-login/routes";
+import { isUserLoggedIn } from "../../util/session-predicates";
 import { LALetterBuilderRoutes } from "../route-info";
 import { LALetterBuilderConfirmation } from "./confirmation";
-import { LALetterBuilderWelcome } from "./welcome";
-import { AskNameStep } from "../../common-steps/ask-name";
-import { skipStepsIf } from "../../progress/skip-steps-if";
-import { isUserLoggedIn } from "../../util/session-predicates";
 import { LALetterBuilderOnboardingStep } from "./step-decorators";
+import { LALetterBuilderWelcome } from "./welcome";
 
 const LALetterBuilderAskName = LALetterBuilderOnboardingStep(AskNameStep);
 

frontend/lib/laletterbuilder/letter-builder/welcome.tsx

@@ -1,12 +1,14 @@
-import { t, Trans } from "@lingui/macro";
 import React from "react";
 import { Link } from "react-router-dom";
+
+import { assertNotNull } from "@justfixnyc/util";
+import { Trans, t } from "@lingui/macro";
+
 import { SimpleClearAnonymousSessionButton } from "../../forms/clear-anonymous-session-button";
+import { li18n } from "../../i18n-lingui";
 import { ProgressStepProps } from "../../progress/progress-step-route";
 import Page from "../../ui/page";
 import { LALetterBuilderRoutes } from "../route-info";
-import { assertNotNull } from "@justfixnyc/util";
-import { li18n } from "../../i18n-lingui";
 
 export const LALetterBuilderWelcome: React.FC<ProgressStepProps> = (props) => {
   return (

frontend/lib/laletterbuilder/route-info.ts

@@ -1,5 +1,5 @@
-import { createRoutesForSite, ROUTE_PREFIX } from "../util/route-util";
 import { createDevRouteInfo } from "../dev/route-info";
+import { ROUTE_PREFIX, createRoutesForSite } from "../util/route-util";
 import { createLALetterBuilderRouteInfo } from "./letter-builder/route-info";
 
 function createLocalizedRouteInfo(prefix: string) {

frontend/lib/laletterbuilder/routes.tsx

@@ -1,13 +1,15 @@
-import loadable from "@loadable/component";
-import { friendlyLoad, LoadingPage } from "../networking/loading-page";
 import React from "react";
+import { Switch, RouteComponentProps, Route } from "react-router-dom";
+
+import loadable from "@loadable/component";
+
+import { LoadingPage, friendlyLoad } from "../networking/loading-page";
+import { AlternativeLogoutPage } from "../pages/logout-alt-page";
 import { NotFound } from "../pages/not-found";
-import { Route, RouteComponentProps, Switch } from "react-router-dom";
-import { LALetterBuilderRoutes as Routes } from "./route-info";
-import { LALetterBuilderHomepage } from "./homepage";
 import { LALetterBuilderAboutPage } from "./about";
-import { AlternativeLogoutPage } from "../pages/logout-alt-page";
+import { LALetterBuilderHomepage } from "./homepage";
 import { LALetterBuilderFormsRoutes } from "./letter-builder/routes";
+import { LALetterBuilderRoutes as Routes } from "./route-info";
 
 const LoadableDevRoutes = loadable(
   () => friendlyLoad(import("../dev/routes")),

frontend/lib/laletterbuilder/site.tsx

@@ -1,20 +1,23 @@
-import loadable from "@loadable/component";
+import classnames from "classnames";
 import React, { useContext } from "react";
-import { Link, Route, useLocation } from "react-router-dom";
-import type { AppSiteProps } from "../app";
+import { useLocation, Route, Link } from "react-router-dom";
+
+import { Trans } from "@lingui/macro";
+import loadable from "@loadable/component";
+
+import { AppContext } from "../app-context";
 import { createLinguiCatalogLoader } from "../i18n-lingui";
 import { LoadingOverlayManager } from "../networking/loading-page";
-import { LALetterBuilderRouteComponent } from "./routes";
+import { NavbarLanguageDropdown } from "../ui/language-toggle";
+import Navbar from "../ui/navbar";
+import { LALetterBuilderFooter } from "./components/footer";
 import {
   LALetterBuilderRoutes as Routes,
   getLALetterBuilderRoutesForPrimaryPages,
 } from "./route-info";
-import Navbar from "../ui/navbar";
-import { AppContext } from "../app-context";
-import { Trans } from "@lingui/macro";
-import { NavbarLanguageDropdown } from "../ui/language-toggle";
-import classnames from "classnames";
-import { LALetterBuilderFooter } from "./components/footer";
+import { LALetterBuilderRouteComponent } from "./routes";
+
+import type { AppSiteProps } from "../app";
 
 export const LALetterBuilderLinguiI18n = createLinguiCatalogLoader({
   en: loadable.lib(

frontend/lib/laletterbuilder/tests/site.test.tsx

@@ -1,7 +1,9 @@
 import React from "react";
-import { AppTesterPal } from "../../tests/app-tester-pal";
 import { Route } from "react-router-dom";
+
 import { waitFor } from "@testing-library/react";
+
+import { AppTesterPal } from "../../tests/app-tester-pal";
 import LALetterBuilderSite from "../site";
 
 describe("LALetterBuilderSite", () => {