Skip to content

Commit e7784fb

Browse files
Linda Penglpatmo
Linda Peng
authored and
lpatmo
committed
Add pages folder
1 parent f80c938 commit e7784fb

File tree

17 files changed

+1112
-0
lines changed

17 files changed

+1112
-0
lines changed

‎src/pages/About/index.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import { Typography } from '@material-ui/core';
3+
4+
export default function About() {
5+
return (
6+
<>
7+
<h2>About</h2>
8+
<Typography variant="body1">lorem ipsum</Typography>
9+
</>
10+
);
11+
}

‎src/pages/About/index.stories.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from 'react';
2+
import About from './index.js';
3+
4+
export default { title: 'About' };
5+
export const withoutProps = () => <About />;

‎src/pages/Connect/index.js

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import React from 'react';
2+
import PersonalMenu from '../pageSections/Sidebar/PersonalMenu';
3+
import Grid from '@material-ui/core/Grid';
4+
import Card from '@material-ui/core/Card';
5+
import CardHeader from '@material-ui/core/CardHeader';
6+
import CardMedia from '@material-ui/core/CardMedia';
7+
import CardContent from '@material-ui/core/CardContent';
8+
import CardActions from '@material-ui/core/CardActions';
9+
import Button from '@material-ui/core/Button';
10+
11+
import { makeStyles } from '@material-ui/core/styles';
12+
13+
const useStyles = makeStyles(() => ({
14+
button: {
15+
alignSelf: 'center',
16+
},
17+
}));
18+
19+
const Connect = () => {
20+
const classes = useStyles();
21+
22+
return (
23+
<>
24+
<Grid container spacing={1}>
25+
<Grid item lg={3}>
26+
<PersonalMenu />
27+
</Grid>
28+
<Grid container item spacing={1} lg={9}>
29+
<h2>Coworking Spaces</h2>
30+
<Grid container item direction="column" spacing={3} lg={12}>
31+
<Grid item lg={4}>
32+
{/* 24/7 Non-speaking */}
33+
<Card>
34+
<CardMedia image="" />
35+
<CardHeader title="24/7 Non-Speaking Coworking Space" />
36+
<CardContent>
37+
A round-the-clock coworking space for those desiring quiet
38+
concentration.
39+
</CardContent>
40+
<CardActions>
41+
<Button
42+
variant="contained"
43+
color="primary"
44+
styles={classes.button}
45+
>
46+
Join
47+
</Button>
48+
</CardActions>
49+
</Card>
50+
</Grid>
51+
<Grid item lg={4}>
52+
{/* 24/7 Speaking */}
53+
<Card>
54+
<CardMedia image="" />
55+
<CardHeader title="24/7 Speaking Coworking Space" />
56+
<CardContent>
57+
A round-the-clock coworking space for those looking for
58+
company to interact with.
59+
</CardContent>
60+
<CardActions>
61+
<Button
62+
variant="contained"
63+
color="primary"
64+
styles={classes.button}
65+
>
66+
Join
67+
</Button>
68+
</CardActions>
69+
</Card>
70+
</Grid>
71+
<Grid item lg={8}>
72+
{/* Discussion Component */}
73+
<Card>
74+
<CardHeader title="Discussion" />
75+
<CardContent>
76+
{/* Chatbox */}
77+
<b>**Chatbox component** </b>
78+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
79+
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
80+
Ut enim ad minim veniam, quis nostrud exercitation ullamco
81+
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
82+
irure dolor in reprehenderit in voluptate velit esse cillum
83+
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
84+
cupidatat non proident, sunt in culpa qui officia deserunt
85+
mollit anim id est laborum.
86+
</CardContent>
87+
</Card>
88+
</Grid>
89+
</Grid>
90+
</Grid>
91+
</Grid>
92+
</>
93+
);
94+
};
95+
96+
export default Connect;

‎src/pages/Connect/index.stories.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react';
2+
import Connect from './index.js';
3+
import { BrowserRouter as Router } from 'react-router-dom';
4+
5+
export default { title: 'Coworking' };
6+
export const withoutProps = () => (
7+
<Router>
8+
<Connect />
9+
</Router>
10+
);

‎src/pages/Home/index.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react';
2+
import { Box, Grid } from '@material-ui/core/';
3+
import AuthForm from '../../components/Auth/AuthForm';
4+
5+
const Home = () => {
6+
return (
7+
<Grid container spacing={2}>
8+
<Grid item xs={12} sm={7}>
9+
<Box
10+
component="h1"
11+
fontWeight="fontWeightBold"
12+
fontSize={22}
13+
color="primary.main"
14+
>
15+
CodeBuddies
16+
</Box>
17+
<Box component="h2" lineHeight={1.5} mb={4} fontWeight={400}>
18+
We're a global community of people who help each other become better
19+
at software development through conversations on Slack and
20+
peer-to-peer organized study groups and virtual hangouts.
21+
</Box>
22+
<Box component="h2" fontSize={18} fontWeight={600}>
23+
Join the conversations - Create an account today.
24+
</Box>
25+
</Grid>
26+
<Grid item xs={12} sm={5}>
27+
<AuthForm />
28+
</Grid>
29+
</Grid>
30+
);
31+
};
32+
33+
export default Home;

