mirror of
https://github.com/myfatemi04/wheelshare-frontend.git
synced 2025-04-21 11:20:17 -04:00
Merge branch 'main' of https://github.com/myfatemi04/Carpool-Frontend into main
This commit is contained in:
Joshua Hsueh
commit
0cb37c41d1
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -1,7 +1,7 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export default function AuthenticationWrapper({
|
|||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const sessionId = localStorage.getItem('session_id');
|
||||
const sessionToken = localStorage.getItem('session_token');
|
||||
// Prevent race conditions
|
||||
const [authState, setAuthState] = useState<AuthState>({
|
||||
isLoggedIn: null,
|
||||
|
|
@ -16,7 +16,7 @@ export default function AuthenticationWrapper({
|
|||
});
|
||||
|
||||
const refreshAuthState = useCallback(() => {
|
||||
if (sessionId) {
|
||||
if (sessionToken) {
|
||||
getMe().then((user) => {
|
||||
if (user) {
|
||||
setAuthState({ isLoggedIn: true, user, refreshAuthState });
|
||||
|
|
@ -27,7 +27,7 @@ export default function AuthenticationWrapper({
|
|||
} else {
|
||||
setAuthState({ isLoggedIn: false, user: null, refreshAuthState });
|
||||
}
|
||||
}, [sessionId]);
|
||||
}, [sessionToken]);
|
||||
|
||||
useEffect(() => {
|
||||
refreshAuthState();
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
import { Redirect, useLocation, useParams } from 'react-router-dom';
|
||||
import { API_ENDPOINT } from '../api/api';
|
||||
import AuthenticationContext from './AuthenticationContext';
|
||||
|
||||
export default function Authenticator() {
|
||||
const { provider } = useParams<{ provider: string }>();
|
||||
const query = new URLSearchParams(useLocation().search);
|
||||
const code = query.get('code');
|
||||
const { refreshAuthState } = useContext(AuthenticationContext);
|
||||
const [status, setStatus] = useState<'pending' | 'errored' | 'authenticated'>(
|
||||
'pending'
|
||||
);
|
||||
|
|
@ -25,6 +27,7 @@ export default function Authenticator() {
|
|||
response.json().then((json) => {
|
||||
if (json.status === 'success') {
|
||||
localStorage.setItem('session_token', json.token);
|
||||
refreshAuthState && refreshAuthState();
|
||||
setStatus('authenticated');
|
||||
} else {
|
||||
setStatus('errored');
|
||||
|
|
@ -34,7 +37,7 @@ export default function Authenticator() {
|
|||
.catch(() => {
|
||||
setStatus('errored');
|
||||
});
|
||||
}, [code, provider]);
|
||||
}, [code, provider, refreshAuthState]);
|
||||
|
||||
switch (status) {
|
||||
case 'authenticated':
|
||||
|
|
|
|||
|
|
@ -1,91 +1,72 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { API_ENDPOINT } from '../api/api';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import { makeAPIGetCall } from '../api/utils';
|
||||
|
||||
const maybePluralize = (count: number, noun: string, suffix = 's') =>
|
||||
`${count} ${noun}${count !== 1 ? suffix : ''}`;
|
||||
|
||||
const Group = () => {
|
||||
const SAMPLE_POOLS: Carpool.Pool[] = [
|
||||
{
|
||||
id: '1234',
|
||||
title: 'TJ Carpool',
|
||||
description: 'Carpool from TJ track to homes',
|
||||
start_time: '4/10/2021 3:00 PM',
|
||||
end_time: '4/10/2021 4:00 PM',
|
||||
capacity: 2,
|
||||
participant_ids: [],
|
||||
comments: [
|
||||
{
|
||||
author_id: 'joshua_hsueh',
|
||||
body: 'What is the covid vaccination status of all the participants?',
|
||||
id: 'comment_0',
|
||||
},
|
||||
],
|
||||
driver_id: 'michael',
|
||||
create_time: '0',
|
||||
update_time: '0',
|
||||
group_id: 'test_group',
|
||||
status: 'pending',
|
||||
direction: 'dropoff',
|
||||
author_id: 'michael',
|
||||
type: 'offer',
|
||||
},
|
||||
];
|
||||
|
||||
export default function Group() {
|
||||
// eslint-disable-next-line
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const [pools, setPools] = useState([
|
||||
{
|
||||
id: 1,
|
||||
pool_title: 'TJ Carpool',
|
||||
pool_text: 'Carpool from TJ track to homes',
|
||||
start_time: '4/10/2021 3:00 PM',
|
||||
end_time: '4/10/2021 4:00 PM',
|
||||
capacity: 2,
|
||||
participants: [],
|
||||
comments: [
|
||||
'What is the covid vaccination status of all the participants?',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
pool_title: 'TJ Carpool',
|
||||
pool_text: 'Carpool from TJ track to homes',
|
||||
start_time: '4/10/2021 3:00 PM',
|
||||
end_time: '4/10/2021 4:00 PM',
|
||||
capacity: 2,
|
||||
participants: [],
|
||||
comments: [
|
||||
'What is the covid vaccination status of all the participants?',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
pool_title: 'TJ Carpool',
|
||||
pool_text: 'Carpool from TJ track to homes',
|
||||
start_time: '4/10/2021 3:00 PM',
|
||||
end_time: '4/10/2021 4:00 PM',
|
||||
capacity: 2,
|
||||
participants: [],
|
||||
comments: [
|
||||
'What is the covid vaccination status of all the participants?',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
pool_title: 'TJ Carpool',
|
||||
pool_text: 'Carpool from TJ track to homes',
|
||||
start_time: '4/10/2021 3:00 PM',
|
||||
end_time: '4/10/2021 4:00 PM',
|
||||
capacity: 2,
|
||||
participants: [],
|
||||
comments: [
|
||||
'What is the covid vaccination status of all the participants?',
|
||||
],
|
||||
},
|
||||
]);
|
||||
const [group, setGroup] = useState<Carpool.Group>();
|
||||
const [pools, setPools] = useState<Carpool.Pool[]>(SAMPLE_POOLS);
|
||||
|
||||
useEffect(() => {
|
||||
console.log(process.env);
|
||||
fetch(`${API_ENDPOINT}/my_pools`)
|
||||
.then((response) => response.json())
|
||||
.then((json) => {
|
||||
if (json) {
|
||||
setPools(json.data);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
makeAPIGetCall('/group', { id }).then((res) => setGroup(res.data.data));
|
||||
}, [id]);
|
||||
|
||||
if (!group) {
|
||||
return <h1 style={{ textAlign: 'center' }}>Loading</h1>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-dark" style={{ minHeight: '100vh' }}>
|
||||
<h1
|
||||
className="d-flex justify-content-center p-4"
|
||||
style={{ backgroundColor: '#F1EAE8', fontFamily: 'Impact' }}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
padding: '1rem',
|
||||
}}
|
||||
>
|
||||
<Typography variant="h1" align="center">
|
||||
Group {group.id}
|
||||
</Typography>
|
||||
|
||||
<Typography variant="h3" align="center">
|
||||
Pools
|
||||
</h1>
|
||||
<a
|
||||
className="btn btn-large btn-success"
|
||||
href="/create_pool"
|
||||
style={{ fontFamily: 'Courier New' }}
|
||||
>
|
||||
</Typography>
|
||||
<a className="btn btn-large btn-success" href="/create_pool">
|
||||
Create Pool
|
||||
</a>
|
||||
<div className="container" style={{ fontFamily: 'Courier New' }}>
|
||||
<div className="container">
|
||||
<br></br>
|
||||
{pools.map((pool, index) => {
|
||||
let background;
|
||||
|
|
@ -100,10 +81,10 @@ const Group = () => {
|
|||
style={{ backgroundColor: background }}
|
||||
>
|
||||
<a href={'/Pool/' + pool.id} className="card-title">
|
||||
{pool.pool_title}
|
||||
{pool.title}
|
||||
</a>
|
||||
<p className="text-left">
|
||||
Capacity: {pool.participants.length} / {pool.capacity}
|
||||
Capacity: {pool.participant_ids.length} / {pool.capacity}
|
||||
</p>
|
||||
<p className="text-left">Start Time: {pool.start_time}</p>
|
||||
<p className="text-left">End Time: {pool.end_time}</p>
|
||||
|
|
@ -116,6 +97,4 @@ const Group = () => {
|
|||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Group;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ const useStyles = makeStyles({
|
|||
});
|
||||
const navLinks = [
|
||||
{ title: `Profile`, path: `/profile` },
|
||||
{ title: `Create Pool`, path: `/create_pool` },
|
||||
// { title: `Groups`, path: `/groups` },
|
||||
// { title: `MyGroups`, path: `/mygroups` },
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { useState, useEffect, useCallback, useRef, useContext } from 'react';
|
||||
import { useParams } from 'react-router';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Card from '@material-ui/core/Card';
|
||||
|
|
@ -6,33 +6,38 @@ import Textarea from '@material-ui/core/TextareaAutosize';
|
|||
import Typography from '@material-ui/core/Typography';
|
||||
import Comment from './Comment';
|
||||
import { makeAPIPostCall } from '../api/utils';
|
||||
import AuthenticationContext from './AuthenticationContext';
|
||||
|
||||
export default function Pool({ registered = false }: { registered?: boolean }) {
|
||||
// eslint-disable-next-line
|
||||
const SAMPLE_POOL = {
|
||||
id: '123',
|
||||
title: 'TJ Carpool',
|
||||
description: 'Carpool from TJ track to homes',
|
||||
start_time: '4/10/2021 3:00 PM',
|
||||
end_time: '4/10/2021 4:00 PM',
|
||||
capacity: 2,
|
||||
participant_ids: [],
|
||||
comments: [
|
||||
{
|
||||
author_id: 'myfatemi04',
|
||||
id: '1234',
|
||||
body: "what's the vaccination status of everyone?",
|
||||
},
|
||||
],
|
||||
driver_id: 'None',
|
||||
create_time: '1234',
|
||||
update_time: '1234',
|
||||
group_id: 'tj',
|
||||
status: 'pending',
|
||||
direction: 'dropoff',
|
||||
author_id: 'michael',
|
||||
type: 'offer',
|
||||
};
|
||||
|
||||
export default function Pool() {
|
||||
const id = useParams<{ id: string }>().id;
|
||||
const [pool, setPool] = useState<Carpool.Pool>({
|
||||
id: '123',
|
||||
title: 'TJ Carpool',
|
||||
description: 'Carpool from TJ track to homes',
|
||||
start_time: '4/10/2021 3:00 PM',
|
||||
end_time: '4/10/2021 4:00 PM',
|
||||
capacity: 2,
|
||||
participant_ids: [],
|
||||
comments: [
|
||||
{
|
||||
author_id: 'myfatemi04',
|
||||
id: '1234',
|
||||
body: "what's the vaccination status of everyone?",
|
||||
},
|
||||
],
|
||||
driver_id: 'None',
|
||||
create_time: '1234',
|
||||
update_time: '1234',
|
||||
group_id: 'tj',
|
||||
status: 'pending',
|
||||
direction: 'dropoff',
|
||||
author_id: 'michael',
|
||||
type: 'offer',
|
||||
});
|
||||
const [pool, setPool] = useState<Carpool.Pool>();
|
||||
const { user } = useContext(AuthenticationContext);
|
||||
|
||||
const commentTextareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const [commentStatus, setCommentStatus] = useState<
|
||||
|
|
@ -69,6 +74,20 @@ export default function Pool({ registered = false }: { registered?: boolean }) {
|
|||
[]
|
||||
);
|
||||
|
||||
const onRegister = useCallback(() => {
|
||||
if (user) {
|
||||
let userID = user.id;
|
||||
makeAPIPostCall('/join_pool', { id }).then(() => {
|
||||
if (pool) {
|
||||
setPool({
|
||||
...pool,
|
||||
participant_ids: [...pool.participant_ids, userID],
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [user, id, pool]);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/${id}`)
|
||||
.then((response) => response.json())
|
||||
|
|
@ -81,50 +100,59 @@ export default function Pool({ registered = false }: { registered?: boolean }) {
|
|||
|
||||
return (
|
||||
<Card style={{ margin: '3rem auto', padding: '1rem 1rem', width: '50%' }}>
|
||||
<Typography variant="h2" align="center">
|
||||
{pool.title}
|
||||
</Typography>
|
||||
<Typography variant="subtitle1">
|
||||
<b>Capacity</b>: {pool.participant_ids.length} / {pool.capacity}
|
||||
</Typography>
|
||||
<Typography variant="subtitle1">
|
||||
<b>Start Time</b>: {pool.start_time}
|
||||
</Typography>
|
||||
<Typography variant="subtitle1">
|
||||
<b>End Time</b>: {pool.end_time}
|
||||
</Typography>
|
||||
<Typography variant="body1">{pool.description}</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{ marginTop: '0.5rem' }}
|
||||
>
|
||||
{registered ? 'Unregister' : 'Register'}
|
||||
</Button>
|
||||
<hr />
|
||||
<Textarea
|
||||
cols={80}
|
||||
ref={commentTextareaRef}
|
||||
placeholder="Post a comment..."
|
||||
disabled={commentStatus === 'pending'}
|
||||
style={{ margin: '0.5rem 0rem' }}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={onComment}
|
||||
style={{ margin: '0.5rem 0rem' }}
|
||||
disabled={commentStatus === 'pending'}
|
||||
>
|
||||
Post Comment
|
||||
</Button>
|
||||
<Typography variant="subtitle1">
|
||||
{commentStatus === 'errored' && 'Error posting comment'}
|
||||
</Typography>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
{pool.comments.map((comment) => (
|
||||
<Comment comment={comment} key={comment.id} />
|
||||
))}
|
||||
</div>
|
||||
{pool && (
|
||||
<>
|
||||
<Typography variant="h2" align="center">
|
||||
{pool.title}
|
||||
</Typography>
|
||||
<Typography variant="subtitle1">
|
||||
<b>Capacity</b>: {pool.participant_ids.length} / {pool.capacity}
|
||||
</Typography>
|
||||
<Typography variant="subtitle1">
|
||||
<b>Start Time</b>: {pool.start_time}
|
||||
</Typography>
|
||||
<Typography variant="subtitle1">
|
||||
<b>End Time</b>: {pool.end_time}
|
||||
</Typography>
|
||||
<Typography variant="body1">{pool.description}</Typography>
|
||||
{user && (
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{ marginTop: '0.5rem' }}
|
||||
onClick={onRegister}
|
||||
>
|
||||
{pool.participant_ids.includes(user.id)
|
||||
? 'Unregister'
|
||||
: 'Register'}
|
||||
</Button>
|
||||
)}
|
||||
<hr />
|
||||
<Textarea
|
||||
cols={80}
|
||||
ref={commentTextareaRef}
|
||||
placeholder="Post a comment..."
|
||||
disabled={commentStatus === 'pending'}
|
||||
style={{ margin: '0.5rem 0rem' }}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={onComment}
|
||||
style={{ margin: '0.5rem 0rem' }}
|
||||
disabled={commentStatus === 'pending'}
|
||||
>
|
||||
Post Comment
|
||||
</Button>
|
||||
<Typography variant="subtitle1">
|
||||
{commentStatus === 'errored' && 'Error posting comment'}
|
||||
</Typography>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
{pool.comments.map((comment) => (
|
||||
<Comment comment={comment} key={comment.id} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,103 +1,95 @@
|
|||
import { CenterFocusStrong } from '@material-ui/icons';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Card from '@material-ui/core/Card';
|
||||
import CardActionArea from '@material-ui/core/CardActionArea';
|
||||
import CardActions from '@material-ui/core/CardActions';
|
||||
import CardContent from '@material-ui/core/CardContent';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
import { makeAPIGetCall } from '../api/utils';
|
||||
import AuthenticationContext from './AuthenticationContext';
|
||||
|
||||
const maybePluralize = (count: number, noun: string, suffix = 's') =>
|
||||
`${count} ${noun}${count !== 1 ? suffix : ''}`;
|
||||
const useStyles = makeStyles({
|
||||
root: {
|
||||
maxWidth: 345,
|
||||
},
|
||||
media: {
|
||||
height: 140,
|
||||
},
|
||||
});
|
||||
|
||||
const Profile = () => {
|
||||
const [state, setState] = useState({
|
||||
user: {
|
||||
username: 'HyperionLegion',
|
||||
},
|
||||
pools: [
|
||||
{
|
||||
title: 'TJ Carpool',
|
||||
description: 'Carpool from TJ track to homes',
|
||||
start_time: '4/10/2021 3:00 PM',
|
||||
id: 1,
|
||||
end_time: '4/10/2021 4:00 PM',
|
||||
capacity: 2,
|
||||
participant_ids: [],
|
||||
comments: [
|
||||
'What is the covid vaccination status of all the participants?',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'TJ Carpool',
|
||||
description: 'Carpool from TJ track to homes',
|
||||
start_time: '4/10/2021 3:00 PM',
|
||||
id: 2,
|
||||
end_time: '4/10/2021 4:00 PM',
|
||||
capacity: 2,
|
||||
participant_ids: [],
|
||||
comments: [
|
||||
'What is the covid vaccination status of all the participants?',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'TJ Carpool',
|
||||
description: 'Carpool from TJ track to homes',
|
||||
start_time: '4/10/2021 3:00 PM',
|
||||
id: 3,
|
||||
end_time: '4/10/2021 4:00 PM',
|
||||
capacity: 2,
|
||||
participant_ids: [],
|
||||
comments: [
|
||||
'What is the covid vaccination status of all the participants?',
|
||||
],
|
||||
},
|
||||
],
|
||||
groups: [],
|
||||
});
|
||||
|
||||
const callAPI = () => {
|
||||
fetch(`${process.env.REACT_APP_API_ENDPOINT}/profile/`)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
if (data !== undefined) {
|
||||
setState(data);
|
||||
}
|
||||
});
|
||||
};
|
||||
const { user } = useContext(AuthenticationContext);
|
||||
// const [groups, setGroups] = useState<Carpool.Group[]>([]);
|
||||
const [pools, setPools] = useState<Carpool.Pool[]>([]);
|
||||
const classes = useStyles();
|
||||
|
||||
useEffect(() => {
|
||||
callAPI();
|
||||
makeAPIGetCall('/my_pools').then((res) => {
|
||||
if (res.data.data) setPools(res.data.data);
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (!user) {
|
||||
return <h1>Please Sign In</h1>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-dark" style={{ minHeight: '100vh' }}>
|
||||
<div
|
||||
className=""
|
||||
style={{ minHeight: '100vh', backgroundColor: '#F1EAE8' }}
|
||||
>
|
||||
<h1
|
||||
className="d-flex justify-content-center p-4"
|
||||
style={{ backgroundColor: '#F1EAE8', fontFamily: 'Courier New' }}
|
||||
style={{ backgroundColor: '#F1EAE8' }}
|
||||
>
|
||||
Profile
|
||||
</h1>
|
||||
<div className="container" style={{ fontFamily: 'Courier New', alignSelf: 'center' }}>
|
||||
<h2 style={{color: '#FFFFFF'}}><u>{state.user.username}'s Pools</u></h2>
|
||||
<div className="container">
|
||||
<h2>
|
||||
<u>{user.username}'s Pools</u>
|
||||
</h2>
|
||||
<div className="">
|
||||
{state.pools.map((pool, index) => {
|
||||
let background;
|
||||
if (index % 2 === 0) {
|
||||
background = '#F1EAE8';
|
||||
} else {
|
||||
background = '#FFFFFF';
|
||||
}
|
||||
{pools.map((pool) => {
|
||||
return (
|
||||
<div
|
||||
className="card card-body text-left"
|
||||
style={{ backgroundColor: background }}
|
||||
<Card
|
||||
className={classes.root + 'd-inline-flex'}
|
||||
style={{ margin: '0.5rem' }}
|
||||
>
|
||||
<a href={'/Pool/' + pool.id} className="card-title">
|
||||
{pool.title}
|
||||
</a>
|
||||
<p className="text-left">
|
||||
Capacity: {pool.participant_ids.length} / {pool.capacity}
|
||||
</p>
|
||||
<p className="text-left">Start Time: {pool.start_time}</p>
|
||||
<p className="text-left">End Time: {pool.end_time}</p>
|
||||
<p className="" style={{color: '#9E6105'}}>
|
||||
{maybePluralize(pool.comments.length, 'comment')}
|
||||
</p>
|
||||
</div>
|
||||
<CardActionArea href={'/pool/' + pool.id}>
|
||||
<CardContent>
|
||||
<Typography gutterBottom variant="h5" component="h2">
|
||||
{pool.title}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="textSecondary"
|
||||
component="p"
|
||||
>
|
||||
{pool.description}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
<CardActions>
|
||||
<Button
|
||||
size="small"
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
let link: string = 'localhost:3000/pool/' + pool.id;
|
||||
navigator.clipboard.writeText(link);
|
||||
}}
|
||||
>
|
||||
Share
|
||||
</Button>
|
||||
<Button
|
||||
href={'/pool/' + pool.id}
|
||||
size="small"
|
||||
color="primary"
|
||||
>
|
||||
Learn More
|
||||
</Button>
|
||||
</CardActions>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user