[refactor] migrate NGO models to BI Table API based on MobX-Lark 2.8

[optimize] update Upstream packages

Author: TechQuery

.env

@@ -11,7 +11,12 @@ NEXT_PUBLIC_ACTIVITY_TABLE_ID = tblREEMxDOECZZrK
 NEXT_PUBLIC_PROJECT_TABLE_ID = tblGnY6Hm0nTSBR9
 NEXT_PUBLIC_AWARD_TABLE_ID = tblmYd5V5BMngAp2
 
-NEXT_PUBLIC_STRAPI_API_HOST = https://china-ngo-db.onrender.com/api/
+NEXT_PUBLIC_STRAPI_API_HOST = https://test.nomad-home.cn/api/Lark/
+NEXT_PUBLIC_NGO_BASE_ID = Kfs0bHJZhaKtJLs3uBTcnynnnNf
+NEXT_PUBLIC_NGO_TABLE_ID = tbl3eTvwgMGukhqL
+NEXT_PUBLIC_NGO_YEAR_STATISTIC_TABLE_ID = tblNWHacXaiEYC50
+NEXT_PUBLIC_NGO_CITY_STATISTIC_TABLE_ID = tblFFyaTEpGAaZNl
+NEXT_PUBLIC_NGO_TYPE_STATISTIC_TABLE_ID = tblZeAOFqH6zX6Tr
 
 SMTP_HOST = smtp.feishu.cn
 SMTP_PORT = 465

.npmrc

@@ -1,3 +1 @@
 auto-install-peers = false
-//npm.pkg.github.com/:_authToken=${GH_PAT} 
-@open-source-bazaar:registry=https://npm.pkg.github.com

README.md

@@ -22,11 +22,8 @@
 ## 开始
 
 ```bash
-npm install
-npm run dev
-# or
-yarn install
-yarn dev
+pnpm install
+pnpm dev
 ```
 
 可访问 http://localhost:3000.

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['coverageArea'];
+  data: OrganizationStatistic['city'];
   onChange?: (city: string) => any;
 }
 
@@ -27,7 +27,7 @@ export class CityStatisticMap extends ObservedComponent<CityStatisticMapProps> {
 
     return Object.entries(data)
       .map(([city, count]) => {
-        const point = cityCoordinate[city];
+        const point = cityCoordinate[city.replace(/(市|自治州|特别行政区)$/, '')];
 
         if (point)
           return {

components/Organization/Card.tsx

@@ -1,4 +1,3 @@
-import { Organization } from '@open-source-bazaar/china-ngo-database';
 import { Icon } from 'idea-react';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
@@ -8,9 +7,11 @@ import { HTMLAttributes } from 'react';
 import { Button, Card, CardProps, Image } from 'react-bootstrap';
 
 import { i18n, I18nContext } from '../../models/Translation';
+import { Organization } from '../../models/Organization';
 
 export interface OrganizationCardProps
-  extends Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>,
+  extends
+    Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>,
     Omit<Organization, 'id'>,
     CardProps {
   onSwitch?: (filter: Partial<Pick<Organization, 'entityType' | 'coverageArea'>>) => any;
@@ -24,7 +25,7 @@ export class OrganizationCard extends ObservedComponent<OrganizationCardProps, t
   accessor showQRC = false;
 
   renderIcon() {
-    const { website, wechatPublic } = this.observedProps.internetContact || {};
+    const { website, wechatPublic } = this.observedProps;
 
     return (
       <div className="d-flex justify-content-around">
@@ -34,7 +35,7 @@ export class OrganizationCard extends ObservedComponent<OrganizationCardProps, t
           </Button>
         )} */}
         {website && (
-          <Button title="WWW" size="sm" target="_blank" href={website}>
+          <Button title="WWW" size="sm" target="_blank" href={website?.toString()}>
             <Icon name="globe2" />
           </Button>
         )}
@@ -53,9 +54,8 @@ export class OrganizationCard extends ObservedComponent<OrganizationCardProps, t
   }
 
   render() {
-    const { name, entityType, services, description, internetContact, onSwitch, ...props } =
+    const { name, entityType, services, description, wechatPublic, onSwitch, ...props } =
       this.props;
-    const { wechatPublic } = internetContact || {};
 
     return (
       <Card
@@ -74,21 +74,21 @@ export class OrganizationCard extends ObservedComponent<OrganizationCardProps, t
         /> */}
         <Card.Body>
           <Card.Title>
-            {name}
-            <BadgeBar className="ms-2" list={[{ text: entityType! }]} />
+            {name + ''}
+            <BadgeBar className="ms-2" list={[{ text: entityType + '' }]} />
           </Card.Title>
 
           {services && (
             <BadgeBar
               className="justify-content-end"
-              list={services.map(({ serviceCategory }) => ({ text: serviceCategory! }))}
+              list={(services as string[]).map(text => ({ text }))}
             />
           )}
           <Card.Text
             className="d-none d-sm-block text-wrap overflow-auto"
             style={{ minHeight: '5rem', maxHeight: '10rem' }}
           >
-            {description}
+            {description?.toString()}
           </Card.Text>
         </Card.Body>
 
@@ -99,7 +99,7 @@ export class OrganizationCard extends ObservedComponent<OrganizationCardProps, t
             <Image
               className="mt-2"
               src={`https://open.weixin.qq.com/qr/code?username=${wechatPublic}`}
-              alt={wechatPublic}
+              alt={wechatPublic?.toString()}
               fluid
             />
           )}

components/Organization/Charts.tsx

@@ -6,12 +6,12 @@ import { OrganizationStatistic, sortStatistic } from '../../models/Organization'
 import { I18nContext } from '../../models/Translation';
 
 const OrganizationCharts: FC<OrganizationStatistic> = observer(
-  ({ entityType, serviceCategory, coverageArea }) => {
+  ({ entityType, serviceCategory, city }) => {
     const { t } = useContext(I18nContext);
 
     const typeList = sortStatistic(entityType),
       categoryList = sortStatistic(serviceCategory),
-      areaList = sortStatistic(coverageArea);
+      areaList = sortStatistic(city);
 
     return (
       <div style={{ minHeight: '70vh' }}>

components/Organization/Landscape.tsx

@@ -1,12 +1,11 @@
-import { Organization } from '@open-source-bazaar/china-ngo-database';
 import { Dialog } from 'idea-react';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { Component } from 'react';
 import { Modal } from 'react-bootstrap';
 import { splitArray } from 'web-utility';
 
-import { OrganizationModel } from '../../models/Organization';
+import { Organization, OrganizationModel } from '../../models/Organization';
 import systemStore from '../../models/System';
 import { OrganizationCard } from './Card';
 import styles from './LandScape.module.less';
@@ -46,9 +45,9 @@ export class OpenCollaborationLandscape extends Component<OpenCollaborationLands
       onClick={() => this.modal.open({ name: name as string })}
     >
       <div className="text-nowrap" style={{ fontSize: this.itemSize + 'rem' }}>
-        {name.slice(0, 2)}
+        {(name + '').slice(0, 2)}
         <br />
-        {name.slice(2, 4)}
+        {(name + '').slice(2, 4)}
       </div>
     </li>
   );