Merge pull request #79 from aic-factcheck/migrate_fe

fixes + ux updates, new error message notifications

src/api/claims.service.ts

@@ -32,8 +32,8 @@ export default class ClaimsService {
  return factCheckBe.patch<IClaim>(`/articles/${articleid}/claims/${claimid}`, values, { headers });
  };
 
- static queryClaim = (patternSearch: string) => {
+ static queryClaim = (patternSearch: string, sortBy: string) => {
  const headers = { Authorization: `Bearer ${localStorage.getItem('accessToken')}` };
- return factCheckBe.get<IClaim[]>(`/search/claims?text=${patternSearch}`, { headers });
+ return factCheckBe.get<IClaim[]>(`/search/claims?text=${patternSearch}&sortBy=${sortBy}`, { headers });
  };
 }

src/components/AddReview/index.tsx

@@ -126,7 +126,7 @@ const AddReview: React.FC<AddReviewProps> = ({ claim, closeModal, reviewsNum })
  }).catch((err: any) => {
  console.log(err);
  notificationApi.info({
- message: err.response.data.message,
+ message: err?.response?.data?.message,
  icon: <CloseOutlined />,
  });
  // closeModal();
@@ -160,9 +160,7 @@ const AddReview: React.FC<AddReviewProps> = ({ claim, closeModal, reviewsNum })
  name="basic"
  labelCol={{ span: 24 }}
  wrapperCol={{ span: 24 }}
- // initialValues={{ remember: true }}
  onFinish={onFinish}
- // onFinishFailed={onFinishFailed}
  autoComplete="off"
  >
  <Form.Item

src/components/EditProfile/index.tsx

@@ -44,24 +44,23 @@ const EditProfile: React.FC = () => {
  setAuth,
  auth,
  ).catch((err: any) => {
- const errorMessage = err?.response?.data?.errors[0]?.messages[0].toString();
  notificationApi.info({
- message: errorMessage,
+ message: err?.response?.data?.message,
  icon: <CloseOutlined />,
  });
  // closeModal();
  });
  }
  };
 
- const onFinishFailed = (err: any) => {
- // message.error(errorInfo);
- const errorMessage = err?.response?.data?.errors[0]?.messages[0].toString();
- notificationApi.info({
- message: errorMessage,
- icon: <CloseOutlined />,
- });
- };
+ // const onFinishFailed = (err: any) => {
+ //  // message.error(errorInfo);
+ //  const errorMessage = err?.response?.data?.errors[0]?.messages[0].toString();
+ //  notificationApi.info({
+ //  message: errorMessage,
+ //  icon: <CloseOutlined />,
+ //  });
+ // };
 
  return (
  <Content className="site-layout" style={{ paddingLeft: '0%', padding: '1%' }}>
@@ -79,7 +78,7 @@ const EditProfile: React.FC = () => {
  email: auth?.user?.email !== undefined ? auth?.user?.email : '',
  }}
  onFinish={onFinish}
- onFinishFailed={onFinishFailed}
+ // onFinishFailed={onFinishFailed}
  autoComplete="off"
  >
  <Form.Item

src/components/EditReview/index.tsx

@@ -66,10 +66,9 @@ const EditReview: React.FC<Props> = ({ review, indexEdit }) => {
 
  setMyReviewsList(mergedReviews);
  })
- .catch((e) => {
- console.log(e);
+ .catch((err: any) => {
  notificationApi.info({
- message: e.response.data.message,
+ message: err?.response?.data?.message,
  icon: <CloseOutlined />,
  });
  });
@@ -103,9 +102,7 @@ const EditReview: React.FC<Props> = ({ review, indexEdit }) => {
  name="basic"
  labelCol={{ span: 24 }}
  wrapperCol={{ span: 24 }}
- // initialValues={{ remember: true }}
  onFinish={onFinish}
- // onFinishFailed={onFinishFailed}
  autoComplete="off"
  initialValues={{
  text: review.text,

src/components/Invitation/index.tsx

@@ -41,7 +41,7 @@ const Invitation: React.FC = () => {
  });
  }).catch((err: any) => {
  notificationApi.info({
- message: err.response.data.message,
+ message: err?.response?.data?.message,
  icon: <CloseOutlined />,
  });
  });

src/components/article/create/index.tsx

@@ -130,9 +130,8 @@ const CreateArticle: React.FC<Props> = ({ articleSubmited, setArticleSubmited, s
  });
  })
  .catch((err : any) => {
- const errorMessage = err?.response?.data?.errors[0]?.messages[0].toString();
  notificationApi.info({
- message: errorMessage,
+ message: err?.response?.data?.message,
  icon: <CloseOutlined />,
  });
  });

src/components/article/edit/index.tsx

@@ -58,8 +58,8 @@ const EditArticle: React.FC<Props> = ({ article, indexEdit }) => {
 
  setMyArticlesList(mergedArticles);
  })
