diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index c57beb468..17f0976f6 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -31,7 +31,7 @@ jobs: runs-on: ubuntu-latest strategy: matrix: - node-version: [18.19.1] + node-version: [18.14.0] steps: - name: Checkout uses: actions/checkout@v4 @@ -44,7 +44,7 @@ jobs: runs-on: ubuntu-latest strategy: matrix: - node-version: [18.19.1] + node-version: [18.14.0] steps: - uses: actions/checkout@v2 - name: Use Node.js ${{ matrix.node-version }} @@ -62,7 +62,7 @@ jobs: runs-on: ubuntu-latest strategy: matrix: - node-version: [18.19.1] + node-version: [18.14.0] steps: - name: Checkout uses: actions/checkout@v4 @@ -79,7 +79,7 @@ jobs: # runs-on: ubuntu-latest # strategy: # matrix: - # node-version: [18.19.1] + # node-version: [18.14.0] # steps: - name: SonarCloud Scan uses: SonarSource/sonarcloud-github-action@master diff --git a/.node-version b/.node-version index 3c5535cf6..e6db45a90 100644 --- a/.node-version +++ b/.node-version @@ -1 +1 @@ -18.19.1 +18.14.0 diff --git a/Dockerfile b/Dockerfile index 4e8c9fb5a..ab0567f45 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -FROM node:18.19.1-alpine AS package +FROM node:18.17.0-alpine AS package ARG NEXT_PUBLIC_UMAMI_SITE_ID ARG NEXT_PUBLIC_RECAPTCHA_SITEKEY @@ -40,7 +40,7 @@ RUN NEXT_PUBLIC_UMAMI_SITE_ID=$NEXT_PUBLIC_UMAMI_SITE_ID \ NEXT_PUBLIC_ORY_SDK_URL=$NEXT_PUBLIC_ORY_SDK_URL \ yarn build -FROM node:18.19.1-alpine +FROM node:18.17.0-alpine LABEL maintainer="Giovanni Rossini " diff --git a/public/locales/en/home.json b/public/locales/en/home.json index b8eaf3226..11556afa9 100644 --- a/public/locales/en/home.json +++ b/public/locales/en/home.json @@ -1,14 +1,13 @@ { - "title": "checking claims from your favorite personalities", + "title": "checking claims", + "subtitle0": "from your", + "subtitle1": "favorite personalities", "statsPersonalities": "personalities", "statsClaims": "claims", "statsClaimReviews": "reviews", "statsFooter": "Contribute to an internet free of disinformation", - "createAccountButton": "Sign-up", - "homeHeaderSearchTitle": "Search in our platform", - "homeHeaderSearchButton": "Search", + "createAccountButton": "Sign-up and be part of the Movement", "donateButton": "Donate to Aletheia", - "homeFeedTitle": "Results", "seeMorePersonalitiesButton": "See more Personalities", "sectionTitle1": "Personalities", "sectionTitle2": "Join the movement", diff --git a/public/locales/pt/home.json b/public/locales/pt/home.json index 42e55ec39..aa6049e2c 100644 --- a/public/locales/pt/home.json +++ b/public/locales/pt/home.json @@ -1,14 +1,13 @@ { - "title": "checagem de afirmações das suas personalidades favoritas", + "title": "checagem de afirmações", + "subtitle0": "das suas", + "subtitle1": "personalidades favoritas", "statsPersonalities": "personalidades", "statsClaims": "discursos", "statsClaimReviews": "checagens", "statsFooter": "Contribua para uma internet livre de desinformação", - "createAccountButton": "Cadastre-se", + "createAccountButton": "Cadastre-se e faça parte do Movimento", "donateButton": "Doe para Aletheia", - "homeHeaderSearchTitle": "Busque em nossa plataforma", - "homeHeaderSearchButton": "Buscar", - "homeFeedTitle": "Resultados", "seeMorePersonalitiesButton": "Veja mais personalidades", "sectionTitle1": "Personalidades", "sectionTitle2": "Junte-se ao movimento", diff --git a/server/claim/claim-revision/claim-revision.controller.ts b/server/claim/claim-revision/claim-revision.controller.ts deleted file mode 100644 index 1f89f8ca0..000000000 --- a/server/claim/claim-revision/claim-revision.controller.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Controller, Get, Param } from "@nestjs/common"; -import { ApiTags } from "@nestjs/swagger"; -import { ClaimRevisionService } from "./claim-revision.service"; - -@Controller() -export class ClaimRevisionController { - constructor(private claimRevisionService: ClaimRevisionService) {} - - @ApiTags("claim-revision") - @Get("api/claim-revision/:id") - async getById(@Param("id") id: string) { - return await this.claimRevisionService.getRevisionById(id); - } -} diff --git a/server/claim/claim-revision/claim-revision.module.ts b/server/claim/claim-revision/claim-revision.module.ts index f1b1c4bac..de89fd5e7 100644 --- a/server/claim/claim-revision/claim-revision.module.ts +++ b/server/claim/claim-revision/claim-revision.module.ts @@ -14,7 +14,6 @@ import { ParagraphModule } from "../types/paragraph/paragraph.module"; import { SpeechModule } from "../types/speech/speech.module"; import { ImageModule } from "../types/image/image.module"; import { DebateModule } from "../types/debate/debate.module"; -import { ClaimRevisionController } from "./claim-revision.controller"; const ClaimRevisionModel = MongooseModule.forFeature([ { @@ -37,7 +36,6 @@ const ClaimRevisionModel = MongooseModule.forFeature([ ViewModule, SourceModule, ], - controllers: [ClaimRevisionController], exports: [ClaimRevisionService], providers: [ClaimRevisionService], }) diff --git a/server/claim/claim-revision/claim-revision.service.ts b/server/claim/claim-revision/claim-revision.service.ts index f3622c74a..e5f01d76a 100644 --- a/server/claim/claim-revision/claim-revision.service.ts +++ b/server/claim/claim-revision/claim-revision.service.ts @@ -33,6 +33,7 @@ export class ClaimRevisionService { }; } + /** get ClaimRevision by ID */ getRevision(match) { try { return this.ClaimRevisionModel.findOne(match) @@ -42,18 +43,6 @@ export class ClaimRevisionService { throw new NotFoundException(); } } - - /** get ClaimRevision by ID */ - getRevisionById(id) { - try { - return this.ClaimRevisionModel.findById(id) - .populate("personalities") - .populate("content") - .lean(); - } catch { - throw new NotFoundException(); - } - } /** * * @param claimId an unique claim id diff --git a/server/claim/types/sentence/sentence.service.ts b/server/claim/types/sentence/sentence.service.ts index 774b270ce..6014e544b 100644 --- a/server/claim/types/sentence/sentence.service.ts +++ b/server/claim/types/sentence/sentence.service.ts @@ -135,7 +135,6 @@ export class SentenceService { "personality.name": 1, "claim.slug": 1, "claim.date": 1, - "claim._id": 1, "claim.contentModel": 1, }, }, diff --git a/src/api/claimRevision.ts b/src/api/claimRevision.ts deleted file mode 100644 index 627840778..000000000 --- a/src/api/claimRevision.ts +++ /dev/null @@ -1,23 +0,0 @@ -import axios from "axios"; - -const request = axios.create({ - withCredentials: true, - baseURL: `/api/claim-revision`, -}); - -const getClaimRevisionsById = (id) => { - return request - .get(`/${id}`) - .then((response) => { - return response.data; - }) - .catch(() => { - console.error("error while fetching"); - }); -}; - -const claimRevisionApi = { - getClaimRevisionsById, -}; - -export default claimRevisionApi; diff --git a/src/api/searchApi.ts b/src/api/searchApi.ts index 9673a2341..73004a6d4 100644 --- a/src/api/searchApi.ts +++ b/src/api/searchApi.ts @@ -44,32 +44,8 @@ const getResults = (dispatch, options: SearchOptions = {}) => { }); }; -const getFeedResults = (options: SearchOptions = {}): any => { - const params = { - type: options.type, - searchText: options.searchText, - page: options.page ? options.page : 0, - pageSize: options.pageSize ? options.pageSize : 5, - }; - - return request - .get(`/`, { params }) - .then((response) => { - const { personalities, sentences, claims } = response.data; - return { - personalities, - sentences, - claims, - }; - }) - .catch((e) => { - console.error(e); - }); -}; - const SearchApi = { getResults, - getFeedResults, }; export default SearchApi; diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 31d5fe31c..1d99c6488 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -11,7 +11,6 @@ export enum ButtonType { gray = "gray", whiteBlue = "whiteBlue", whiteBlack = "whiteBlack", - lightBlue = "lightBlue", } type AletheiaButtonProps = Omit; @@ -78,14 +77,6 @@ const AletheiaButton: (props: IAletheiaButtonProps) => JSX.Element = ( color: colors.blackSecondary, }; break; - case ButtonType.lightBlue: - buttonStyle = { - ...buttonStyle, - background: colors.lightBlueMain, - borderColor: colors.lightBlueMain, - color: colors.white, - }; - break; case ButtonType.blue: default: buttonStyle = { diff --git a/src/components/Claim/ClaimCard.tsx b/src/components/Claim/ClaimCard.tsx index e81bd960a..65f94ff56 100644 --- a/src/components/Claim/ClaimCard.tsx +++ b/src/components/Claim/ClaimCard.tsx @@ -27,17 +27,12 @@ const CommentStyled = styled(Comment)` } `; -const ClaimCard = ({ - personality, - claim, - collapsed = true, - content = null, -}) => { +const ClaimCard = ({ personality, claim, collapsed = true }) => { const { t } = useTranslation(); const dispatch = useDispatch(); const { selectedClaim } = useAppSelector((state) => state); const review = claim?.stats?.reviews[0]; - const paragraphs = content || claim.content; + const paragraphs = claim.content; const [claimContent, setClaimContent] = useState(""); const [nameSpace] = useAtom(currentNameSpace); const isSpeech = claim?.contentModel === ContentModelEnum.Speech; diff --git a/src/components/ClaimReview/ClaimReviewDrawer.tsx b/src/components/ClaimReview/ClaimReviewDrawer.tsx index d67bb479a..139054e9e 100644 --- a/src/components/ClaimReview/ClaimReviewDrawer.tsx +++ b/src/components/ClaimReview/ClaimReviewDrawer.tsx @@ -14,11 +14,12 @@ import AletheiaButton, { ButtonType } from "../Button"; import ClaimReviewView from "./ClaimReviewView"; import Loading from "../Loading"; import LargeDrawer from "../LargeDrawer"; +import { ContentModelEnum } from "../../types/enums"; import { CollaborativeEditorProvider } from "../Collaborative/CollaborativeEditorProvider"; +import { NameSpaceEnum } from "../../types/Namespace"; import { useAtom } from "jotai"; import { currentNameSpace } from "../../atoms/namespace"; import colors from "../../styles/colors"; -import { generateContentPath } from "../../utils/GetContentHref"; const ClaimReviewDrawer = () => { const [isLoading, setIsLoading] = useState(true); @@ -33,21 +34,42 @@ const ClaimReviewDrawer = () => { content, data_hash, enableCopilotChatBot, - } = useAppSelector((state) => ({ - reviewDrawerCollapsed: - state?.reviewDrawerCollapsed !== undefined - ? state?.reviewDrawerCollapsed - : true, - vw: state?.vw, - personality: state?.selectedPersonality, - claim: state?.selectedClaim, - content: state?.selectedContent, - data_hash: state?.selectedDataHash, - enableCopilotChatBot: state?.enableCopilotChatBot, - })); + } = useAppSelector((state) => { + return { + reviewDrawerCollapsed: + state?.reviewDrawerCollapsed !== undefined + ? state?.reviewDrawerCollapsed + : true, + vw: state?.vw, + personality: state?.selectedPersonality, + claim: state?.selectedClaim, + content: state?.selectedContent, + data_hash: state?.selectedDataHash, + enableCopilotChatBot: state?.enableCopilotChatBot, + }; + }); useEffect(() => setIsLoading(false), [claim, data_hash]); + let href = nameSpace !== NameSpaceEnum.Main ? `/${nameSpace}` : ""; + + const contentProps = { + [ContentModelEnum.Speech]: { + href: `${href}/personality/${personality?.slug}/claim/${claim?.slug}/sentence/${data_hash}`, + }, + [ContentModelEnum.Image]: { + href: `${href}${ + personality ? `/personality/${personality?.slug}` : "" + }/claim/${claim?.slug}/image/${data_hash}`, + }, + [ContentModelEnum.Debate]: { + href: `${href}/personality/${personality?.slug}/claim/${claim?.slug}/sentence/${data_hash}`, + }, + [ContentModelEnum.Unattributed]: { + href: `${href}/claim/${claim?.slug}/sentence/${data_hash}`, + }, + }; + return ( { setIsLoading(true)} type={ButtonType.gray} style={{ diff --git a/src/components/Form/InputSearch.tsx b/src/components/Form/InputSearch.tsx index 14375c2e9..dee554941 100644 --- a/src/components/Form/InputSearch.tsx +++ b/src/components/Form/InputSearch.tsx @@ -29,15 +29,13 @@ const InputSearch = (props) => { let loading = false; const doSearch = (e) => { - if (props.callback) { - const searchText = e.target.value; - if (timeout) clearTimeout(timeout); - timeout = setTimeout(() => { - loading = true; - props?.callback(searchText); - loading = false; - }, 1000); - } + const searchText = e.target.value; + if (timeout) clearTimeout(timeout); + timeout = setTimeout(() => { + loading = true; + props.callback(searchText); + loading = false; + }, 1000); }; return ( @@ -49,9 +47,7 @@ const InputSearch = (props) => { addonBefore={false} onChange={(e) => doSearch(e)} suffix={props.suffix || <>} - prefix={props.prefix || <>} data-cy={props["data-cy"] || "testInputSearchPersonality"} - {...props} /> ); }; diff --git a/src/components/Header/HeaderContent.tsx b/src/components/Header/HeaderContent.tsx index 166655ada..36076f659 100644 --- a/src/components/Header/HeaderContent.tsx +++ b/src/components/Header/HeaderContent.tsx @@ -18,11 +18,9 @@ import { NameSpaceEnum } from "../../types/Namespace"; import { useAtom } from "jotai"; import { currentNameSpace } from "../../atoms/namespace"; import { currentUserId } from "../../atoms/currentUser"; -import { useRouter } from "next/router"; const HeaderContent = () => { const dispatch = useDispatch(); - const router = useRouter(); const { vw } = useAppSelector((state) => state); const [userId] = useAtom(currentUserId); const hasSession = !!userId; @@ -68,7 +66,7 @@ const HeaderContent = () => { - {vw?.xs && !router.pathname.includes("/home-page") && ( + {vw?.xs && ( { - const [isLoggedIn] = useAtom(isUserLoggedIn); - - return ( - - - - - ); -}; - -export default CTASection; diff --git a/src/components/Home/CTA/CTASectionButtons.tsx b/src/components/Home/CTA/CTASectionButtons.tsx deleted file mode 100644 index b3895861f..000000000 --- a/src/components/Home/CTA/CTASectionButtons.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { Col } from "antd"; -import React from "react"; - -import { trackUmamiEvent } from "../../../lib/umami"; -import Button, { ButtonType } from "../../Button"; -import DonateButton from "../../Header/DonateButton"; -import { useAppSelector } from "../../../store/store"; -import { useTranslation } from "next-i18next"; -import { useAtom } from "jotai"; -import { isUserLoggedIn } from "../../../atoms/currentUser"; - -const CTASectionButtons = () => { - const { t } = useTranslation(); - const { vw } = useAppSelector((state) => state); - const [isLoggedIn] = useAtom(isUserLoggedIn); - const mediumDevice = vw?.md; - const smallDevice = vw?.sm; - - const handleClick = () => { - trackUmamiEvent("home-header-cta-registration-button", "registration"); - }; - - return ( - - {!isLoggedIn && ( - - - - )} - {!smallDevice && ( - - - - )} - - ); -}; - -export default CTASectionButtons; diff --git a/src/components/Home/CTA/CTASectionTitle.tsx b/src/components/Home/CTA/CTASectionTitle.tsx deleted file mode 100644 index 41cf69d6c..000000000 --- a/src/components/Home/CTA/CTASectionTitle.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Col } from "antd"; -import { useTranslation } from "next-i18next"; -import React from "react"; -import { isUserLoggedIn } from "../../../atoms/currentUser"; -import { useAtom } from "jotai"; - -const CTASectionTitle = () => { - const { t } = useTranslation(); - const [isLoggedIn] = useAtom(isUserLoggedIn); - - return ( - -

