From 92a2c245f29bc4b3274146d6659344f34d2cd6bb Mon Sep 17 00:00:00 2001
From: Fabio Bertagna <flbertagna@gmail.com>
Date: Fri, 2 Nov 2018 15:17:59 +0100
Subject: [PATCH] Init Watching section

---
 .../components/student/StudentJobCard.tsx     | 61 ++++++++++-----
 .../student/activity/StudentActivities.tsx    | 50 +++---------
 .../student/activity/StudentActivity.tsx      | 26 ++++++-
 .../student/watching/StudentWatching.tsx      | 78 +++++++++++++++++--
 frontend/pages/jobs.tsx                       | 15 +---
 5 files changed, 150 insertions(+), 80 deletions(-)

diff --git a/frontend/components/student/StudentJobCard.tsx b/frontend/components/student/StudentJobCard.tsx
index 2ac6efe..3e1d7c9 100644
--- a/frontend/components/student/StudentJobCard.tsx
+++ b/frontend/components/student/StudentJobCard.tsx
@@ -1,7 +1,8 @@
-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,
@@ -9,27 +10,47 @@ interface StudentJobCardProps {
         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;
diff --git a/frontend/components/student/activity/StudentActivities.tsx b/frontend/components/student/activity/StudentActivities.tsx
index 70bd411..0fcdf5e 100644
--- a/frontend/components/student/activity/StudentActivities.tsx
+++ b/frontend/components/student/activity/StudentActivities.tsx
@@ -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>
diff --git a/frontend/components/student/activity/StudentActivity.tsx b/frontend/components/student/activity/StudentActivity.tsx
index 56c964a..c899064 100644
--- a/frontend/components/student/activity/StudentActivity.tsx
+++ b/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: {
@@ -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>
diff --git a/frontend/components/student/watching/StudentWatching.tsx b/frontend/components/student/watching/StudentWatching.tsx
index 88c922b..159ceff 100644
--- a/frontend/components/student/watching/StudentWatching.tsx
+++ b/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);
\ No newline at end of file
+
+export default () => (
+    <Query query={GET_WATCHING_JOBS}>
+        {({loading, error, data}) => (
+            <StudentWatching data={data} error={error} loading={loading}/>
+        )}
+    </Query>
+);
diff --git a/frontend/pages/jobs.tsx b/frontend/pages/jobs.tsx
index a82c926..ad5cd1a 100644
--- a/frontend/pages/jobs.tsx
+++ b/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";
@@ -21,7 +14,7 @@ export const GET_ALL_JOBS = gql`
       id
       title
       description
-      organization {
+      organization {  
         id
         name
       }