- .catch((e) => notificationApi.info({
- message: e,
+ .catch((err: any) => notificationApi.info({
+ message: err?.response?.data?.message,
  icon: <CloseOutlined />,
  }));
  };

src/components/claim/create/index.tsx

@@ -89,9 +89,8 @@ const CreateClaim : React.FC<Props> = ({
  icon: <img alt="leaders" width="50%" src={`${process.env.PUBLIC_URL}/pictures/experience.png`} style={{ marginRight: '5%' }} />,
  });
  }).catch((err: any) => {
- const errorMessage = err?.response?.data?.errors[0]?.messages[0].toString();
  notificationApi.info({
- message: errorMessage,
+ message: err?.response?.data?.message,
  icon: <CloseOutlined />,
  });
  });
@@ -107,9 +106,7 @@ const CreateClaim : React.FC<Props> = ({
  name="basic"
  labelCol={{ span: 24 }}
  wrapperCol={{ span: 24 }}
- // initialValues={{ remember: true }}
  onFinish={onFinish}
- // onFinishFailed={onFinishFailed}
  autoComplete="off"
  >
  <Form.Item

src/components/claim/edit/index.tsx

@@ -71,9 +71,7 @@ const EditClaim: React.FC<Props> = ({ claim, indexClaim, closeModal }) => {
  name="basic"
  labelCol={{ span: 24 }}
  wrapperCol={{ span: 24 }}
- // initialValues={{ remember: true }}
  onFinish={onFinish}
- // onFinishFailed={onFinishFailed}
  autoComplete="off"
  initialValues={{
  text: claim.text,

src/layouts/articles/index.tsx

@@ -65,9 +65,7 @@ const AllArticles : React.FC = () => {
  articlesService.queryArticle(pattern).then((res: any) => {
  setSearchPage((s) => s + 1);
  setArticlesList(res.data);
- if (res.data.length === 0) {
- setHasMoreData(false);
- }
+ setHasMoreData(false);
  }).catch(() => {
  setSearchPage(1);
  setArticlesList(Array.from(recoilHotArticlesList));
@@ -116,7 +114,7 @@ const AllArticles : React.FC = () => {
  };
 
  return (
- <Content className="content" style={{ padding: '25px 25px', marginTop: 20 }}>
+ <Content className="content" style={{ padding: '25px 25px' }}>
  <InfiniteScroll
  dataLength={articlesList.length}
  next={loadMoreData}

src/layouts/authentication/sign-in/index.tsx

@@ -42,19 +42,12 @@ const SignIn: React.FC = () => {
  navigate('/');
  }).catch((err: any) => {
  notificationApi.info({
- message: err.response.data.message,
+ message: err?.response?.data?.message,
  icon: <CloseOutlined />,
  });
  });
  };
 
- const onFinishFailed = (errorInfo: any) => {
- notificationApi.info({
- message: errorInfo,
- icon: <CloseOutlined />,
- });
- };
-
  return (
  <Content
  className="authentification"
@@ -92,7 +85,6 @@ const SignIn: React.FC = () => {
  }}
  onFinish={onFinish}
  layout="vertical"
- onFinishFailed={onFinishFailed}
  autoComplete="off"
  style={{
  paddingTop: '1%', paddingBottom: '1%', padding: '1%', marginTop: 10, background: 'white', borderRadius: '10px',

src/layouts/authentication/sign-up/index.tsx

@@ -42,11 +42,9 @@ const SignUp: React.FC = () => {
  localStorage.setItem('email', res.data.user.email);
  localStorage.setItem('expiresIn', res.data.token.expiresIn);
  navigate('/');
- // eslint-disable-next-line max-len
- // http_common.defaults.headers.common['Authorization'] = `Bearer ${res.data.token.accessToken}`;
  }).catch((err: any) => {
  notificationApi.info({
- message: err.response.data.message,
+ message: err?.response?.data?.message,
  icon: <CloseOutlined />,
  });
  });

src/layouts/claims/index.tsx

@@ -29,6 +29,8 @@ const ClaimPages: React.FC = () => {
  const [searchValue, setSearchValue] = useState('');
  const [hasMoreData, setHasMoreData] = useState(true);
 
+ const [disabledRange, setDisabledRange] = useState(false);
+
  const [sortBy, setSortBy] = useState('POSITIVE_VOTES_DESC');
  const [duration, setDuration] = useState('MONTH');
 
@@ -53,22 +55,34 @@ const ClaimPages: React.FC = () => {
  const onSearch = (pattern: string) => {
  // eslint-disable-next-line max-len
  if (pattern.length > 3) {
+ setDisabledRange(true);
  setIsDefaultSearch(false);
  setSearchValue(pattern);
  setSearchPage(1);
+ setClaimsList([]);
  // eslint-disable-next-line max-len
- claimsService.queryClaim(pattern).then((res: any) => {
- setSearchPage((s) => s + 1);
+ claimsService.queryClaim(pattern, sortBy).then((res: any) => {
  setClaimsList(res.data);
  if (res.data.length < 10) {
  setHasMoreData(false);
  }
  }).catch(() => {
- setSearchPage(1);
- setClaimsList(claimsList);
+ claimsService.getClaimsList(1, duration, sortBy).then((res: any) => {
+ setClaimsList(Array.from(res.data));
+ if (res.data.length < 10) {
+ setHasMoreData(false);
+ }
+ }).catch();
  });
  } else {
- setClaimsList(claimsList);
+ setDisabledRange(false);
+ setSearchValue('');
+ claimsService.getClaimsList(1, duration, sortBy).then((res: any) => {
+ setClaimsList(Array.from(res.data));
+ if (res.data.length < 10) {
+ setHasMoreData(false);
+ }
+ }).catch();
  setIsDefaultSearch(true);
  setHasMoreData(true);
  }
@@ -80,7 +94,9 @@ const ClaimPages: React.FC = () => {
  }
  setLoading(true);
  if (isDefaultSearch) {
- claimsService.getClaimsList(searchPage, duration, sortBy).then((res: any) => {
+ console.log(`Loading more data ${searchPage}`);
+ claimsService.getClaimsList(searchPage + 1, duration, sortBy).then((res: any) => {
+ setSearchPage((s) => s + 1);
  setClaimsList([...claimsList, ...res.data]);
  setLoading(false);
  if (res.data.length < 10) {
@@ -91,20 +107,16 @@ const ClaimPages: React.FC = () => {
  setLoading(false);
  });
  } else {
- if (searchPage < 2) {
- // eslint-disable-next-line max-len
- claimsService.queryClaim(searchValue).then((res: any) => {
- setSearchPage(searchPage + 1);
- setClaimsList([...claimsList, ...res.data]);
- setLoading(false);
- setHasMoreData(false);
- window.dispatchEvent(new Event('resize'));
- }).catch(() => {
- setLoading(false);
- });
- } else {
+ // eslint-disable-next-line max-len
+ claimsService.queryClaim(searchValue, sortBy).then((res: any) => {
+ setClaimsList([...claimsList, ...res.data]);
  setLoading(false);
- }
+ setHasMoreData(false);
+ window.dispatchEvent(new Event('resize'));
+ }).catch(() => {
+ setLoading(false);
+ });
+ setLoading(false);
  }
  };
 
@@ -115,25 +127,41 @@ const ClaimPages: React.FC = () => {
  setClaimsList(Array.from(res.data));
  if (res.data.length < 10) {
  setHasMoreData(false);
+ } else {
+ setHasMoreData(true);
  }
  }).catch();
- console.log(`selected ${value}`);
  };
 
  const handleChangeSort = (value: string) => {
  setSortBy(value);
  setSearchPage(1);
- claimsService.getClaimsList(1, duration, value).then((res: any) => {
- setClaimsList(Array.from(res.data));
- if (res.data.length < 10) {
- setHasMoreData(false);
- }
- }).catch();
- console.log(`selected ${value}`);
+ if (searchValue.length > 3) {
+ claimsService.queryClaim(searchValue, value).then((res: any) => {
+ setClaimsList(Array.from(res.data));
+ if (res.data.length < 10) {
+ setHasMoreData(false);
+ } else {
+ setHasMoreData(true);
+ }
+ }).catch(() => {
+ setLoading(false);
+ });
+ // setLoading(false);
+ } else {
+ claimsService.getClaimsList(1, duration, value).then((res: any) => {
+ setClaimsList(Array.from(res.data));
+ if (res.data.length < 10) {
+ setHasMoreData(false);
+ } else {
+ setHasMoreData(true);
+ }
+ }).catch();
+ }
  };
 
  return (
- <Content className="content" style={{ padding: '25px 25px', marginTop: 20 }}>
+ <Content className="content" style={{ padding: '25px 25px' }}>
  <InfiniteScroll
  dataLength={claimsList.length}
  next={loadMoreData}
@@ -165,9 +193,10 @@ const ClaimPages: React.FC = () => {
  </Col>
  </Row>
  <Row>
- <Space wrap>
+ <Space wrap style={{ marginRight: '5%', marginBottom: '2%' }}>
  {t('range')}
  <Select
+ disabled={disabledRange}
  defaultValue="MONTH"
  style={{ width: 120 }}
  onChange={handleChangeRange}
@@ -179,10 +208,11 @@ const ClaimPages: React.FC = () => {
  { value: 'YEAR', label: t('range_year') },
  ]}
  />
+ </Space>
+ <Space wrap style={{ marginRight: '5%', marginBottom: '2%' }}>
  {t('sort')}
  <Select
  defaultValue="POSITIVE_VOTES_DESC"
- style={{ width: 200 }}
  onChange={handleChangeSort}
  options={[
  { value: 'POSITIVE_VOTES_DESC', label: t('positive_votes_desc') },