[add] China NGO Database 2.0 pages

.env

@@ -5,3 +5,5 @@ NEXT_PUBLIC_LOGO = https://github.com/Open-Source-Bazaar.png
 NEXT_PUBLIC_LARK_API_HOST = https://open.feishu.cn/open-apis/
 NEXT_PUBLIC_LARK_APP_ID = cli_a8094a652022900d
 NEXT_PUBLIC_LARK_WIKI_URL = https://open-source-bazaar.feishu.cn/wiki/space/7052192153363054596
+
+NEXT_PUBLIC_STRAPI_API_HOST = https://china-ngo-db.onrender.com/api/

.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

.husky/pre-commit

@@ -1 +1 @@
-npm test
+npm test

.husky/pre-push

@@ -1 +1 @@
-npm run build
+npm run build

.npmrc

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

components/Base/ZodiacBar.tsx

@@ -0,0 +1,34 @@
+import Link from 'next/link';
+import { FC, ReactNode } from 'react';
+
+export const ZodiacSigns = ['🐵', '🐔', '🐶', '🐷', '🐭', '🐮', '🐯', '🐰', '🐲', '🐍', '🐴', '🐐'];
+
+export interface ZodiacBarProps {
+  startYear: number;
+  endYear?: number;
+  itemOf?: (year: number, zodiac: string) => { link?: string; title?: ReactNode };
+}
+
+export const ZodiacBar: FC<ZodiacBarProps> = ({
+  startYear,
+  endYear = new Date().getFullYear(),
+  itemOf,
+}) => (
+  <ol className="list-inline d-flex flex-wrap justify-content-center gap-3">
+    {Array.from({ length: endYear - startYear + 1 }, (_, index) => {
+      const year = endYear - index;
+      const zodiac = ZodiacSigns[year % 12];
+      const { link = '#', title } = itemOf?.(year, zodiac) || {};
+
+      return (
+        <li key={index} className="list-inline-item border rounded">
+          <Link className="d-inline-block p-3 text-decoration-none text-center" href={link}>
+            <div className="fs-1">{zodiac}</div>
+
+            {title}
+          </Link>
+        </li>
+      );
+    })}
+  </ol>
+);

components/LarkImage.tsx

@@ -9,11 +9,7 @@ export interface LarkImageProps extends Omit<ImageProps, 'src'> {
   src?: TableCellValue;
 }
 
