forked from scg-unibe-ch/ese2018-team2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5722778
commit 92a2c24
Showing
5 changed files
with
150 additions
and
80 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,35 +1,56 @@ | ||
import {Button, Card} from "semantic-ui-react"; | ||
import {Button, Card, Header, Loader} from "semantic-ui-react"; | ||
import * as React from "react"; | ||
import {SingletonRouter} from "next/router"; | ||
import Link from "next/link"; | ||
import ApolloError from 'apollo-boost'; | ||
|
||
interface StudentJobCardProps { | ||
router?: SingletonRouter, | ||
job: { | ||
id: string, | ||
title: string, | ||
description: string | ||
} | ||
}, | ||
loading: boolean, | ||
error: ApolloError; | ||
} | ||
|
||
|
||
const StudentJobCard: React.SFC<StudentJobCardProps> = ({router, job}) => ( | ||
<Card> | ||
<Card.Content> | ||
<Card.Header>{job.title}</Card.Header> | ||
<Card.Description> | ||
{job.description} | ||
</Card.Description> | ||
</Card.Content> | ||
<Card.Content extra> | ||
<div className='ui two buttons'> | ||
<Button icon="star"/> | ||
<Link href={{pathname: "/jobs/detail", query: {id: job.id}}}> | ||
<Button icon="eye"/> | ||
</Link> | ||
</div> | ||
</Card.Content> | ||
</Card> | ||
); | ||
const StudentJobCard: React.SFC<StudentJobCardProps> = ({router, job, loading, error}) => { | ||
|
||
if (loading) { | ||
return ( | ||
<Card> | ||
<Loader/> | ||
</Card> | ||
); | ||
} | ||
if (error) { | ||
return ( | ||
<Card> | ||
<Header as="h3">Ooops</Header> | ||
</Card> | ||
); | ||
} | ||
|
||
return ( | ||
<Card> | ||
<Card.Content> | ||
<Card.Header>{job.title}</Card.Header> | ||
<Card.Description> | ||
{job.description} | ||
</Card.Description> | ||
</Card.Content> | ||
<Card.Content extra> | ||
<div className='ui two buttons'> | ||
<Button icon="star"/> | ||
<Link href={{pathname: "/jobs/detail", query: {id: job.id}}}> | ||
<Button icon="eye"/> | ||
</Link> | ||
</div> | ||
</Card.Content> | ||
</Card> | ||
); | ||
}; | ||
|
||
export default StudentJobCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,21 +1,87 @@ | ||
import {SingletonRouter} from "next/router"; | ||
import * as React from "react"; | ||
import {Header, Segment} from "semantic-ui-react"; | ||
import withAuthorization from "../../Auth/withAuthorization"; | ||
import {Card, Header, Loader, Segment} from "semantic-ui-react"; | ||
import {ApolloError} from "apollo-boost"; | ||
import {Query} from "react-apollo"; | ||
import StudentJobCard from "../StudentJobCard"; | ||
import gql from "graphql-tag"; | ||
|
||
interface WatchingJobs { | ||
jobs: { | ||
id: string; | ||
name: string; | ||
description: string; | ||
organisation: { | ||
id: string; | ||
name: string | ||
} | ||
}[]; | ||
} | ||
|
||
interface StudentWatchingProps { | ||
router?: SingletonRouter; | ||
loading: boolean; | ||
error: ApolloError; | ||
data: WatchingJobs | ||
} | ||
|
||
const StudentWatching: React.SFC<StudentWatchingProps> = () => { | ||
const GET_WATCHING_JOBS = gql` | ||
query WatchingJobs { | ||
jobs { | ||
id | ||
title | ||
description | ||
organization { | ||
id | ||
name | ||
} | ||
} | ||
} | ||
`; | ||
|
||
const StudentWatching: React.SFC<StudentWatchingProps> = ({data, error, loading}) => { | ||
|
||
if (loading) { | ||
return ( | ||
<Segment> | ||
<Header as="h3">Watching</Header> | ||
<Card.Group itemsPerRow={3} centered> | ||
<Card><Loader/></Card> | ||
<Card><Loader/></Card> | ||
<Card><Loader/></Card> | ||
</Card.Group> | ||
</Segment> | ||
) | ||
} | ||
|
||
if (error) { | ||
return ( | ||
<Segment> | ||
<Header as="h3">Watching</Header> | ||
<Card.Group itemsPerRow={3} centered> | ||
<Card.Header>Ooops</Card.Header> | ||
<Card><Header as="h3">Ooops</Header></Card> | ||
<Card><Header as="h3">Ooops</Header></Card> | ||
</Card.Group> | ||
</Segment> | ||
) | ||
} | ||
|
||
return ( | ||
<Segment> | ||
<Header>Watching</Header> | ||
<Card.Group itemsPerRow={3} centered> | ||
{data.jobs.map(job => ( | ||
<StudentJobCard key={job.id} job={job} loading={loading}/> | ||
))} | ||
</Card.Group> | ||
</Segment> | ||
); | ||
}; | ||
|
||
export default withAuthorization(StudentWatching); | ||
|
||
export default () => ( | ||
<Query query={GET_WATCHING_JOBS}> | ||
{({loading, error, data}) => ( | ||
<StudentWatching data={data} error={error} loading={loading}/> | ||
)} | ||
</Query> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters