Prettier

Author: RoyEJohnson

src/app/components/contact-info/contact-info.tsx

@@ -4,7 +4,9 @@ import {useIntl} from 'react-intl';
 import SchoolSelector from '~/components/school-selector/school-selector';
 import './contact-info.scss';
 
-export default function ContactInfo({children}: React.PropsWithChildren<Record<never, never>>) {
+export default function ContactInfo({
+    children
+}: React.PropsWithChildren<Record<never, never>>) {
     const {formatMessage} = useIntl();
 
     return (

src/app/components/dialog/dialog.tsx

@@ -4,7 +4,10 @@ import RawHTML from '~/components/jsx-helpers/raw-html';
 import cn from 'classnames';
 import './dialog.scss';
 
-function PutAway({noTitle, onClick}: {
+function PutAway({
+    noTitle,
+    onClick
+}: {
     noTitle?: boolean;
     onClick?: () => void;
 }) {

src/app/components/faq-section/faq-section.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import AccordionGroup from '~/components/accordion-group/accordion-group';
 
-export default function FAQ({heading, items}: {
+export default function FAQ({
+    heading,
+    items
+}: {
     heading: string;
     items: Parameters<typeof AccordionGroup>[0]['items'];
 }) {
     return (
-        <div className='boxed'>
+        <div className="boxed">
             <h1>{heading}</h1>
             <div className="articles">
                 <AccordionGroup items={items} noScroll />

src/app/components/form-checkboxgroup/form-checkboxgroup.tsx

@@ -3,39 +3,56 @@ import React from 'react';
 type Item = {
     label: string;
     value: string;
-}
+};
 
-function Option({item, name, onChange, checked}: {
+function Option({
+    item,
+    name,
+    onChange,
+    checked
+}: {
     item: Item;
     name: string;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
     checked: boolean;
 }) {
-    const inputProps = item.value ? {
-        name,
-        value: item.value
-    } : {};
+    const inputProps = item.value
+        ? {
+              name,
+              value: item.value
+          }
+        : {};
 
     return (
         <div className="checkbox-control-group">
             <label>
-                <input type="checkbox" {...inputProps} checked={checked} onChange={onChange} />
+                <input
+                    type="checkbox"
+                    {...inputProps}
+                    checked={checked}
+                    onChange={onChange}
+                />
                 {item.label}
             </label>
         </div>
     );
 }
 
-export default function FormCheckboxgroup(
-    {name, label, longLabel, instructions, options, onChange}: {
-        name: string;
-        label?: string;
-        longLabel?: string;
-        instructions?: string;
-        options: Item[];
-        onChange?: (arr: unknown[]) => void;
-    }
-) {
+export default function FormCheckboxgroup({
+    name,
+    label,
+    longLabel,
+    instructions,
+    options,
+    onChange
+}: {
+    name: string;
+    label?: string;
+    longLabel?: string;
+    instructions?: string;
+    options: Item[];
+    onChange?: (arr: unknown[]) => void;
+}) {
     const checkedItems = React.useMemo(() => new window.Set(), []);
     const onItemChange = React.useCallback(
         ({target: {value, checked}}: React.ChangeEvent<HTMLInputElement>) => {
@@ -50,17 +67,19 @@ export default function FormCheckboxgroup(
     return (
         <div className="form-checkboxgroup">
             {label && <label className="field-label">{label}</label>}
-            {longLabel && <label className="field-long-label">{longLabel}</label>}
+            {longLabel && (
+                <label className="field-long-label">{longLabel}</label>
+            )}
             {instructions && <label className="hint">{instructions}</label>}
-            {
-                options.map((item) =>
-                    <Option
-                        item={item} name={name} key={item.value}
-                        checked={checkedItems.has(item.value)}
-                        onChange={onItemChange}
-                    />
-                )
-            }
+            {options.map((item) => (
+                <Option
+                    item={item}
+                    name={name}
+                    key={item.value}
+                    checked={checkedItems.has(item.value)}
+                    onChange={onItemChange}
+                />
+            ))}
         </div>
     );
 }

src/app/components/form-elements/form-elements.tsx

@@ -3,10 +3,14 @@ import useSelectList from '~/helpers/use-select-list';
 import cn from 'classnames';
 import './form-elements.scss';
 
-function Option({text, active, onClick}: {
+function Option({
+    text,
+    active,
+    onClick
+}: {
     text: string;
     active: boolean;
-    onClick?: React.MouseEventHandler<HTMLDivElement>
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
 }) {
     const ref = React.useRef<HTMLDivElement>(null);
 
@@ -17,12 +21,7 @@ function Option({text, active, onClick}: {
     }, [active]);
 
     return (
-        <div
-            className={cn({active})}
-            role="option"
-            onClick={onClick}
-            ref={ref}
-        >
+        <div className={cn({active})} role="option" onClick={onClick} ref={ref}>
             {text}
         </div>
     );
@@ -31,29 +30,37 @@ function Option({text, active, onClick}: {
 type OptionType = {
     label: string;
     value: string;
-}
+};
 
-function SuggestionList({options, activeIndex, accept}: {
+function SuggestionList({
+    options,
+    activeIndex,
+    accept
+}: {
     options: OptionType[];
     accept: (o: OptionType) => void;
     activeIndex: number;
 }) {
     return (
         <div className="suggestion-list" role="listbox">
-            {
-                options.map((opt, i) =>
-                    <Option
-                        key={opt.value} active={activeIndex === i}
-                        onClick={() => accept(opt)}
-                        text={opt.label}
-                    />
-                )
-            }
+            {options.map((opt, i) => (
+                <Option
+                    key={opt.value}
+                    active={activeIndex === i}
+                    onClick={() => accept(opt)}
+                    text={opt.label}
+                />
+            ))}
         </div>
     );
 }
 
-export function FilteringSelect({options, inputProps, accept, accepted}: {
+export function FilteringSelect({
+    options,
+    inputProps,
+    accept,
+    accepted
+}: {
     options: OptionType[];
     inputProps: JSX.IntrinsicAttributes;
     accept: (o: unknown) => void;
@@ -85,10 +92,13 @@ export function FilteringSelect({options, inputProps, accept, accepted}: {
     return (
         <div className="input-with-suggestions">
             <input type="text" {...inputProps} onKeyDown={wrappedKeyDown} />
-            {
-                !accepted &&
-                <SuggestionList options={options} activeIndex={activeIndex} accept={accept} />
-            }
+            {!accepted && (
+                <SuggestionList
+                    options={options}
+                    activeIndex={activeIndex}
+                    accept={accept}
+                />
+            )}
         </div>
     );
 }