Skip to content

Commit 96207ce

Browse files
sjd210sjd210
committed
Make ListViewCards into a generic component
1 parent e770e32 commit 96207ce

File tree

4 files changed

+80
-47
lines changed

4 files changed

+80
-47
lines changed

‎src/app/components/elements/list-groups/AbstractListViewItem.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,14 +85,14 @@ export interface AbstractListViewItemProps {
8585
fullWidth?: boolean;
8686
}
8787

88-
export const AbstractListViewItem = ({icon, title, subject, subtitle, breadcrumb, status, tags, testTag, url, audienceViews, previewUrl, testUrl, isCard, fullWidth}: AbstractListViewItemProps) => {
88+
export const AbstractListViewItem = ({icon, title, subject, subtitle, breadcrumb, status, tags, testTag, url, audienceViews, previewUrl, testUrl, isCard, fullWidth, ...rest}: AbstractListViewItemProps) => {
8989
const deviceSize = useDeviceSize();
9090
const isQuiz: boolean = (previewUrl && testUrl) ? true : false;
9191

9292
fullWidth = fullWidth || below["sm"](deviceSize) || ((status || audienceViews || previewUrl || testUrl) ? false : true);
9393
const colWidths = fullWidth ? [12,12,12,12,12] : isQuiz ? [12,6,6,6,6] : [12,8,7,6,7];
9494
const cardBody =
95-
<Row className="w-100 flex-row">
95+
<Row className="w-100 flex-row" {...rest}>
9696
<Col xs={colWidths[0]} md={colWidths[1]} lg={colWidths[2]} xl={colWidths[3]} xxl={colWidths[4]} className={classNames("d-flex", {"mt-3": isCard})}>
9797
<div>
9898
{icon && (

‎src/app/components/elements/list-groups/ListView.tsx

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { AbstractListViewItem, ListViewTagProps } from "./AbstractListViewItem";
33
import { ShortcutResponse, Subject, ViewingContext } from "../../../../IsaacAppTypes";
44
import { determineAudienceViews } from "../../../services/userViewingContext";
55
import { DOCUMENT_TYPE, SEARCH_RESULT_TYPE, TAG_ID, TAG_LEVEL, tags } from "../../../services";
6-
import { ListGroup } from "reactstrap";
6+
import { Col, ListGroup, Row } from "reactstrap";
77
import { TitleIconProps } from "../PageTitle";
88

99
export const QuestionListViewItem = ({item, ...rest} : {item: ShortcutResponse}) => {
@@ -50,7 +50,14 @@ export const EventListViewItem = ({item, ...rest}: {item: ShortcutResponse}) =>
5050
/>;
5151
};
5252

53-
export const ListViewCard = ({item, subject, icon, tagList, ...rest}: {item: ShortcutResponse, subject: Subject, icon: TitleIconProps, tagList: ListViewTagProps[]}) => {
53+
export interface ListViewCardProps {
54+
item: ShortcutResponse;
55+
icon: TitleIconProps;
56+
subject?: Subject;
57+
tagList?: ListViewTagProps[];
58+
}
59+
60+
export const ListViewCard = ({item, icon, subject, tagList, ...rest}: ListViewCardProps) => {
5461
return <AbstractListViewItem
5562
icon={icon}
5663
title={item.title ?? ""}
@@ -62,9 +69,30 @@ export const ListViewCard = ({item, subject, icon, tagList, ...rest}: {item: Sho
6269
/>;
6370
};
6471

72+
export const ListViewCards = ({cards}: {cards: ListViewCardProps[]}) => {
73+
const cardGrid: JSX.Element[] = [];
74+
for (let i = 0; i < cards.length; i += 2) {
75+
if (i % 2 === 0) {
76+
cardGrid.push(<Row className="w-100 link-list list-group-links ms-0 border-0" key={i}>
77+
<Col xs={12} lg={6} className="list-view-card-border">
78+
<ListViewCard {...cards[i]}/>
79+
</Col>
80+
<Col xs={12} lg={6} className="list-view-card-border">
81+
<ListViewCard {...cards[i+1]}/>
82+
</Col>
83+
</Row>);
84+
}
85+
}
86+
87+
return <div className="list-view-card-container">
88+
{cardGrid}
89+
</div>;
90+
};
91+
92+
6593
export const ListView = ({items, ...rest}: {items: ShortcutResponse[], fullWidth?: boolean}) => {
6694

67-
// Cards (e.g. the subjects on the homepage) X
95+
// Cards (e.g. the subjects on the homepage) Xxxx
6896
// Questions X
6997
// Question Packs
7098
// Quick Quizzes

‎src/app/components/site/phy/HomepagePhy.tsx

Lines changed: 27 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -5,57 +5,42 @@ import {Button, Col, Container, Row} from "reactstrap";
55
import {NewsCarousel} from "../../elements/NewsCarousel";
66
import {above, SITE_TITLE, useDeviceSize, useUserConsent} from "../../../services";
77
import {HomepageYoutubeCookieHandler} from "../../handlers/InterstitialCookieHandler";
8-
import { ListViewCard } from "../../elements/list-groups/ListView";
8+
import { ListViewCardProps, ListViewCards } from "../../elements/list-groups/ListView";
99
import { ShortcutResponse, Subject } from "../../../../IsaacAppTypes";
1010
import { ListViewTagProps } from "../../elements/list-groups/AbstractListViewItem";
1111
import { StudentDashboard } from "../../elements/StudentDashboard";
1212

13-
const getSubjectTags: { [key in Subject]: ListViewTagProps[] } = {
14-
physics: [{tag: "11-14", url: "physics/11_14"}, {tag: "GCSE", url: "physics/gcse"}, {tag: "A-Level", url: "physics/a_level"}, {tag: "University", url: "physics/university"}],
15-
maths: [{tag: "GCSE", url: "maths/gcse"}, {tag: "A-Level", url: "maths/a_level"}, {tag: "University", url: "maths/university"}],
16-
chemistry: [{tag: "GCSE", url: "chemistry/gcse"}, {tag: "A-Level", url: "chemistry/a_level"}],
17-
biology: [{tag: "A-Level", url: "biology/a_level"}],
18-
};
19-
20-
const ListViewSubjectCard = ({subject}: {subject: Subject}) => {
21-
const item: ShortcutResponse = {
22-
title: subject.charAt(0).toUpperCase() + subject.slice(1),
23-
subtitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus est vulputate augue tristique, sed vehicula turpis pellentesque.",
24-
};
25-
const tags = getSubjectTags[subject];
26-
27-
return <ListViewCard
28-
item={item}
29-
subject={subject}
30-
icon={{type: "img", icon: `/assets/phy/icons/redesign/subject-${subject}.svg`}}
31-
tagList={tags}
32-
/>;
33-
};
34-
35-
const a = <div style={{borderRadius: "10px", border: "1px solid rgb(236, 236, 236)", background:"white"}}>
36-
<Row className="w-100 link-list list-group-links ms-0 border-0">
37-
<Col xs={6} style={{borderRight: "2px solid #ececec", borderBottom: "2px solid #ececec"}}>
38-
<ListViewSubjectCard subject="physics"/>
39-
</Col>
40-
<Col xs={6} style={{borderBottom: "2px solid #ececec"}}>
41-
<ListViewSubjectCard subject="maths"/>
42-
</Col>
43-
</Row>
44-
<Row className="w-100 link-list list-group-links ms-0 border-0">
45-
<Col xs={6} style={{borderRight: "2px solid #ececec"}}>
46-
<ListViewSubjectCard subject="chemistry"/> </Col>
47-
<Col xs={6}>
48-
<ListViewSubjectCard subject="biology"/>
49-
</Col>
50-
</Row>
51-
</div>;
52-
5313
export const HomepagePhy = () => {
5414
useEffect( () => {document.title = SITE_TITLE;}, []);
5515
const {data: news} = useGetNewsPodListQuery({subject: "physics"});
5616
const user = useAppSelector(selectors.user.orNull);
5717
const deviceSize = useDeviceSize();
5818
const userConsent = useUserConsent();
19+
const subjectList: Subject[] = ["physics","maths","chemistry","biology"];
20+
const subjectTags: { [key in Subject]: ListViewTagProps[] } = {
21+
physics: [{tag: "11-14", url: "physics/11_14"}, {tag: "GCSE", url: "physics/gcse"}, {tag: "A-Level", url: "physics/a_level"}, {tag: "University", url: "physics/university"}],
22+
maths: [{tag: "GCSE", url: "maths/gcse"}, {tag: "A-Level", url: "maths/a_level"}, {tag: "University", url: "maths/university"}],
23+
chemistry: [{tag: "GCSE", url: "chemistry/gcse"}, {tag: "A-Level", url: "chemistry/a_level"}],
24+
biology: [{tag: "A-Level", url: "biology/a_level"}],
25+
};
26+
27+
const getListViewSubjectCard = ({subject}: {subject: Subject}) => {
28+
const item: ShortcutResponse = {
29+
title: subject.charAt(0).toUpperCase() + subject.slice(1),
30+
subtitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus est vulputate augue tristique, sed vehicula turpis pellentesque.",
31+
};
32+
33+
const listViewSubjectCard: ListViewCardProps = {
34+
item: item,
35+
icon: {type: "img", icon: `/assets/phy/icons/redesign/subject-${subject}.svg`},
36+
subject: subject,
37+
tagList: subjectTags[subject],
38+
};
39+
40+
return listViewSubjectCard;
41+
};
42+
43+
const cards = subjectList.map((subject: Subject) => getListViewSubjectCard({subject}));
5944

6045
return <>
6146
{/*<WarningBanner/>*/}
@@ -132,7 +117,7 @@ export const HomepagePhy = () => {
132117
<section id="navigation-cards">
133118
<Container>
134119
<h2>Explore and learn!</h2>
135-
{a}
120+
<ListViewCards cards={cards}/>
136121
</Container>
137122
</section>
138123

‎src/scss/phy/list-groups.scss

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,26 @@
1414
}
1515
}
1616

17+
.list-view-card-container {
18+
border-radius: 10px;
19+
border: 1px solid $gray-107;
20+
background: white;
21+
}
22+
23+
.list-view-card-border:not(:last-child) {
24+
border-bottom: 2px solid $gray-107;
25+
@media (min-width: 992px) {
26+
border-right: 2px solid $gray-107;
27+
border-bottom: none;
28+
}
29+
}
30+
31+
.row:not(:last-child) {
32+
.list-view-card-border {
33+
border-bottom: 2px solid $gray-107;
34+
}
35+
}
36+
1737
.status-tag {
1838
align-self: start;
1939
color: $color-neutral-500;

0 commit comments

Comments
 (0)