Skip to content

Commit

Permalink
Init Watching section
Browse files Browse the repository at this point in the history
  • Loading branch information
DonGiovanni83 committed Nov 8, 2018
1 parent 5722778 commit 92a2c24
Show file tree
Hide file tree
Showing 5 changed files with 150 additions and 80 deletions.
61 changes: 41 additions & 20 deletions frontend/components/student/StudentJobCard.tsx
@@ -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;
50 changes: 11 additions & 39 deletions frontend/components/student/activity/StudentActivities.tsx
Expand Up @@ -26,55 +26,27 @@ interface StudentActivitiesProps {
}

export const GET_ACTIVITIES_JOBS = gql`
query StudentActivities {
jobs {
id
title
description
organization {
id
name
query StudentActivities {
jobs {
id
title
description
organization {
id
name
}
}
}
}
}
`;


const StudentActivities: React.SFC<StudentActivitiesProps> = ({router, loading, error, data}) => {

if (loading) {
return (
<Segment>
<Header as="h3">Recommended Jobs</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">Recommended Jobs</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>My Activities</Header>
<Card.Group itemsPerRow={3} centered>
{data.jobs.map(job => (
<StudentActivity key={job.id} job={job}/>
<StudentActivity key={job.id} job={job} loading={loading} error={error}/>
))}
</Card.Group>
</Segment>
Expand Down
26 changes: 22 additions & 4 deletions frontend/components/student/activity/StudentActivity.tsx
@@ -1,5 +1,6 @@
import * as React from "react";
import {Card} from "semantic-ui-react";
import {Card, Header, Loader} from "semantic-ui-react";
import ApolloError from 'apollo-boost'

interface StudentActivitiesProps {
job: {
Expand All @@ -10,11 +11,28 @@ interface StudentActivitiesProps {
id: string,
name: string
}
};

},
loading: boolean,
error: ApolloError
}

const StudentActivity: React.SFC<StudentActivitiesProps> = ({job}) => {
const StudentActivity: React.SFC<StudentActivitiesProps> = ({job, loading, error}) => {

if (loading) {
return (
<Card>
<Loader/>
</Card>
);
}
if (error) {
return (
<Card>
<Header as="h3">Ooops</Header>
</Card>
);
}

return (
<Card>
<Card.Content>
Expand Down
78 changes: 72 additions & 6 deletions frontend/components/student/watching/StudentWatching.tsx
@@ -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>
);
15 changes: 4 additions & 11 deletions frontend/pages/jobs.tsx
@@ -1,16 +1,9 @@
import { ApolloError } from "apollo-boost";
import {ApolloError} from "apollo-boost";
import gql from "graphql-tag";
import React from "react";
import { Query } from "react-apollo";
import {Query} from "react-apollo";
import "semantic-ui-css/semantic.min.css";
import {
Container,
Header,
Item,
Segment,
Button,
Popup
} from "semantic-ui-react";
import {Button, Container, Header, Item, Segment} from "semantic-ui-react";
import JobItem from "../components/joblist/JobItem";
import NavBar from "../components/layout/header/NavBar";
import Link from "next/link";
Expand All @@ -21,7 +14,7 @@ export const GET_ALL_JOBS = gql`
id
title
description
organization {
organization {
id
name
}
Expand Down

0 comments on commit 92a2c24

Please sign in to comment.