Merge pull request #1834 from AletheiaFact/Migrating-lists-from-home

Migrating lists from home

Author: thesocialdev

src/components/ClaimReview/ReviewsGrid.tsx

@@ -7,14 +7,8 @@ const ReviewsGrid = ({ reviews, title }) => {
         <GridList
             title={title}
             dataSource={reviews}
-            loggedInMaxColumns={2}
+            loggedInMaxColumns={12}
             disableSeeMoreButton={true}
-            gridLayout={{
-                xs: 1,
-                sm: 1,
-                md: 1,
-                lg: 1,
-            }}
             renderItem={(review) => <ReviewCard review={review} />}
         />
     );

src/components/Debate/DebateGrid.tsx

@@ -18,14 +18,7 @@ const DebateGrid = ({ debates }) => {
         <GridList
             title={"Debates"}
             dataSource={debates}
-            loggedInMaxColumns={1}
-            gridLayout={{
-                gutter: 10,
-                xs: 1,
-                sm: 1,
-                md: 1,
-                lg: 1,
-            }}
+            loggedInMaxColumns={6}
             disableSeeMoreButton={true}
             renderItem={(debateClaim) => {
                 return (
@@ -63,7 +56,7 @@ const DebateGrid = ({ debates }) => {
                             >
                                 {debateClaim.personalities.map((p) => {
                                     return (
-                                        <Grid item key={p._id} xs={12} md={5.5}>
+                                        <Grid item key={p._id} xs={12} sm={5.5}>
                                             <PersonalityMinimalCard
                                                 personality={p}
                                             />

src/components/GridList.tsx

@@ -1,72 +1,39 @@
 import SectionTitle from "./SectionTitle";
-import { Col, List, Row } from "antd";
+import { Grid } from "@mui/material";
 import React from "react";
 import Button, { ButtonType } from "./Button";
 import { ArrowForwardOutlined } from "@mui/icons-material";
-import { isUserLoggedIn } from "../atoms/currentUser";
-import { useAtom } from "jotai";
 
 const GridList = ({
     renderItem,
-    loggedInMaxColumns = 3,
+    loggedInMaxColumns = 6,
     dataSource,
     title,
     href = "",
     dataCy = "",
     seeMoreButtonLabel = "",
     disableSeeMoreButton = false,
-    gridLayout = {},
 }) => {
-    const [isLoggedIn] = useAtom(isUserLoggedIn);
-    const overrideGridLayout = isLoggedIn
-        ? {
-              xl: loggedInMaxColumns,
-              xxl: loggedInMaxColumns,
-              ...gridLayout,
-          }
-        : {
-              xl: 2,
-              xxl: 2,
-              ...gridLayout,
-          };
     return (
         <>
             <SectionTitle>{title}</SectionTitle>
 
-            <Row
-                style={{
-                    width: "100%",
-                }}
-            >
-                <List
-                    itemLayout="horizontal"
-                    dataSource={dataSource}
-                    style={{ width: "100%" }}
-                    grid={{
-                        gutter: 10,
-                        xs: 1,
-                        sm: 1,
-                        md: loggedInMaxColumns - 1,
-                        lg: 2,
-                        ...overrideGridLayout,
-                    }}
-                    renderItem={(item: any) => {
-                        return (
-                            <Col
-                                style={{
-                                    display: "flex",
-                                    height: "100%",
-                                }}
-                            >
-                                {renderItem(item)}
-                            </Col>
-                        );
-                    }}
-                />
-            </Row>
+            <Grid container columnSpacing={1}>
+                {dataSource.map((item) => (
+                    <Grid container
+                        item
+                        xs={12}
+                        md={loggedInMaxColumns}
+                        lg={6}
+                        key={item}
+                    >
+                        {renderItem(item)}
+                    </Grid>
+                ))}
+            </Grid>
 
             {!disableSeeMoreButton && (
-                <Col
+                <Grid item
                     style={{
                         display: "flex",
                         justifyContent: "center",
@@ -87,7 +54,7 @@ const GridList = ({
                             {seeMoreButtonLabel} <ArrowForwardOutlined fontSize="small"/>
                         </span>
                     </Button>
-                </Col>
+                </Grid>
             )}
         </>
     );

src/components/Home/HomeFeedList.tsx

@@ -1,21 +1,15 @@
 import React from "react";
-import { Col, List } from "antd";
+import { Grid, List } from "@mui/material";
 import PersonalityCard from "../Personality/PersonalityCard";
 import ClaimCard from "../Claim/ClaimCard";
 import styled from "styled-components";
 import ReviewCard from "../ClaimReview/ReviewCard";
 
 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;
@@ -27,39 +21,39 @@ const HomeFeedListStyled = styled(List)`
 const HomeFeedList = ({ results }) => {
     return (
         <HomeFeedListStyled
-            itemLayout="horizontal"
-            dataSource={results}
             style={{ width: "100%", display: "flex" }}
-            renderItem={(item) => (
-                <Col className="item">
-                    {item && item.type === "personality" && (
-                        <PersonalityCard personality={item} summarized={true} />
-                    )}
+        >
+            {results?.map((item) => (
+                    <Grid item className="item" key={item}>
+                        {item && item.type === "personality" && (
+                            <PersonalityCard personality={item} summarized={true} />
+                        )}
 
-                    {item && item.type === "claim" && (
-                        <ClaimCard
-                            personality={item?.personalities[0]}
-                            claim={item}
-                            content={item?.content[0]?.content}
-                        />
-                    )}
+                        {item && item.type === "claim" && (
+                            <ClaimCard
+                                personality={item?.personalities[0]}
+                                claim={item}
+                                content={item?.content[0]?.content}
+                            />
+                        )}
 
-                    {item && item.type === "sentence" && (
-                        <ReviewCard
-                            review={{
-                                personality: item?.personality,
-                                claim: item?.claim,
-                                content: {
-                                    content: item.content,
-                                    ...item,
-                                },
-                            }}
-                            summarized={true}
-                        />
-                    )}
-                </Col>
-            )}
-        />
+                        {item && item.type === "sentence" && (
+                            <ReviewCard
+                                review={{
+                                    personality: item?.personality,
+                                    claim: item?.claim,
+                                    content: {
+                                        content: item.content,
+                                        ...item,
+                                    },
+                                }}
+                                summarized={true}
+                            />
+                        )}
+                    </Grid>
+            ))
+            }
+        </HomeFeedListStyled>
     );
 };
 

src/components/Personality/PersonalitiesGrid.tsx

@@ -19,7 +19,7 @@ const PersonalitiesGrid = ({ personalities, title }) => {
         <GridList
             title={title}
             dataSource={personalities}
-            loggedInMaxColumns={2}
+            loggedInMaxColumns={6}
             href={href}
             dataCy="testSeeMorePersonality"
             seeMoreButtonLabel={t("home:seeMorePersonalitiesButton")}