feat: first commit

src/components/job-recommend-list/index.tsx

@@ -0,0 +1,83 @@
+import { Button, Image } from '@tarojs/components';
+
+import { List } from '@taroify/core';
+import classNames from 'classnames';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import JobCard from '@/components/job-card';
+import ListPlaceholder from '@/components/list-placeholder';
+import { PageUrl } from '@/constants/app';
+import { JobInfo, GetJobsRequest } from '@/types/job';
+import { logWithPrefix } from '@/utils/common';
+import { requestMyRecommendJobList } from '@/utils/job';
+import { switchTab } from '@/utils/route';
+
+import './index.less';
+
+interface IRequestProps extends Partial<GetJobsRequest> {}
+
+export interface IJobListProps extends IRequestProps {
+  className?: string;
+}
+
+const PAGE_SIZE = 10;
+const PREFIX = 'job-recommend-list';
+const log = logWithPrefix(PREFIX);
+
+function JobRecommendList(props: IJobListProps) {
+  const { className } = props;
+  const [loading, setLoading] = useState(false);
+  const [loadError, setLoadError] = useState(false);
+  const [dataList, setDataList] = useState<JobInfo[]>([]);
+  const requestProps = useRef<IRequestProps>({});
+
+  const handleClickAllJob = useCallback(() => {
+    switchTab(PageUrl.Job);
+  }, []);
+
+  useEffect(() => {
+    requestProps.current = { page: 1, pageSize: PAGE_SIZE };
+  }, []);
+
+  useEffect(() => {
+    const refresh = async () => {
+      log('start request list data');
+      try {
+        setDataList([]);
+        setLoading(true);
+        setLoadError(false);
+        const { jobResults = [] } = await requestMyRecommendJobList({ ...requestProps.current });
+        setDataList(jobResults);
+      } catch (e) {
+        setDataList([]);
+        setLoadError(true);
+      } finally {
+        log('request list data end');
+        setLoading(false);
+      }
+    };
+    refresh();
+  }, []);
+
+  return (
+    <div className={classNames(PREFIX, className)}>
+      <div className={`${PREFIX}__header`}>
+        <div className={`${PREFIX}__header-left-line`} />
+        <Image className={`${PREFIX}__header-icon`} src={require('@/statics/svg/like.svg')} />
+        <div className={`${PREFIX}__header-title`}>为你推荐附近通告</div>
+        <div className={`${PREFIX}__header-right-line`} />
+      </div>
+      <List disabled>
+        {dataList.map(item => (
+          <JobCard data={item} key={item.id} redirectOpen />
+        ))}
+        <ListPlaceholder noMoreText="" loadingMore={loading} loadMoreError={loadError} loadMoreErrorText="加载失败" />
+      </List>
+      <Button className={`${PREFIX}__more-button`} onClick={handleClickAllJob}>
+        查看更多通告
+      </Button>
+    </div>
+  );
+}
+
+export default JobRecommendList;