- {path && (
+ {orgPath(chapter) && (
@@ -639,18 +551,7 @@ function ChapterCard({ chapter, color, open, onOpen }: ChapterCardProps) {
);
}
-function ChapterDetail({
- chapter,
- region,
- onClose,
-}: {
- chapter: Chapter;
- region: Region;
- onClose: () => void;
-}) {
- const path = orgPath(chapter);
- const color = colorOf(region);
-
+function ChapterDetail({ chapter, region, onClose }) {
/* "Led by" comes from affiliations rather than a text field, so
it lists real people and stays empty until they exist. */
const leads = (chapter.leadership ?? [])
@@ -659,23 +560,21 @@ function ChapterDetail({
)
.join(", ");
- const rows = (
- [
- ["Region", region.name],
- ["Where", chapter.venue],
- ["Meets", chapter.meets],
- ["Led by", leads],
- ["Since", chapter.started],
- ] satisfies Array<[label: string, value: string | null | undefined]>
- ).filter(([, v]) => v);
+ const rows = [
+ ["Region", region.name],
+ ["Where", chapter.venue],
+ ["Meets", chapter.meets],
+ ["Led by", leads],
+ ["Since", chapter.started],
+ ].filter(([, v]) => v);
return (
-
+
{chapter.name}
@@ -686,13 +585,13 @@ function ChapterDetail({
onClick={onClose}
aria-label="Close details"
className="shrink-0 h-8 w-8 rounded-full flex items-center justify-center text-lg font-700 transition-transform duration-200 hover:scale-110"
- style={{ border: `1px solid ${color}`, color: color }}
+ style={{ border: `1px solid ${region.color}`, color: region.color }}
>
×
-
+
{rows.length > 0 && (
@@ -710,11 +609,11 @@ function ChapterDetail({
)}
- {path && (
+ {orgPath(chapter) && (
Chapter page
@@ -725,7 +624,7 @@ function ChapterDetail({
target="_blank"
rel="noopener noreferrer"
className="py-2 px-5 rounded-xl font-700 text-sm transition-transform duration-200 hover:scale-105"
- style={{ border: `1px solid ${color}`, color: color }}
+ style={{ border: `1px solid ${region.color}`, color: region.color }}
>
Visit site
@@ -735,7 +634,7 @@ function ChapterDetail({
Get in touch
@@ -745,19 +644,7 @@ function ChapterDetail({
);
}
-type ChapterGridProps = Pick
& {
- openId: string | null;
- setOpenId: (id: string | null) => void;
-};
-
-function ChapterGrid({
- regions,
- chapters,
- chaptersIn,
- subtextFor,
- openId,
- setOpenId,
-}: ChapterGridProps) {
+function ChapterGrid({ regions, chapters, chaptersIn, subtextFor, openId, setOpenId }) {
// Only regions that actually have chapters get a grid.
const populated = regions
.map(region => ({ region, list: chaptersIn(region.id) }))
@@ -769,15 +656,14 @@ function ChapterGrid({
{populated.map(({ region, list }) => {
const subtext = subtextFor(region);
- const color = colorOf(region);
return (
-
+
{region.name}
@@ -810,7 +696,7 @@ function ChapterGrid({
setOpenId(openId === c.id ? null : c.id)}
/>
@@ -831,12 +717,8 @@ function ChapterGrid({
}
/* The control for the section heading's action bar. */
-export function OrgMapToggle({
- view,
- setView,
- accent,
-}: Pick) {
- const btn = (active: boolean) => ({
+export function OrgMapToggle({ view, setView, accent }) {
+ const btn = active => ({
background: active ? accent : "transparent",
color: active ? "#ffffff" : accent,
});
@@ -866,14 +748,7 @@ export function OrgMapToggle({
);
}
-export default function OrgListMap({
- view = "map",
- accent = FALLBACK_COLOR,
-}: {
- /** "map" or "grid". */
- view?: string;
- accent?: string;
-}) {
+export default function OrgListMap({ view = "map", accent = FALLBACK_COLOR }) {
const {
loading,
error,
@@ -890,16 +765,16 @@ export default function OrgListMap({
subtextFor,
} = useCommunity();
- const [selected, setSelected] = useState(null);
- const [hovered, setHovered] = useState(null);
- const [openId, setOpenId] = useState(null); // no card open on arrival
+ const [selected, setSelected] = useState(null);
+ const [hovered, setHovered] = useState(null);
+ const [openId, setOpenId] = useState(null); // no card open on arrival
// The list scrolls itself to whatever the map or legend points at.
- const listRef = useRef(null);
- const regionRefs = useRef>({});
- const chapterRefs = useRef>({});
+ const listRef = useRef(null);
+ const regionRefs = useRef({});
+ const chapterRefs = useRef({});
- const scrollListTo = (el: HTMLElement | null | undefined) => {
+ const scrollListTo = el => {
const box = listRef.current;
if (!box || !el) return;
// Only when the list is its own scroll area (lg and up). Below
@@ -917,7 +792,7 @@ export default function OrgListMap({
// Clicking a tile jumps to its first chapter when it has one,
// otherwise to the region it belongs to.
- const pickArea = (code: string) => {
+ const pickArea = code => {
const chapter = chapters.find(c => c.area_code === code);
if (chapter && chapterRefs.current[chapter.id]) {
return scrollListTo(chapterRefs.current[chapter.id]);
@@ -926,7 +801,7 @@ export default function OrgListMap({
if (region) scrollListTo(regionRefs.current[region.id]);
};
- const shell = (children: ReactNode) => (
+ const shell = children => (
{children}
@@ -962,7 +837,7 @@ export default function OrgListMap({
const shared = { selected, setSelected, hovered, setHovered };
const onMapIds = new Set(regionAreas.map(a => a.region_id));
- const block = (region: Region, indent: boolean) => (
+ const block = (region, indent) => (
&
- ButtonHTMLAttributes;
-
-function RowButton({ as: As = "button", color, children, ...rest }: RowButtonProps) {
+function RowButton({ as: As = "button", color, children, ...rest }) {
return (
;
- color: string;
-}) {
+function OrgMark({ org, color }) {
const [failed, setFailed] = useState(false);
if (org.logo && !failed) {
@@ -115,9 +94,7 @@ function OrgMark({
);
}
-type RowLabels = { pageLabel: string; siteLabel: string };
-
-function OrgRow({ org, pageLabel, siteLabel }: RowLabels & { org: OrganizationListItem }) {
+function OrgRow({ org, pageLabel, siteLabel }) {
const [open, setOpen] = useState(false);
const panelId = useId();
@@ -268,12 +245,7 @@ function OrgRow({ org, pageLabel, siteLabel }: RowLabels & { org: OrganizationLi
);
}
-function Block({
- title,
- orgs,
- pageLabel,
- siteLabel,
-}: RowLabels & { title?: string; orgs: OrganizationListItem[] }) {
+function Block({ title, orgs, pageLabel, siteLabel }) {
if (orgs.length === 0) return null;
return (
@@ -290,30 +262,7 @@ function Block({
);
}
-const byName = (a: OrganizationListItem, b: OrganizationListItem) =>
- a.name.localeCompare(b.name);
-
-/* One heading's worth of the list. Labels override the list's own. */
-type OrgGroup = {
- key: string;
- title: string;
- pageLabel?: string;
- siteLabel?: string;
-};
-
-type OrgListVerticalProps = {
- kind?: OrgKind;
- title?: string;
- groups?: OrgGroup[];
- /** Which group key an organization files under. */
- groupBy?: (org: OrganizationListItem) => string | null | undefined;
- accent?: string;
- pageLabel?: string;
- siteLabel?: string;
- /** Null keeps the API's order. */
- sort?: ((a: OrganizationListItem, b: OrganizationListItem) => number) | null;
- empty?: string;
-};
+const byName = (a, b) => a.name.localeCompare(b.name);
export default function OrgListVertical({
kind,
@@ -325,10 +274,10 @@ export default function OrgListVertical({
siteLabel = "Visit site",
sort = byName,
empty = "· Nothing to show here just yet ·",
-}: OrgListVerticalProps) {
+}) {
const { organizations, loading, error } = useOrganizations(kind);
- const shell = (children: ReactNode) => (
+ const shell = children => (
{children}
);