-export const LarkImage: FC<LarkImageProps> = ({
-  src = DefaultImage,
-  alt,
-  ...props
-}) => (
+export const LarkImage: FC<LarkImageProps> = ({ src = DefaultImage, alt, ...props }) => (
   <Image
     fluid
     loading="lazy"

components/Map/ChinaMap.tsx

@@ -0,0 +1,10 @@
+import { OpenReactMap, OpenReactMapProps, TileLayer } from 'open-react-map';
+import { FC } from 'react';
+
+const ChinaMap: FC<OpenReactMapProps> = props => (
+  <OpenReactMap
+    {...props}
+    renderTileLayer={() => <TileLayer vendor="GaoDe" />}
+  />
+);
+export default ChinaMap;

components/Map/CityStatisticMap.tsx

@@ -0,0 +1,63 @@
+import { computed } from 'mobx';
+import { observer } from 'mobx-react';
+import { ObservedComponent } from 'mobx-react-helper';
+import dynamic from 'next/dynamic';
+import { MarkerMeta, OpenReactMapProps } from 'open-react-map';
+
+import { OrganizationStatistic } from '../../models/Organization';
+import systemStore from '../../models/System';
+
+const ChinaMap = dynamic(() => import('./ChinaMap'), { ssr: false });
+
+export interface CityStatisticMapProps {
+  data: OrganizationStatistic['coverageArea'];
+  onChange?: (city: string) => any;
+}
+
+@observer
+export class CityStatisticMap extends ObservedComponent<CityStatisticMapProps> {
+  componentDidMount() {
+    systemStore.getCityCoordinate();
+  }
+
+  @computed
+  get markers() {
+    const { cityCoordinate } = systemStore,
+      { data } = this.observedProps;
+
+    return Object.entries(data)
+      .map(([city, count]) => {
+        const point = cityCoordinate[city];
+
+        if (point)
+          return {
+            tooltip: `${city} ${count}`,
+            position: [point[1], point[0]],
+          };
+      })
+      .filter(Boolean) as MarkerMeta[];
+  }
+
+  handleChange: OpenReactMapProps['onMarkerClick'] = ({ latlng: { lat, lng } }) => {
+    const { markers } = this;
+    const { tooltip } =
+      markers.find(({ position: p }) => p instanceof Array && lat === p[0] && lng === p[1]) || {};
+    const [city] = tooltip?.split(/\s+/) || [];
+
+    this.props.onChange?.(city);
+  };
+
+  render() {
+    const { markers } = this;
+
+    return (
+      <ChinaMap
+        style={{ height: '70vh' }}
+        center={[34.32, 108.55]}
+        zoom={4}
+        markers={markers}
+        onMarkerClick={this.handleChange}
+      />
+    );
+  }
+}

components/Navigator/MainNavigator.tsx

@@ -45,6 +45,16 @@ const topNavBarMenu = ({ t }: typeof i18n): MenuItem[] => [
       { href: '/license-filter', title: t('license_filter') },
     ],
   },
+  {
+    title: t('NGO'),
+    subs: [
+      { href: '/NGO', title: t('China_NGO_DB') },
+      {
+        href: 'https://open-source-bazaar.feishu.cn/wiki/VGrMwiweVivWrHkTcvpcJTjjnoY',
+        title: t('Open_Source_NGO_plan'),
+      },
+    ],
+  },
   {
     title: t('wiki'),
     subs: [

components/Organization/Card.tsx

@@ -0,0 +1,110 @@
+import { Organization } from '@open-source-bazaar/china-ngo-database';
+import { Icon } from 'idea-react';
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
+import { ObservedComponent } from 'mobx-react-helper';
+import { BadgeBar } from 'mobx-restful-table';
+import { HTMLAttributes } from 'react';
+import { Button, Card, CardProps, Image } from 'react-bootstrap';
+
+import { i18n, I18nContext } from '../../models/Translation';
+
+export interface OrganizationCardProps
+  extends Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>,
+    Omit<Organization, 'id'>,
+    CardProps {
+  onSwitch?: (filter: Partial<Pick<Organization, 'entityType' | 'coverageArea'>>) => any;
+}
+
+@observer
+export class OrganizationCard extends ObservedComponent<OrganizationCardProps, typeof i18n> {
+  static contextType = I18nContext;
+
+  @observable
+  accessor showQRC = false;
+
+  renderIcon() {
+    const { website, wechatPublic } = this.observedProps.internetContact || {};
+
+    return (
+      <div className="d-flex justify-content-around">
+        {/* {email && (
+          <Button title="E-mail" size="sm" variant="warning" href={`mailto:${email}`}>
+            <Icon name="mailbox2" />
+          </Button>
+        )} */}
+        {website && (
+          <Button title="WWW" size="sm" target="_blank" href={website}>
+            <Icon name="globe2" />
+          </Button>
+        )}
+        {wechatPublic && (
+          <Button
+            title="WeChat"
+            size="sm"
+            variant="success"
+            onClick={() => (this.showQRC = !this.showQRC)}
+          >
+            <Icon name="chat-fill" />
+          </Button>
+        )}
+      </div>
+    );
+  }
+
+  render() {
+    const { t } = this.observedContext,
+      { name, entityType, services, description, internetContact, onSwitch, ...props } = this.props;
+    const { wechatPublic } = internetContact || {};
+
+    return (
+      <Card
+        {...props}
+        style={{
+          ...props.style,
+          contentVisibility: 'auto',
+          containIntrinsicHeight: '36rem',
+        }}
+      >
+        {/* <Card.Img
+          variant="top"
+          className="object-fit-contain"
+          style={{ height: '30vh' }}
+          src={logos}
+        /> */}
+        <Card.Body>
+          <Card.Title>
+            {name}
+            <BadgeBar className="ms-2" list={[{ text: entityType! }]} />
+          </Card.Title>
+
+          {services && (
+            <BadgeBar
+              className="justify-content-end"
+              list={services.map(({ serviceCategory }) => ({ text: serviceCategory! }))}
+            />
+          )}
+          <Card.Text
+            className="d-none d-sm-block text-wrap overflow-auto"
+            style={{ minHeight: '5rem', maxHeight: '10rem' }}
+          >
+            {description}
+          </Card.Text>
+        </Card.Body>
+
+        <Card.Footer>
+          {this.renderIcon()}
+
+          {this.showQRC && (
+            <Image
+              className="mt-2"
+              src={`https://open.weixin.qq.com/qr/code?username=${wechatPublic}`}
+              alt={wechatPublic}
+              fluid
+            />
+          )}
+        </Card.Footer>
+      </Card>
+    );
+  }
+}

components/Organization/Charts.tsx

@@ -0,0 +1,43 @@
+import { BarSeries, PieSeries, SVGCharts, Title, Tooltip, XAxis, YAxis } from 'echarts-jsx';
+import { observer } from 'mobx-react';
+import { FC, useContext } from 'react';
+
+import { OrganizationStatistic, sortStatistic } from '../../models/Organization';
+import { I18nContext } from '../../models/Translation';
+
+const OrganizationCharts: FC<OrganizationStatistic> = observer(
+  ({ entityType, serviceCategory, coverageArea }) => {
+    const { t } = useContext(I18nContext);
+
+    const typeList = sortStatistic(entityType),
+      categoryList = sortStatistic(serviceCategory),
+      areaList = sortStatistic(coverageArea);
+
+    return (
+      <div style={{ minHeight: '70vh' }}>
+        <SVGCharts>
+          <Title>{t('NGO_area_distribution')}</Title>
+          <XAxis type="category" data={areaList.map(([key]) => key)} />
+          <YAxis type="value" />
+          <BarSeries data={areaList.map(([{}, value]) => value)} />
+          <Tooltip />
+        </SVGCharts>
+
+        <SVGCharts>
+          <Title>{t('NGO_service_distribution')}</Title>
+          <XAxis type="category" data={categoryList.map(([key]) => key)} />
+          <YAxis type="value" />
+          <BarSeries data={categoryList.map(([{}, value]) => value)} />
+          <Tooltip />
+        </SVGCharts>
+
+        <SVGCharts className="col-auto">
+          <Title>{t('NGO_type_distribution')}</Title>
+          <PieSeries data={typeList.map(([name, value]) => ({ name, value }))} />
+          <Tooltip trigger="item" />
+        </SVGCharts>
+      </div>
+    );
+  },
+);
+export default OrganizationCharts;

components/Organization/LandScape.module.less

@@ -0,0 +1,10 @@
+.groupTitle {
+  background-color: rgb(52, 112, 159);
+}
+.listItem {
+  transition: 0.25ms;
+  &:hover {
+    cursor: pointer;
+    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
+  }
+}