‎src/pages/Home/index.stories.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from 'react';
2+
import Home from './index.js';
3+
4+
export default { title: 'Home' };
5+
export const withoutProps = () => <Home />;

‎src/pages/Profile/index.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
import Grid from '@material-ui/core/Grid';
3+
import { useAuth } from '../../components/Auth/AuthContext';
4+
import PersonalMenu from '../pageSections/Sidebar/PersonalMenu';
5+
6+
function Profile() {
7+
const { authTokens } = useAuth();
8+
9+
/* TODO: fetch logged-in user data in https://github.com/codebuddies/frontend/issues/100 */
10+
11+
return (
12+
<Grid container spacing={1}>
13+
<Grid item lg={3}>
14+
<PersonalMenu />
15+
</Grid>
16+
<Grid item lg={9}>
17+
<h2>Profile</h2>
18+
<p>Welcome {authTokens.username}!</p>
19+
</Grid>
20+
</Grid>
21+
);
22+
}
23+
24+
export default Profile;

‎src/pages/Resources/ResourceCard.js

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { makeStyles } from '@material-ui/core/styles';
4+
import { red } from '@material-ui/core/colors';
5+
import { Link } from 'react-router-dom';
6+
import clsx from 'clsx';
7+
import Card from '@material-ui/core/Card';
8+
import CardHeader from '@material-ui/core/CardHeader';
9+
import CardContent from '@material-ui/core/CardContent';
10+
import CardActions from '@material-ui/core/CardActions';
11+
import IconButton from '@material-ui/core/IconButton';
12+
import Typography from '@material-ui/core/Typography';
13+
import Collapse from '@material-ui/core/Collapse';
14+
import TextareaAutosize from '@material-ui/core/TextareaAutosize';
15+
import Button from '@material-ui/core/Button';
16+
import MoreVertIcon from '@material-ui/icons/MoreVert';
17+
import BookmarkIcon from '@material-ui/icons/Bookmark';
18+
import ShareIcon from '@material-ui/icons/Share';
19+
import LinkIcon from '@material-ui/icons/Link';
20+
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
21+
22+
const useStyles = makeStyles(theme => ({
23+
card: {
24+
maxWidth: 345,
25+
},
26+
media: {
27+
height: 0,
28+
paddingTop: '56.25%', // 16:9
29+
},
30+
expand: {
31+
transform: 'rotate(0deg)',
32+
marginLeft: 'auto',
33+
transition: theme.transitions.create('transform', {
34+
duration: theme.transitions.duration.shortest,
35+
}),
36+
},
37+
expandOpen: {
38+
transform: 'rotate(180deg)',
39+
},
40+
avatar: {
41+
backgroundColor: red[500],
42+
},
43+
}));
44+
45+
export const ResourceCard = ({ guid, title, created, description, url }) => {
46+
const classes = useStyles();
47+
const [expanded, setExpanded] = React.useState(false);
48+
49+
const handleExpandClick = () => {
50+
setExpanded(!expanded);
51+
};
52+
return (
53+
<Card className={classes.card}>
54+
<Link to={`/resources/${guid}`}>
55+
<CardHeader
56+
action={
57+
<IconButton aria-label="settings">
58+
<MoreVertIcon />
59+
</IconButton>
60+
}
61+
title={title}
62+
subheader={created}
63+
/>
64+
</Link>
65+
<CardContent>
66+
<Typography variant="body2" color="textSecondary" component="p">
67+
{description}
68+
</Typography>
69+
</CardContent>
70+
<CardActions disableSpacing>
71+
<IconButton aria-label="add to favorites">
72+
<BookmarkIcon />
73+
</IconButton>
74+
<IconButton aria-label="share">
75+
<ShareIcon />
76+
</IconButton>
77+
<IconButton aria-label="share">
78+
<a href={url} target="_blank" rel="noopener noreferrer">
79+
<LinkIcon />
80+
</a>
81+
</IconButton>
82+
<IconButton
83+
className={clsx(classes.expand, {
84+
[classes.expandOpen]: expanded,
85+
})}
86+
onClick={handleExpandClick}
87+
aria-expanded={expanded}
88+
aria-label="show more"
89+
>
90+
<ExpandMoreIcon />
91+
</IconButton>
92+
</CardActions>
93+
<Collapse in={expanded} timeout="auto" unmountOnExit>
94+
<CardContent>
95+
<TextareaAutosize
96+
aria-label="Review"
97+
rows={3}
98+
placeholder="Your review"
99+
/>
100+
<Button type="submit" color="primary" variant="contained">
101+
Submit
102+
</Button>
103+
</CardContent>
104+
</Collapse>
105+
</Card>
106+
);
107+
};
108+
109+
ResourceCard.propTypes = {
110+
guid: PropTypes.string,
111+
title: PropTypes.string,
112+
created: PropTypes.string,
113+
description: PropTypes.string,
114+
url: PropTypes.string,
115+
};

0 commit comments

Comments
 (0)