Merge pull request #77 from aic-factcheck/migrate_fe

new ui changes and fix login check
aic-factcheck · Sep 10, 2023 · fcb5c0d · fcb5c0d
2 parents d903274 + f4da9b1
commit fcb5c0d
Show file tree

Hide file tree

Showing 25 changed files with 88 additions and 80 deletions.
diff --git a/src/components/AddReview/index.tsx b/src/components/AddReview/index.tsx
@@ -40,7 +40,7 @@ const AddReview: React.FC<AddReviewProps> = ({ claim, closeModal, reviewsNum })
 
  useEffect(() => {
  // redirect to home if already logged in
- if (auth?.token === undefined) {
+ if (auth?.token?.refreshToken === undefined) {
  navigate('/sign-in');
  }
  const id = auth?.user._id;

diff --git a/src/components/EditProfile/index.tsx b/src/components/EditProfile/index.tsx
@@ -28,7 +28,7 @@ const EditProfile: React.FC = () => {
 
  useEffect(() => {
  // redirect to home if not logged in
- if (auth?.token === undefined) {
+ if (auth?.token?.refreshToken === undefined) {
  navigate('/sign-in');
  }
  }, [auth, navigate]);

diff --git a/src/components/EditReview/index.tsx b/src/components/EditReview/index.tsx
@@ -34,7 +34,7 @@ const EditReview: React.FC<Props> = ({ review, indexEdit }) => {
 
  useEffect(() => {
  // redirect to home if already logged in
- if (auth?.token === undefined) {
+ if (auth?.token?.refreshToken === undefined) {
  navigate('/sign-in');
  }
  }, [auth, navigate]);

diff --git a/src/components/MyArticles/index.tsx b/src/components/MyArticles/index.tsx
@@ -25,7 +25,7 @@ const MyArticles: React.FC = () => {
 
  useEffect(() => {
  // redirect to home if already logged in
- if (auth?.token === undefined) {
+ if (auth?.token?.refreshToken === undefined) {
  navigate('/sign-in');
  }
 

diff --git a/src/components/MyReviews/index.tsx b/src/components/MyReviews/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-boolean-value */
 /* eslint-disable max-len */
 import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -45,7 +46,7 @@ const MyReviews = () => {
  // _id, priority, author, articleId, text
  myReviewsList.length > 0 ? (
  myReviewsList?.map((obj : IReview, index: number) => (
- <UserReview review={obj} indexReview={index} />
+ <UserReview review={obj} indexReview={index} isEditable={true} />
  ))) : (
  <div className="emptyList">
  {t('no_reviews_yet')}

diff --git a/src/components/Review/index.tsx b/src/components/Review/index.tsx
@@ -32,7 +32,7 @@ const Review: React.FC<Props> = ({ review }) => {
 
  const addUpVote = () => {
  console.log(auth?.token);
- if (auth?.token !== undefined) {
+ if (auth?.token?.refreshToken !== undefined) {
  let changedHappen = false;
  if (myupvotes !== 1) {
  changedHappen = true;
@@ -53,7 +53,7 @@ const Review: React.FC<Props> = ({ review }) => {
  };
 
  const addDownVote = () => {
- if (auth?.token !== undefined) {
+ if (auth?.token?.refreshToken !== undefined) {
  let changedHappen = false;
  if (mydownvotes !== 1) {
  changedHappen = true;
@@ -74,7 +74,7 @@ const Review: React.FC<Props> = ({ review }) => {
  };
 
  const addNeutralVote = () => {
- if (auth?.token !== undefined) {
+ if (auth?.token?.refreshToken !== undefined) {
  let changedHappen = false;
  if (myneutralvotes !== 1) {
  changedHappen = true;
@@ -163,7 +163,7 @@ const Review: React.FC<Props> = ({ review }) => {
  >
  <Col span={20}>
  <Paragraph style={{ color: 'black', margin: '0%' }}>
- {review.text}
+ {review?.text}
  </Paragraph>
  </Col>
  </Row>
@@ -175,7 +175,7 @@ const Review: React.FC<Props> = ({ review }) => {
  <Paragraph style={{ color: 'black', margin: '0%' }}>
  <ul>
  {
- review.links.map((objLink: string) => (
+ review.links?.map((objLink: string) => (
  <li style={{ display: 'inline-block', margin: '0' }}>
  <Tooltip title={`${objLink}`}>
  <span>

diff --git a/src/components/Scoreboard/index.tsx b/src/components/Scoreboard/index.tsx
@@ -82,7 +82,7 @@ const Scoreboard: React.FC = () => {
 
  useEffect(() => {
  // redirect to home if already logged in
- if (auth?.user?.email === undefined) {
+ if (auth?.token?.refreshToken === undefined) {
  navigate('/sign-in');
  }
  const id = auth?.user?._id;

diff --git a/src/components/Tutorial/addarticle.tsx b/src/components/Tutorial/addarticle.tsx
@@ -12,7 +12,7 @@ const contentStyle: React.CSSProperties = {
 };
 
 const CreateArticleTutorial: React.FC = () => (
- <Carousel dotPosition="bottom" autoplay>
+ <Carousel dotPosition="bottom">
  <div>
  <div style={contentStyle}>
  <img

diff --git a/src/components/Tutorial/addclaim.tsx b/src/components/Tutorial/addclaim.tsx
@@ -11,7 +11,7 @@ const contentStyle: React.CSSProperties = {
 };
 
 const CreateClaimTutorial : React.FC = () => (
- <Carousel dotPosition="bottom" autoplay>
+ <Carousel dotPosition="bottom">
  <div>
  <div style={contentStyle}>
  <img

diff --git a/src/components/Tutorial/addreview.tsx b/src/components/Tutorial/addreview.tsx
@@ -12,7 +12,7 @@ const contentStyle: React.CSSProperties = {
 };
 
 const AddReviewTutorial: React.FC = () => (
- <Carousel dotPosition="bottom" autoplay>
+ <Carousel dotPosition="bottom">
  <div>
  <div style={contentStyle}>
  <img

diff --git a/src/components/UserReview/index.tsx b/src/components/UserReview/index.tsx
@@ -18,12 +18,13 @@ import EditReview from '../EditReview';
 interface Props {
  review: IReview,
  indexReview: number,
+ isEditable: boolean,
 }
 
 const { Paragraph } = Typography;
 // eslint-disable-next-line prefer-const
 
-const UserReview: React.FC<Props> = ({ review, indexReview }) => {
+const UserReview: React.FC<Props> = ({ review, indexReview, isEditable }) => {
  const { t } = useTranslation();
  const auth = useRecoilValue(authAtom);
 
@@ -50,7 +51,7 @@ const UserReview: React.FC<Props> = ({ review, indexReview }) => {
 
  const addUpVote = () => {
  console.log(auth?.token);
- if (auth?.token !== undefined) {
+ if (auth?.token?.refreshToken !== undefined) {
  let changedHappen = false;
  if (myupvotes !== 1) {
  changedHappen = true;
@@ -59,13 +60,10 @@ const UserReview: React.FC<Props> = ({ review, indexReview }) => {
  setMyDownvotes(0);
  setMyNeutralvotes(0);
  if (changedHappen) {
- setUpvote(review.nPositiveVotes + myupvotes);
- setDownvote(review.nNegativeVotes + mydownvotes);
- setNeutralvote(review.nNeutralVotes + myneutralvotes);
- reviewsService.voteReview(review._id, 1).then((res: any) => {
- setUpvote(res?.data?.nPositiveVotes);
- setDownvote(res?.data?.nNegativeVotes);
- setNeutralvote(res?.data?.nNeutralVotes);
+ setUpvote(review.nPositiveVotes + 1);
+ setDownvote(review.nNegativeVotes + 0);
+ setNeutralvote(review.nNeutralVotes + 0);
+ reviewsService.voteReview(review._id, 1).then(() => {
  }).catch((err) => {
  console.log(err);
  });
@@ -74,7 +72,7 @@ const UserReview: React.FC<Props> = ({ review, indexReview }) => {
  };
 
  const addDownVote = () => {
- if (auth?.token !== undefined) {
+ if (auth?.token?.refreshToken !== undefined) {
  let changedHappen = false;
  if (mydownvotes !== 1) {
  changedHappen = true;
@@ -83,13 +81,10 @@ const UserReview: React.FC<Props> = ({ review, indexReview }) => {
  setMyUpvotes(0);
  setMyNeutralvotes(0);
  if (changedHappen) {
- setUpvote(review.nPositiveVotes + myupvotes);
- setDownvote(review.nNegativeVotes + mydownvotes);
- setNeutralvote(review.nNeutralVotes + myneutralvotes);
- reviewsService.voteReview(review._id, -1).then((res: any) => {
- setUpvote(res?.data?.nPositiveVotes);
- setDownvote(res?.data?.nNegativeVotes);
- setNeutralvote(res?.data?.nNeutralVotes);
+ setUpvote(review.nPositiveVotes + 0);
+ setDownvote(review.nNegativeVotes + 1);
+ setNeutralvote(review.nNeutralVotes + 0);
+ reviewsService.voteReview(review._id, -1).then(() => {
  }).catch((err) => {
  console.log(err);
  });
@@ -98,7 +93,7 @@ const UserReview: React.FC<Props> = ({ review, indexReview }) => {
  };
 
  const addNeutralVote = () => {
- if (auth?.token !== undefined) {
+ if (auth?.token?.refreshToken !== undefined) {
  let changedHappen = false;
  if (myneutralvotes !== 1) {
  changedHappen = true;
@@ -107,13 +102,10 @@ const UserReview: React.FC<Props> = ({ review, indexReview }) => {
  setMyUpvotes(0);
  setMyDownvotes(0);
  if (changedHappen) {
- setUpvote(review.nPositiveVotes + myupvotes);
- setDownvote(review.nNegativeVotes + mydownvotes);
- setNeutralvote(review.nNeutralVotes + myneutralvotes);
- reviewsService.voteReview(review._id, 0).then((res: any) => {
- setUpvote(res?.data?.nPositiveVotes);
- setDownvote(res?.data?.nNegativeVotes);
- setNeutralvote(res?.data?.nNeutralVotes);
+ setUpvote(review.nPositiveVotes + 0);
+ setDownvote(review.nNegativeVotes + 0);
+ setNeutralvote(review.nNeutralVotes + 1);
+ reviewsService.voteReview(review._id, 0).then(() => {
  }).catch((err) => {
  console.log(err);
  });
@@ -143,6 +135,35 @@ const UserReview: React.FC<Props> = ({ review, indexReview }) => {
  }
  }, [review.vote]);
 
+ const editReview = () => {
+ if (isEditable) {
+ return (
+ <Col offset={1} span={3}>
+ <div>
+ <Button type="primary" className="editArticleProfile" onClick={showModal} icon={<EditOutlined />}>
+ {t('edit')}
+ </Button>
+ <Modal
+ title={t('edit')}
+ open={open}
+ onOk={handleOk}
+// confirmLoading={confirmLoading}
+ onCancel={handleCancel}
+ width="80%"
+ footer={[]}
+ >
+ <EditReview
+ review={review}
+ indexEdit={indexReview}
+ />
+ </Modal>
+ </div>
+ </Col>
+ );
+ }
+ return <div />;
+ };
+
  return (
  <div>
  <Row style={{
@@ -205,27 +226,9 @@ const UserReview: React.FC<Props> = ({ review, indexReview }) => {
  </p>
  </Paragraph>
  </Col>
- <Col offset={1} span={3}>
- <div>
- <Button type="primary" className="editArticleProfile" onClick={showModal} icon={<EditOutlined />}>
- {t('edit')}
- </Button>
- <Modal
- title={t('edit')}
- open={open}
- onOk={handleOk}
- // confirmLoading={confirmLoading}
- onCancel={handleCancel}
- width="80%"
- footer={[]}
- >
- <EditReview
- review={review}
- indexEdit={indexReview}
- />
- </Modal>
- </div>
- </Col>
+ {
+ editReview()
+ }
  </Row>
  <Row style={{
  borderRadius: '10px', textAlign: 'left', paddingLeft: '2%', paddingTop: '0%',

diff --git a/src/components/article/create/index.tsx b/src/components/article/create/index.tsx
@@ -71,7 +71,7 @@ const CreateArticle: React.FC<Props> = ({ articleSubmited, setArticleSubmited, s
 
  useEffect(() => {
  // redirect to home if already logged in
- if (auth?.user === undefined) {
+ if (auth?.token?.refreshToken === undefined) {
  navigate('/sign-in');
  }
 

diff --git a/src/components/article/edit/index.tsx b/src/components/article/edit/index.tsx
@@ -29,7 +29,7 @@ const EditArticle: React.FC<Props> = ({ article, indexEdit }) => {
 
  useEffect(() => {
  // redirect to home if already logged in
- if (auth?.token === undefined) {
+ if (auth?.token?.refreshToken === undefined) {
  navigate('/sign-in');
  }
  }, [auth, navigate]);

diff --git a/src/components/claim/edit/index.tsx b/src/components/claim/edit/index.tsx
@@ -28,7 +28,7 @@ const EditClaim: React.FC<Props> = ({ claim, indexClaim, closeModal }) => {
 
  useEffect(() => {
  // redirect to home if already logged in
- if (auth?.token === undefined) {
+ if (auth?.token?.refreshToken === undefined) {
  navigate('/sign-in');
  }
  }, [auth, navigate]);

diff --git a/src/components/claim/index.tsx b/src/components/claim/index.tsx
@@ -70,7 +70,7 @@ const Claim: React.FC<Props> = ({ claim, isEditable, index }) => {
  const [downvotes, setDownvotes] = useState(claim.nNegativeVotes);
 
  const addUpVote = (claimId: string) => {
- if (auth?.token !== undefined) {
+ if (auth?.token?.refreshToken !== undefined) {
  console.log('upvote');
  let changedHappen = false;
  if (myupvotes !== 1) {
@@ -90,7 +90,7 @@ const Claim: React.FC<Props> = ({ claim, isEditable, index }) => {
  };
 
  const addDownVote = (claimId: string) => {
- if (auth?.token !== undefined) {
+ if (auth?.token?.refreshToken !== undefined) {
  let changedHappen = false;
  if (mydownvotes !== 1) {
  changedHappen = true;

diff --git a/src/index.scss b/src/index.scss
@@ -201,7 +201,7 @@ a.claims:hover {
 /* styles.css */
 .osx-window {
  width: 100%;
- height: 50%;
+ height: 60%;
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  border-radius: 6px;
@@ -241,7 +241,7 @@ a.claims:hover {
 }
 
 .osx-content {
- padding: 12px;
+ padding: 0px;
 }
 
 

diff --git a/src/layouts/articles/index.tsx b/src/layouts/articles/index.tsx
@@ -37,7 +37,7 @@ const AllArticles : React.FC = () => {
  const allowEdit = false;
 
  useEffect(() => {
- if (auth?.user?.email === undefined) {
+ if (auth?.token?.refreshToken === undefined) {
  navigate('/sign-in');
  }
  if (recoilHotArticlesList.length > 0) {

diff --git a/src/layouts/authentication/sign-in/index.tsx b/src/layouts/authentication/sign-in/index.tsx
@@ -25,7 +25,7 @@ const SignIn: React.FC = () => {
 
  useEffect(() => {
  // redirect to home if already logged in
- if (auth?.user?._id !== undefined) {
+ if (auth?.refreshToken !== undefined) {
  navigate('/');
  }
  }, [auth, navigate]);
@@ -39,6 +39,7 @@ const SignIn: React.FC = () => {
  localStorage.setItem('refreshToken', res.data.token.refreshToken);
  localStorage.setItem('email', res.data.user.email);
  localStorage.setItem('expiresIn', res.data.token.expiresIn);
+ navigate('/');
  }).catch((err: any) => {
  notificationApi.info({
  message: err.response.data.message,

diff --git a/src/layouts/authentication/sign-up/index.tsx b/src/layouts/authentication/sign-up/index.tsx
@@ -22,7 +22,7 @@ const SignUp: React.FC = () => {
 
  useEffect(() => {
  // redirect to home if already logged in
- if (auth?.user?.email !== undefined) {
+ if (auth?.refreshToken !== undefined) {
  navigate('/');
  }
  }, [auth, navigate]);
@@ -41,6 +41,7 @@ const SignUp: React.FC = () => {
  localStorage.setItem('refreshToken', res.data.token.refreshToken);
  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) => {