[refactor] replace Scroll List with Search List for NGO index page

[fix] many GitHub copilot bugs
[optimize] update Upstream packages

Author: TechQuery

.gitignore

@@ -26,10 +26,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env*local
 
 # vercel
 .vercel

components/Map/CityStatisticMap.tsx

@@ -10,7 +10,7 @@ import systemStore from '../../models/System';
 const ChinaMap = dynamic(() => import('./ChinaMap'), { ssr: false });
 
 export interface CityStatisticMapProps {
-  data: OrganizationStatistic['city'];
+  data: OrganizationStatistic['coverageArea'];
   onChange?: (city: string) => any;
 }
 
@@ -60,4 +60,4 @@ export class CityStatisticMap extends ObservedComponent<CityStatisticMapProps> {
       />
     );
   }
-}
+}

components/Navigator/MainNavigator.tsx

@@ -55,7 +55,7 @@ const topNavBarMenu = ({ t }: typeof i18n): MenuItem[] => [
   {
     title: t('ngo'),
     subs: [
-      { href: '/ngo', title: t('china_public_interest_map') },
+      { href: '/ngo', title: t('China_NGO_Map') },
       { href: '/ngo/landscape', title: t('china_public_interest_landscape') },
       { 
         href: 'https://open-source-bazaar.feishu.cn/wiki/VGrMwiweVivWrHkTcvpcJTjjnoY', 

components/Organization/ChinaPublicInterestMap.tsx

@@ -6,13 +6,7 @@ import { TableCellAttachment, TableCellMedia, TableCellValue } from 'mobx-lark';
 import { DataObject } from 'mobx-restful';
 import { isEmpty } from 'web-utility';
 
-import {
-  API_Host,
-  GithubToken,
-  isServer,
-  ProxyBaseURL,
-  LARK_API_HOST,
-} from './configuration';
+import { API_Host, GithubToken, isServer, ProxyBaseURL, LARK_API_HOST } from './configuration';
 
 export const ownClient = new HTTPClient({
   baseURI: `${API_Host}/api/`,
@@ -66,8 +60,13 @@ export function fileURLOf(field: TableCellValue, cache = false) {
   return URI;
 }
 
-// Strapi client for China NGO Database
 export const strapiClient = new HTTPClient({
   baseURI: 'https://china-ngo-db.onrender.com/api/',
   responseType: 'json',
+}).use(({ request }, next) => {
+  request.headers = {
+    ...request.headers,
+    'Strapi-Response-Format': 'v4',
+  };
+  return next();
 });

models/Base.ts

@@ -1,43 +1,54 @@
 import { observable } from 'mobx';
-import { StrapiListModel, Base } from 'mobx-strapi';
-import { groupBy } from 'web-utility';
+import { Base, Searchable, SearchableFilter, StrapiListModel } from 'mobx-strapi';
+import { changeMonth, formatDate, groupBy } from 'web-utility';
 
+import { Organization } from '@open-source-bazaar/china-ngo-database';
 import { strapiClient } from './Base';
 
-// Define the organization data structure similar to China NGO database
-export interface Organization extends Base {
-  name: string;
-  description?: string;
-  type?: string;
-  city?: string;
-  province?: string;
-  tags?: string[];
-  website?: string;
-  logo?: {
-    data?: {
-      attributes: {
-        url: string;
-      };
-    };
-  };
-  year?: number;
-}
-
 export type OrganizationStatistic = Record<
-  'type' | 'tag' | 'year' | 'city',
+  'coverageArea' | 'locale' | 'entityType',
   Record<string, number>
 >;
 
-export class OrganizationModel extends StrapiListModel<Organization> {
+export class OrganizationModel extends Searchable<Organization & Base>(StrapiListModel) {
   baseURI = 'organizations';
   client = strapiClient;
 
+  searchKeys = ['name', 'description', 'coverageArea'] as const;
+
   @observable
   accessor categoryMap: Record<string, Organization[]> = {};
 
+  makeFilter(
+    pageIndex: number,
+    pageSize: number,
+    { keywords, ...filter }: SearchableFilter<Organization & Base>,
+  ) {
+    if (keywords) return super.makeFilter(pageIndex, pageSize, { keywords, ...filter });
+
+    const meta = super.makeFilter(pageIndex, pageSize, filter);
+
+    const { establishedDate } = filter;
+
+    const timeRangeFilter =
+      establishedDate?.length === 4
+        ? { $gte: `${establishedDate}-01-01`, $lt: `${+establishedDate + 1}-01-01` }
+        : establishedDate?.length === 7
+          ? {
+              $gte: `${establishedDate}-01`,
+              $lte: `${formatDate(changeMonth(establishedDate, 1), 'YYYY-MM')}-01`,
+            }
+          : {};
+    return { ...meta, filters: { ...meta.filters, establishedDate: timeRangeFilter } };
+  }
+
   async groupAllByTags() {
     const allData = await this.getAll();
 
-    return (this.categoryMap = groupBy(allData, ({ tags }) => tags?.[0] || 'Other'));
+    return (this.categoryMap = groupBy(
+      allData,
+      ({ services }) => services?.flatMap(({ serviceCategory }) => serviceCategory!) || [],
+    ));
   }
-}
+}
+export default new OrganizationModel();

models/Organization.ts

@@ -1,6 +1,13 @@
 import { observable } from 'mobx';
 import { BiSearchModelClass } from 'mobx-lark';
-import { BaseModel } from 'mobx-restful';
+import { BaseModel, DataObject, ListModel, toggle } from 'mobx-restful';
+import { Base, SearchableFilter } from 'mobx-strapi';
+import { Constructor } from 'web-utility';
+
+import { ownClient } from './Base';
+import { OrganizationModel } from './Organization';
+
+export type SearchModel<T extends DataObject = any> = ListModel<T, SearchableFilter<T>>;
 
 export type SearchPageMeta = Pick<
   InstanceType<BiSearchModelClass>,
@@ -10,7 +17,9 @@ export type SearchPageMeta = Pick<
 export type CityCoordinateMap = Record<string, [number, number]>;
 
 export class SystemModel extends BaseModel {
-  searchMap: Record<string, BiSearchModelClass> = {};
+  searchMap = {
+    NGO: OrganizationModel,
+  } as Record<string, Constructor<SearchModel<Base>>>;
 
   @observable
   accessor screenNarrow = false;
@@ -27,22 +36,14 @@ export class SystemModel extends BaseModel {
 
   updateScreen = () =>
     (this.screenNarrow =
-      globalThis.innerWidth < globalThis.innerHeight ||
-      globalThis.innerWidth < 992);
+      globalThis.innerWidth < globalThis.innerHeight || globalThis.innerWidth < 992);
 
+  @toggle('downloading')
   async getCityCoordinate() {
-    // Placeholder for city coordinate data
-    // In production, this would load from an API or static data
-    this.cityCoordinate = {
-      '北京': [116.4074, 39.9042],
-      '上海': [121.4737, 31.2304],
-      '广州': [113.2644, 23.1291],
-      '深圳': [114.0579, 22.5431],
-      '杭州': [120.1551, 30.2741],
-      '成都': [104.0668, 30.5728],
-      '武汉': [114.3054, 30.5931],
-      '西安': [108.9402, 34.3416],
-    };
+    const { body } = await ownClient.get<CityCoordinateMap>(
+      'https://idea2app.github.io/public-meta-data/china-city-coordinate.json',
+    );
+    return (this.cityCoordinate = body!);
   }
 }