texts condition

Author: ap-justin

src/pages/nonprofit-outreach/api.ts

@@ -2,18 +2,11 @@ import type { LoaderFunction } from "@vercel/remix";
 import type { NonprofitItem } from "types/mongodb/nonprofits";
 import { nonprofits } from ".server/mongodb/db";
 
-interface Stats {
-  assets: { min: number | null; max: number | null };
-  income: { min: number | null; max: number | null };
-  revenue: { min: number | null; max: number | null };
-}
-
 export interface LoaderData {
   items: NonprofitItem[];
   page: number;
   size: number;
   num_items: number;
-  stats?: Stats;
 }
 
 class Filter {
@@ -116,6 +109,7 @@ export const loader: LoaderFunction = async ({ request }) => {
     income_amount,
     asset_amount,
     revenue_amount,
+    sort_name,
   } = Object.fromEntries(url.searchParams.entries());
 
   const filter = new Filter();
@@ -134,6 +128,7 @@ export const loader: LoaderFunction = async ({ request }) => {
   filter.opts({ organization_code });
   filter.opts({ exempt_organization_status_code });
   filter.opts({ filing_requirement_code });
+  filter.opts({ sort_name });
   filter.starts_with({ ntee_code });
   filter.range({ income_amount });
   filter.range({ asset_amount });
@@ -144,7 +139,7 @@ export const loader: LoaderFunction = async ({ request }) => {
   const collection = await nonprofits;
   const items = await collection
     .find(filter.all)
-    .sort({ asset_amount: -1 })
+    .sort({ revenue_amount: -1 })
     .skip(skip)
     .limit(+limit)
     .toArray();

src/pages/nonprofit-outreach/index.tsx

@@ -17,7 +17,10 @@ const _usd = new Intl.NumberFormat("en-US", {
 export default function Page() {
   const data = useCachedLoaderData<LoaderData>();
   const [params, setParams] = useSearchParams();
-  const active_filters = Array.from(params.entries()).map(([k, v]) => (
+  const { sort, sort_direction, ...filters } = Object.fromEntries(
+    params.entries()
+  );
+  const active_filters = Object.entries(filters).map(([k, v]) => (
     <div key={k} className="flex items-center gap-x-2">
       <button
         type="button"
@@ -54,7 +57,7 @@ export default function Page() {
         )}
         <p className="font-bold my-2"> found: {data.num_items}</p>
         <div className="overflow-x-auto relative">
-          <table className="self-start border-collapse overflow-x-auto [&_th]:text-left [&_th]:align-top [&_th]:text-balance [&_td]:align-top [&_td,&_th]:p-2 [&_td,&_th]:border [&_td,&_th]:border-gray-l3">
+          <table className="self-start border-collapse overflow-x-auto [&_th]:text-left [&_th]:align-top [&_th]:text-balance [&_td]:text-nowrap [&_td,&_th]:p-2 [&_td,&_th]:border [&_td,&_th]:border-gray-l3">
             <thead>
               <tr>
                 <th>EIN</th>
@@ -219,6 +222,7 @@ export default function Page() {
                   <TextFilter
                     num={1}
                     label="NTEE code"
+                    description="can query partial e.g. A (starts with A) or complete (A80)"
                     _key="ntee_code"
                     values={(k) => params.get(k)?.split(",") || []}
                     onChange={(vs, k) => {
@@ -278,6 +282,7 @@ export default function Page() {
                   <TextFilter
                     num={4}
                     label="Classification code"
+                    description="NPOs may have up to 4 classification codes"
                     _key="classification_code"
                     values={(k) => params.get(k)?.split(",") || []}
                     onChange={(vs, k) => {
@@ -354,6 +359,7 @@ export default function Page() {
                   <TextFilter
                     num={3}
                     label="Activity code"
+                    description="NPOs may have up to 3 activity codes"
                     _key="activity_code"
                     values={(k) => params.get(k)?.split(",") || []}
                     onChange={(vs, k) => {
@@ -425,7 +431,26 @@ export default function Page() {
                     }}
                   />
                 </th>
-                <th>Sort Name</th>
+                <th>
+                  <ListFilter
+                    name="Sort name"
+                    _key="sort_name"
+                    filter={{
+                      values: (k) => params.get(k)?.split(",") || [],
+                      optsFn: async () => [],
+                      onChange(vs, k) {
+                        setParams((p) => {
+                          if (vs.length === 0) {
+                            p.delete(k);
+                            return p;
+                          }
+                          p.set(k, vs.join(","));
+                          return p;
+                        });
+                      },
+                    }}
+                  />
+                </th>
               </tr>
             </thead>
             <tbody>

src/pages/nonprofit-outreach/text-filter.tsx

@@ -8,6 +8,7 @@ import { useForm } from "react-hook-form";
 
 interface Props {
   label: string;
+  description: string;
   _key: string;
   num: number;
   values?: (k: string) => string[];
@@ -71,6 +72,7 @@ export function TextFilter(props: Props) {
         <CheckField {...register("exists")} classes="mb-2 text-xs">
           Exists
         </CheckField>
+        <p className="text-xs text-gray max-w-40">{props.description}</p>
         {Array.from({ length: props.num }, (_, i) => (
           <Field
             key={i}