{t("home:statsFooter")}

- - ); -}; - -export default CTASectionTitle; diff --git a/src/components/Home/CTA/CTASection.style.tsx b/src/components/Home/CTASection.style.tsx similarity index 56% rename from src/components/Home/CTA/CTASection.style.tsx rename to src/components/Home/CTASection.style.tsx index f4f6c3901..2f0d15efb 100644 --- a/src/components/Home/CTA/CTASection.style.tsx +++ b/src/components/Home/CTASection.style.tsx @@ -1,26 +1,24 @@ import { Row } from "antd"; import styled from "styled-components"; -import { queries } from "../../../styles/mediaQueries"; -import colors from "../../../styles/colors"; +import { queries } from "../../styles/mediaQueries"; -const CTASectionStyle = styled(Row)` - display: flex; +const CtaSectionStyle = styled(Row)` + display: grid; + grid-template-rows: 52px auto; width: 100%; margin-top: 24px; - align-items: center; + row-gap: 24px; .CTA-title { font-size: 16px; - line-height: 20px; - color: ${colors.white}; - margin-bottom: 0; } .CTA-button-container { display: flex; flex-wrap: wrap; - justify-content: ${({ isloggedin }) => - isloggedin === "true" ? "flex-end" : "space-between"}; + justify-content: space-between; + width: 100%; + max-width: 385px; } @media ${queries.md} { @@ -33,13 +31,17 @@ const CTASectionStyle = styled(Row)` } @media ${queries.xs} { + .CTA-button-container { + display: flex; + justify-content: flex-end; + } + .CTA-title { font-size: 12px; font-weight: 700; - margin-bottom: 8px; width: 80%; } } `; -export default CTASectionStyle; +export default CtaSectionStyle; diff --git a/src/components/Home/CTASection.tsx b/src/components/Home/CTASection.tsx new file mode 100644 index 000000000..cf633383e --- /dev/null +++ b/src/components/Home/CTASection.tsx @@ -0,0 +1,82 @@ +import { Col } from "antd"; +import { useAtom } from "jotai"; +import { useTranslation } from "next-i18next"; +import React from "react"; +import { isUserLoggedIn } from "../../atoms/currentUser"; + +import { trackUmamiEvent } from "../../lib/umami"; +import colors from "../../styles/colors"; +import Button, { ButtonType } from "../Button"; +import CtaSectionStyle from "./CTASection.style"; +import DonateButton from "../Header/DonateButton"; +import { useAppSelector } from "../../store/store"; + +const CTASection = () => { + const { t } = useTranslation(); + const [isLoggedIn] = useAtom(isUserLoggedIn); + const { vw } = useAppSelector((state) => state); + + return ( + + +

+ {t("home:statsFooter")} +

+ + + {!isLoggedIn && ( + + + + )} + {!vw?.sm && ( + + + + )} + + + ); +}; + +export default CTASection; diff --git a/src/components/Home/Home.tsx b/src/components/Home/Home.tsx index f201be516..0209d0ccb 100644 --- a/src/components/Home/Home.tsx +++ b/src/components/Home/Home.tsx @@ -1,23 +1,30 @@ import { useTranslation } from "next-i18next"; import React from "react"; +import Loading from "../Loading"; import HomeContent from "./HomeContent"; -import HomeHeader from "./HomeHeader/HomeHeader"; +import HomeHeader from "./HomeHeader"; +import HomeStats from "./HomeStats"; const Home = ({ personalities, stats, href, claims }) => { const { t } = useTranslation(); - return ( - <> - - - - ); + if (stats) { + return ( + <> + + + + + ); + } else { + return ; + } }; export default Home; diff --git a/src/components/Home/HomeContent.tsx b/src/components/Home/HomeContent.tsx index 54153af7c..41635ddde 100644 --- a/src/components/Home/HomeContent.tsx +++ b/src/components/Home/HomeContent.tsx @@ -10,16 +10,9 @@ import { useAppSelector } from "../../store/store"; import ReviewsCarousel from "../ClaimReview/ReviewsCarousel"; import { useTranslation } from "next-i18next"; import DebateGrid from "../Debate/DebateGrid"; -import HomeFeed from "./HomeFeed"; - const HomeContent = ({ personalities, href, title, debateClaims }) => { - const { vw, results } = useAppSelector((state) => ({ + const { vw } = useAppSelector((state) => ({ vw: state.vw, - results: [ - state?.search?.searchResults?.personalities || [], - state?.search?.searchResults?.claims || [], - state?.search?.searchResults?.sentences || [], - ], })); const [isLoggedIn] = useAtom(isUserLoggedIn); @@ -35,9 +28,6 @@ const HomeContent = ({ personalities, href, title, debateClaims }) => { justifyContent: "center", }} > - - - {Array.isArray(debateClaims) && debateClaims.length > 0 && ( { /> diff --git a/src/components/Home/HomeFeed.tsx b/src/components/Home/HomeFeed.tsx deleted file mode 100644 index 70babc4e4..000000000 --- a/src/components/Home/HomeFeed.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import React, { useEffect, useState } from "react"; -import { Col } from "antd"; -import { useTranslation } from "next-i18next"; -import claimRevisionApi from "../../api/claimRevision"; -import Loading from "../Loading"; -import HomeFeedList from "./HomeFeedList"; - -const HomeFeed = ({ searchResults }) => { - const { t } = useTranslation(); - const [isLoading, setIsLoading] = useState(true); - const [results, setResults] = useState(searchResults); - - useEffect(() => { - const fetchFeedData = async () => { - setIsLoading(true); - - const promises = searchResults.map((result, i) => { - const type = ["personality", "claim", "sentence"][i]; - if (type === "claim") { - return Promise.all( - result.map((claim) => - claimRevisionApi - .getClaimRevisionsById(claim._id) - .then((claimRevision) => ({ - ...claimRevision, - type, - })) - ) - ); - } - - return Promise.resolve( - result.map((item) => ({ ...item, type })) - ); - }); - - const [personalities = [], claims = [], sentences = []] = - await Promise.all(promises); - setResults([...personalities, ...claims, ...sentences]); - setIsLoading(false); - }; - - fetchFeedData(); - }, [searchResults]); - - if (isLoading) { - return ; - } - - return ( - <> - {results.length > 0 && ( - -

{t("home:homeFeedTitle")}

- - - - - - )} - - ); -}; - -export default HomeFeed; diff --git a/src/components/Home/HomeFeedList.tsx b/src/components/Home/HomeFeedList.tsx deleted file mode 100644 index 7e5bd3cd8..000000000 --- a/src/components/Home/HomeFeedList.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React from "react"; -import { Col, List } from "antd"; -import PersonalityCard from "../Personality/PersonalityCard"; -import SentenceCard from "../Sentence/SentenceCard"; -import ClaimCard from "../Claim/ClaimCard"; -import styled from "styled-components"; - -const HomeFeedListStyled = styled(List)` - .ant-spin-nested-loading { - width: 100%; - } - - .ant-list-items { - display: flex; - flex-wrap: wrap; - gap: 32px; - justify-content: space-between; - } - - .item { - display: flex; - height: 100%; - flex: 1 1 250px; - } -`; - -const HomeFeedList = ({ results }) => { - return ( - ( - - {item && item.type === "personality" && ( - - )} - - {item && item.type === "claim" && ( - - )} - - {item && item.type === "sentence" && ( - - )} - - )} - /> - ); -}; - -export default HomeFeedList; diff --git a/src/components/Home/HomeHeader.style.tsx b/src/components/Home/HomeHeader.style.tsx new file mode 100644 index 000000000..2b780981b --- /dev/null +++ b/src/components/Home/HomeHeader.style.tsx @@ -0,0 +1,57 @@ +import styled from "styled-components"; +import { queries } from "../../styles/mediaQueries"; + +const HomeHeaderStyle = styled.div` + .home-header-container { + padding: 81px 0; + flex-direction: row; + align-items: flex-start; + gap: 20px; + } + + .home-header-title > h1 { + font-size: clamp(24px, 3vw, 40px); + } + + .home-header-title > h2 { + font-size: clamp(16px, 3vw, 40px); + flex-direction: column; + } + + .video-container { + height: auto; + aspect-ratio: 16 / 9; + } + + @media (min-width: 768px) and (max-width: 822px) { + .home-header-title > h1 { + font-size: clamp(24px, 3vw, 40px); + } + } + + @media ${queries.sm} { + .home-header-container { + padding: 42px 0; + flex-direction: column; + align-items: center; + } + + .home-header-title > h2 { + flex-direction: row; + } + + .video-container { + height: auto; + width: clamp(320px, 76vw, 600px); + } + } + + @media ${queries.xs} { + .home-header-container > div { + max-width: 80%; + margin: 0 auto; + } + } +`; + +export default HomeHeaderStyle; diff --git a/src/components/Home/HomeHeader.tsx b/src/components/Home/HomeHeader.tsx new file mode 100644 index 000000000..029bf9dc5 --- /dev/null +++ b/src/components/Home/HomeHeader.tsx @@ -0,0 +1,75 @@ +import { Col, Row } from "antd"; +import { useTranslation } from "next-i18next"; +import React from "react"; +import colors from "../../styles/colors"; +import AletheiaVideo from "../AletheiaVideo"; +import CTASection from "./CTASection"; +import HomeHeaderStyle from "./HomeHeader.style"; +import { useAppSelector } from "../../store/store"; + +const HomeHeader = () => { + const { t } = useTranslation(); + const { vw } = useAppSelector((state) => state); + + return ( + + + + +

+ {t("home:title")} +

+

+ {!vw?.sm ? ( + <> + {t("home:subtitle0")}  + {t("home:subtitle1")} + + ) : ( + + {t("home:subtitle0")} {t("home:subtitle1")} + + )} +

+ + + + + +
+ +
+ + + + ); +}; + +export default HomeHeader; diff --git a/src/components/Home/HomeHeader/HomeHeader.style.tsx b/src/components/Home/HomeHeader/HomeHeader.style.tsx deleted file mode 100644 index 0ad69b099..000000000 --- a/src/components/Home/HomeHeader/HomeHeader.style.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import styled from "styled-components"; -import { queries } from "../../../styles/mediaQueries"; -import colors from "../../../styles/colors"; -import { Col } from "antd"; - -const HomeHeaderStyle = styled(Col)` - display: flex; - background-color: ${colors.blackTertiary}; - align-items: center; - padding: 64px 0; - flex-wrap: wrap; - justify-content: center; - gap: 32px; - - .home-header-content { - display: flex; - flex-direction: column; - width: 100%; - align-items: center; - } - - .home-header-title > h1 { - font-size: clamp(24px, 3vw, 40px); - color: ${colors.white}; - margin: 0; - } - - .home-header-title > h2 { - font-size: clamp(16px, 3vw, 40px); - flex-direction: column; - } - - @media (min-width: 768px) and (max-width: 822px) { - .home-header-title > h1 { - font-size: clamp(24px, 3vw, 40px); - } - } - - @media ${queries.sm} { - padding: 32px 0; - flex-direction: column; - align-items: center; - - .home-header-title > h2 { - flex-direction: row; - } - } - - @media ${queries.xs} { - padding: 32px 5%; - } -`; - -export default HomeHeaderStyle; diff --git a/src/components/Home/HomeHeader/HomeHeader.tsx b/src/components/Home/HomeHeader/HomeHeader.tsx deleted file mode 100644 index 97d273091..000000000 --- a/src/components/Home/HomeHeader/HomeHeader.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { Col } from "antd"; -import React from "react"; -import CTASection from "../CTA/CTASection"; -import HomeHeaderStyle from "./HomeHeader.style"; -import HomeHeaderTitle from "./HomeHeaderTitle"; -import HomeStats from "../HomeStats"; -import HomeHeaderSearch from "./HomeHeaderSearch"; - -const HomeHeader = ({ stats }) => { - return ( - - - - - - - - - - ); -}; - -export default HomeHeader; diff --git a/src/components/Home/HomeHeader/HomeHeaderSearch.style.tsx b/src/components/Home/HomeHeader/HomeHeaderSearch.style.tsx deleted file mode 100644 index a2fa17c19..000000000 --- a/src/components/Home/HomeHeader/HomeHeaderSearch.style.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { Col } from "antd"; -import styled from "styled-components"; -import { queries } from "../../../styles/mediaQueries"; -import colors from "../../../styles/colors"; - -const HomeHeaderSearchStyled = styled(Col)` - display: flex; - flex-direction: column; - justify-content: center; - margin-top: 32px; - gap: 32px; - width: 100%; - align-items: center; - - .title { - color: ${colors.white}; - text-align: center; - margin: 0; - font-size: 24px; - } - - @media ${queries.xs} { - margin-top: 0; - - .title { - font-size: 20px; - } - } -`; - -export default HomeHeaderSearchStyled; diff --git a/src/components/Home/HomeHeader/HomeHeaderSearch.tsx b/src/components/Home/HomeHeader/HomeHeaderSearch.tsx deleted file mode 100644 index 8d3618b54..000000000 --- a/src/components/Home/HomeHeader/HomeHeaderSearch.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import React, { useState } from "react"; -import InputSearch from "../../Form/InputSearch"; -import { SearchOutlined } from "@ant-design/icons"; -import { useTranslation } from "next-i18next"; -import { useAppSelector } from "../../../store/store"; -import SearchApi from "../../../api/searchApi"; -import { ActionTypes } from "../../../store/types"; -import { useDispatch } from "react-redux"; -import AletheiaButton, { ButtonType } from "../../Button"; -import HomeHeaderSearchStyled from "./HomeHeaderSearch.style"; - -const HomeHeaderSearch = () => { - const { t } = useTranslation(); - const dispatch = useDispatch(); - const [isLoading, setIsLoading] = useState(false); - const [name, setName] = useState(""); - - const { vw } = useAppSelector((state) => ({ - vw: state.vw, - })); - - const handleInputSearch = async () => { - if (!isLoading && name.length > 3) { - setIsLoading(true); - const { personalities, sentences, claims } = - await SearchApi.getFeedResults({ - page: 1, - pageSize: 5, - searchText: name, - }); - dispatch({ - type: ActionTypes.SEARCH_RESULTS, - results: { personalities, sentences, claims }, - }); - setIsLoading(false); - } - }; - - return ( - -

{t("home:homeHeaderSearchTitle")}

- - - } - data-cy={"testInputSearchOverlay"} - onChange={({ target }) => setName(target.value)} - onKeyDown={({ key }) => { - if (key === "Enter") { - handleInputSearch(); - } - }} - /> - - {!vw?.xs && ( - - {t("home:homeHeaderSearchButton")} - - )} - - ); -}; - -export default HomeHeaderSearch; diff --git a/src/components/Home/HomeHeader/HomeHeaderTitle.tsx b/src/components/Home/HomeHeader/HomeHeaderTitle.tsx deleted file mode 100644 index acd07661b..000000000 --- a/src/components/Home/HomeHeader/HomeHeaderTitle.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from "react"; -import { Col } from "antd"; -import { useTranslation } from "next-i18next"; - -const HomeHeaderTitle = () => { - const { t } = useTranslation(); - return ( - -

{t("home:title")}

- - ); -}; - -export default HomeHeaderTitle; diff --git a/src/components/Home/HomeStats.tsx b/src/components/Home/HomeStats.tsx index 93527409d..9eb918b67 100644 --- a/src/components/Home/HomeStats.tsx +++ b/src/components/Home/HomeStats.tsx @@ -1,22 +1,34 @@ -import React from "react"; import { useTranslation } from "next-i18next"; +import React from "react"; + +import { useAppSelector } from "../../store/store"; import colors from "../../styles/colors"; import { Stats } from "./Stats"; -import { Col } from "antd"; +import { NameSpaceEnum } from "../../types/Namespace"; +import { useAtom } from "jotai"; +import { currentNameSpace } from "../../atoms/namespace"; const HomeStats = ({ stats }) => { const { t } = useTranslation(); + const { vw } = useAppSelector((state) => state); + const [nameSpace] = useAtom(currentNameSpace); + const statsHeight = vw?.sm ? 66 : 86; return ( - { - - + + ); }; diff --git a/src/components/Home/Stats.tsx b/src/components/Home/Stats.tsx index d6a46e92b..750f867cc 100644 --- a/src/components/Home/Stats.tsx +++ b/src/components/Home/Stats.tsx @@ -2,7 +2,7 @@ import React from "react"; import { useAppSelector } from "../../store/store"; import colors from "../../styles/colors"; -export const Stats = ({ info, title, style = {} }) => { +export const Stats = ({ info, title }) => { const { vw } = useAppSelector((state) => state); return (
{ display: "flex", alignItems: "center", width: "33%", - gap: "4px", - justifyContent: "center", - ...style, + justifyContent: vw?.sm ? "center" : "flex-start", }} >

{ const dispatch = useDispatch(); const [nameSpace] = useAtom(currentNameSpace); - const router = useRouter(); const { vw, isOpen } = useAppSelector((state) => { return { vw: state.vw, @@ -79,28 +77,26 @@ const SearchOverlay = () => { return ( - {!router.pathname.includes("/home-page") && ( -
- {vw?.xs && isOpen && ( - { - dispatch(actions.closeResultsOverlay()); +
+ {vw?.xs && isOpen && ( + { + dispatch(actions.closeResultsOverlay()); + }} + > + - - - )} - {(isOpen || !vw?.xs) && } -
- )} + /> + + )} + {(isOpen || !vw?.xs) && } +
); }; diff --git a/src/components/Sentence/SentenceCard.tsx b/src/components/Sentence/SentenceCard.tsx deleted file mode 100644 index 14f046595..000000000 --- a/src/components/Sentence/SentenceCard.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import React from "react"; -import ClaimCardHeader from "../Claim/ClaimCardHeader"; -import ClaimReviewCardContent from "../ClaimReview/ReviewCardCommentContent"; -import TagsList from "../ClaimReview/TagsList"; -import ClaimReviewCardActions from "../ClaimReview/ReviewCardActions"; -import { ContentModelEnum } from "../../types/enums"; -import styled from "styled-components"; -import { Comment } from "antd"; -import CardBase from "../CardBase"; -import { useAtom } from "jotai"; -import { currentNameSpace } from "../../atoms/namespace"; -import { generateContentPath } from "../../utils/GetContentHref"; - -const StyledComment = styled(Comment)` - .ant-comment-actions > li { - width: 100%; - } -`; - -const SentenceCard = ({ sentence }) => { - const { content, claim, personality } = sentence; - const contentModel = sentence?.claim[0].contentModel; - const [nameSpace] = useAtom(currentNameSpace); - const isImage = contentModel === ContentModelEnum.Image; - - return ( - - - } - content={ - - } - actions={[ - , - , - ]} - /> - - ); -}; - -export default SentenceCard; diff --git a/src/components/SentenceReport/SentenceReportCard.tsx b/src/components/SentenceReport/SentenceReportCard.tsx index 23e963eb5..b573206d9 100644 --- a/src/components/SentenceReport/SentenceReportCard.tsx +++ b/src/components/SentenceReport/SentenceReportCard.tsx @@ -12,8 +12,8 @@ import SentenceReportSummary from "./SentenceReportSummary"; import AletheiaAlert from "../AletheiaAlert"; import { useAtom } from "jotai"; import { currentNameSpace } from "../../atoms/namespace"; +import { NameSpaceEnum } from "../../types/Namespace"; import { useAppSelector } from "../../store/store"; -import { generateContentPath } from "../../utils/GetContentHref"; const { Title, Paragraph } = Typography; @@ -32,51 +32,53 @@ const SentenceReportCard = ({ }) => { const { t } = useTranslation(); const isImage = claim?.contentModel === ContentModelEnum.Image; + const isSpeech = claim?.contentModel === ContentModelEnum.Speech; + const isDebate = claim?.contentModel === ContentModelEnum.Debate; const [nameSpace] = useAtom(currentNameSpace); const { vw } = useAppSelector((state) => state); + const generateContentPath = (nameSpace, personality, claim) => { + const basePath = + nameSpace !== NameSpaceEnum.Main ? `/${nameSpace}` : ""; + let path = `${basePath}/claim/${ + claim.contentModel === ContentModelEnum.Debate + ? claim._id + : claim?.slug + }`; + + if (isSpeech || (isImage && personality)) { + path = `${basePath}/personality/${personality?.slug}/claim/${claim?.slug}`; + } + + if (isDebate) { + path += "/debate"; + } + + return path; + }; + const contentProps = { [ContentModelEnum.Speech]: { linkText: "claim:cardLinkToFullText", - contentPath: generateContentPath( - nameSpace, - personality, - claim, - claim?.contentModel - ), + contentPath: generateContentPath(nameSpace, personality, claim), title: `"(...) ${content.content}"`, speechTypeTranslation: "claim:typeSpeech", }, [ContentModelEnum.Image]: { linkText: "claim:cardLinkToImage", - contentPath: generateContentPath( - nameSpace, - personality, - claim, - claim?.contentModel - ), + contentPath: generateContentPath(nameSpace, personality, claim), title: claim.title, speechTypeTranslation: "", }, [ContentModelEnum.Debate]: { linkText: "claim:cardLinkToDebate", - contentPath: generateContentPath( - nameSpace, - personality, - claim, - claim?.contentModel - ), + contentPath: generateContentPath(nameSpace, personality, claim), title: `"(...) ${content.content}"`, speechTypeTranslation: "claim:typeDebate", }, [ContentModelEnum.Unattributed]: { linkText: "claim:cardLinkToFullText", - contentPath: generateContentPath( - nameSpace, - personality, - claim, - claim?.contentModel - ), + contentPath: generateContentPath(nameSpace, personality, claim), title: `"(...) ${content.content}"`, speechTypeTranslation: "claim:typeSpeech", }, diff --git a/src/machines/reviewTask/ReviewTaskMachineProvider.tsx b/src/machines/reviewTask/ReviewTaskMachineProvider.tsx index 9452fc67e..e26bf5a36 100644 --- a/src/machines/reviewTask/ReviewTaskMachineProvider.tsx +++ b/src/machines/reviewTask/ReviewTaskMachineProvider.tsx @@ -31,7 +31,7 @@ interface ReviewTaskMachineProviderProps { data_hash: string; children: React.ReactNode; baseMachine?: any; - baseReportModel?: any; + baseReportModel: any; publishedReview?: { review: any }; } diff --git a/src/styles/colors.ts b/src/styles/colors.ts index 674249575..ce6d238b9 100644 --- a/src/styles/colors.ts +++ b/src/styles/colors.ts @@ -14,7 +14,6 @@ const colors = { white: "rgb(255, 255, 255)", //#ffffff blackPrimary: "rgb(17, 17, 17)", //#111111 blackSecondary: "rgb(81, 81, 81)", //#515151 - blackTertiary: "rgb(32, 34, 34)", // #202222 lightYellow: "rgba(219, 159, 13, 0.3)", //#db9f0d logoWhite: "#E8E8E8", redText: "#ff4d4f", diff --git a/src/utils/GetContentHref.ts b/src/utils/GetContentHref.ts deleted file mode 100644 index af86fa0a8..000000000 --- a/src/utils/GetContentHref.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { NameSpaceEnum } from "../types/Namespace"; -import { ContentModelEnum } from "../types/enums"; - -export const generateContentPath = ( - nameSpace, - personality, - claim, - contentModel, - data_hash = null -) => { - const isSpeech = contentModel === ContentModelEnum.Speech; - const isImage = contentModel === ContentModelEnum.Image; - const isDebate = contentModel === ContentModelEnum.Debate; - - const basePath = nameSpace !== NameSpaceEnum.Main ? `/${nameSpace}` : ""; - let path = `${basePath}/claim/${ - claim.contentModel === ContentModelEnum.Debate ? claim._id : claim?.slug - }`; - - if (isSpeech || (isImage && personality)) { - path = `${basePath}/personality/${personality?.slug}/claim/${claim?.slug}`; - } - - if (isDebate) { - path += "/debate"; - } - - if (data_hash) { - path += isImage ? `/image/${data_hash}` : `/sentence/${data_hash}`; - } - - return path; -};