Commit 931cbc6c authored by Sam Gluck's avatar Sam Gluck
Browse files

Search page

parent 5c81aaa3
......@@ -88,7 +88,7 @@ export const DUMMY_RESOURCES = [
title:
'Runaway Russia: An American Woman Reports on the Russian Revolution',
description,
source: '#',
source: 'https://wikipedia.org',
likesCount: rand(),
backgroundImage: resourceBg,
collection: DUMMY_COLLECTIONS[0],
......@@ -99,7 +99,7 @@ export const DUMMY_RESOURCES = [
title:
'Runaway Russia: An American Woman Reports on the Russian Revolution',
description,
source: '#',
source: 'https://wikipedia.org',
likesCount: rand(),
backgroundImage: resourceBg,
collection: DUMMY_COLLECTIONS[0],
......@@ -110,7 +110,7 @@ export const DUMMY_RESOURCES = [
title:
'Runaway Russia: An American Woman Reports on the Russian Revolution',
description,
source: '#',
source: 'https://wikipedia.org',
likesCount: rand(),
backgroundImage: resourceBg,
collection: DUMMY_COLLECTIONS[0],
......@@ -121,7 +121,7 @@ export const DUMMY_RESOURCES = [
title:
'Runaway Russia: An American Woman Reports on the Russian Revolution',
description,
source: '#',
source: 'https://wikipedia.org',
likesCount: rand(),
backgroundImage: resourceBg,
collection: DUMMY_COLLECTIONS[0],
......@@ -132,7 +132,7 @@ export const DUMMY_RESOURCES = [
title:
'Runaway Russia: An American Woman Reports on the Russian Revolution',
description,
source: '#',
source: 'https://wikipedia.org',
likesCount: rand(),
backgroundImage: resourceBg,
collection: DUMMY_COLLECTIONS[0],
......@@ -143,7 +143,7 @@ export const DUMMY_RESOURCES = [
title:
'Runaway Russia: An American Woman Reports on the Russian Revolution',
description,
source: '#',
source: 'https://wikipedia.org',
likesCount: rand(),
backgroundImage: resourceBg,
collection: DUMMY_COLLECTIONS[0],
......@@ -154,7 +154,7 @@ export const DUMMY_RESOURCES = [
title:
'Runaway Russia: An American Woman Reports on the Russian Revolution',
description,
source: '#',
source: 'https://wikipedia.org',
likesCount: rand(),
backgroundImage: resourceBg,
collection: DUMMY_COLLECTIONS[0],
......@@ -165,7 +165,7 @@ export const DUMMY_RESOURCES = [
title:
'Runaway Russia: An American Woman Reports on the Russian Revolution',
description,
source: '#',
source: 'https://wikipedia.org',
likesCount: rand(),
backgroundImage: resourceBg,
collection: DUMMY_COLLECTIONS[0],
......
import styled from '../../../themes/styled';
export default styled.div`
margin: 10px 15px;
padding: 10px 15px;
width: 100%;
overflow: auto;
`;
......@@ -4,6 +4,8 @@ import styled from '../../../themes/styled';
import Button from '../Button/Button';
import slugify from '../../../util/slugify';
import { Link } from 'react-router-dom';
import { faHeart } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
export enum CardType {
community = 'community',
......@@ -65,6 +67,7 @@ const CardButton = styled(Button)<any>`
const ResourceBottom = styled.div`
display: flex;
align-items: center;
a,
a:hover,
......@@ -74,7 +77,9 @@ const ResourceBottom = styled.div`
text-decoration: none;
}
// likes
div:nth-child(2) {
align-items: center;
display: flex;
justify-content: flex-end;
flex-grow: 1;
......@@ -140,10 +145,12 @@ export function ResourceCard({
<StyledCard className="small" backgroundImage={backgroundImage}>
<CardTitle small>{title}</CardTitle>
<ResourceBottom>
<Link to={source as any}>
<div>Source</div>
</Link>
<div>{likesCount} likes</div>
<a target="_blank" href={source}>
Source
</a>
<div>
{likesCount} <FontAwesomeIcon icon={faHeart} />
</div>
</ResourceBottom>
</StyledCard>
</Outer>
......
import * as React from 'react';
import { Grid, Row, Col } from '@zendeskgarden/react-grid';
import { Redirect } from 'react-router';
import { Tabs, TabPanel } from '../../components/chrome/Tabs/Tabs';
export default ({ match }) => {
//TODO support maybe not good enough? e.g. no ie 11 (https://caniuse.com/#feat=urlsearchparams)
//TODO this is not SSR friendly, accessing window.location!! does react router give query params?
const urlParams = new URLSearchParams(window.location.search);
const query = urlParams.get('q');
import styled from '../../themes/styled';
import Main from '../../components/chrome/Main/Main';
import {
CollectionCard,
CommunityCard,
ResourceCard
} from '../../components/elements/Card/Card';
import {
DUMMY_COLLECTIONS,
DUMMY_COMMUNITIES,
DUMMY_RESOURCES
} from '../../__DEV__/dummy-cards';
import Logo from '../../components/brand/Logo/Logo';
import P from '../../components/typography/P/P';
if (!query) {
return <div>no query</div>;
}
const CardContainer = styled.div`
display: flex;
flex-direction: row;
flex-wrap: wrap;
`;
const yourLikes = (
<Row>
<Col size={10}>
<h4>Your Likes</h4>
<CardContainer>
<ResourceCard {...DUMMY_RESOURCES[0]} />
</CardContainer>
</Col>
</Row>
);
const communities = (
<Row>
<Col size={10}>
<h4>Communities</h4>
<CardContainer>
{DUMMY_COMMUNITIES.slice(0, 2).map(community => {
return <CommunityCard key={community.id} {...community} />;
})}
</CardContainer>
</Col>
</Row>
);
const collections = (
<Row>
<Col size={10}>
<h4>Collections</h4>
<CardContainer>
{DUMMY_COLLECTIONS.slice(0, 6).map(collection => {
return <CollectionCard key={collection.id} {...collection} />;
})}
</CardContainer>
</Col>
</Row>
);
const resources = (
<Row>
<Col size={10}>
<h4>Resources</h4>
<CardContainer>
{DUMMY_RESOURCES.slice(0, 1).map(resource => {
return <ResourceCard key={resource.id} {...resource} />;
})}
</CardContainer>
</Col>
</Row>
);
const discussions = (
<Row>
<Col size={10}>
<h4>Discussions</h4>
</Col>
</Row>
);
return <div>search: {query}</div>;
enum TabEnum {
All = 'All',
YourLikes = 'Your Likes',
Communities = 'Communities',
Collections = 'Collections',
Resources = 'Resources',
Discussions = 'Discussions'
}
const items = {
[TabEnum.YourLikes]: yourLikes,
[TabEnum.Communities]: communities,
[TabEnum.Collections]: collections,
[TabEnum.Resources]: resources,
[TabEnum.Discussions]: discussions
};
export default class extends React.Component {
state = {
tab: TabEnum.All
};
render() {
//TODO support maybe not good enough? e.g. no ie 11 (https://caniuse.com/#feat=urlsearchparams)
//TODO this is not SSR friendly, accessing window.location!! does react router give query params?
const urlParams = new URLSearchParams(window.location.search);
const query = urlParams.get('q');
if (!query) {
return <Redirect to="/" />;
}
return (
<Main>
<Grid>
<Row>
<Col size={10}>
<Logo />
<P>Search results for {query}</P>
</Col>
</Row>
<Tabs
selectedKey={this.state.tab}
onChange={tab => this.setState({ tab })}
>
<TabPanel label={TabEnum.All} key={TabEnum.All}>
<Grid>
{yourLikes}
{communities}
{collections}
{resources}
{discussions}
</Grid>
</TabPanel>
{Object.keys(items).map(item => (
<TabPanel label={item} key={item}>
<Grid>{items[item]}</Grid>
</TabPanel>
))}
</Tabs>
</Grid>
</Main>
);
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment