From 6ca61b71b4422abcde58c287a109d04ab4c42f3a Mon Sep 17 00:00:00 2001
From: Aiste Tamosauskiene <aistetamosauskiene@gmail.com>
Date: Wed, 28 Apr 2021 11:49:39 +0300
Subject: [PATCH] Workshop task create organization tasks page

---
 src/App.tsx                                   |  5 +
 .../queries/organization-tasks.graphql        |  8 ++
 src/graphql/types.ts                          | 95 ++++++++++++++++++-
 src/navigation.ts                             |  1 +
 src/pages/OrganizationTasks.test.tsx          | 52 ++++++++++
 src/pages/OrganizationTasksPage.tsx           | 43 +++++++++
 6 files changed, 200 insertions(+), 4 deletions(-)
 create mode 100644 src/graphql/queries/organization-tasks.graphql
 create mode 100644 src/pages/OrganizationTasks.test.tsx
 create mode 100644 src/pages/OrganizationTasksPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 1d724b23..6f2d3496 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -55,6 +55,11 @@ export default function App() {
                             path="/animal/:id"
                             component={React.lazy(() => import('./pages/AnimalDetailsPage'))}
                         />
+                        <PrivateRoute
+                            exact
+                            path="/organization-tasks"
+                            component={React.lazy(() => import('./pages/OrganizationTasksPage'))}
+                        />
                         <Route
                             exact
                             path="/search"
diff --git a/src/graphql/queries/organization-tasks.graphql b/src/graphql/queries/organization-tasks.graphql
new file mode 100644
index 00000000..e6a05398
--- /dev/null
+++ b/src/graphql/queries/organization-tasks.graphql
@@ -0,0 +1,8 @@
+query GetOrganizationTasks {
+    organizationTasks {
+        id
+        title
+        description
+        isDone
+    }
+}
diff --git a/src/graphql/types.ts b/src/graphql/types.ts
index f7e551d7..8e43fdce 100644
--- a/src/graphql/types.ts
+++ b/src/graphql/types.ts
@@ -9,6 +9,8 @@ export type Scalars = {
     Boolean: boolean;
     Int: number;
     Float: number;
+    /** The `Upload` scalar type represents a file upload. */
+    Upload: any;
 };
 
 export type Query = {
@@ -37,6 +39,14 @@ export type Query = {
      * breeds(species: "2", language: "lt")
      */
     breeds?: Maybe<Array<Maybe<Breed>>>;
+    /**
+     * Get all chipCompanies.
+     *
+     * Examples:
+     *
+     * chipCompanies(language: "lt")
+     */
+    chipCompanies?: Maybe<Array<Maybe<ChipCompany>>>;
     /**
      * Get all colors.
      *
@@ -52,6 +62,22 @@ export type Query = {
      * events(language: "lt")
      */
     events?: Maybe<Array<Maybe<Events>>>;
+    /**
+     * Get all former animal owners.
+     *
+     * Examples:
+     *
+     * formerAnimalOwners
+     */
+    formerAnimalOwners?: Maybe<Array<Maybe<FormerAnimalOwner>>>;
+    /**
+     * Get a former animal owner with a specific ID.
+     *
+     * Examples:
+     *
+     * formerAnimalOwner(id: 1)
+     */
+    formerAnimalOwner?: Maybe<FormerAnimalOwner>;
     /**
      * Get all genders.
      *
@@ -60,6 +86,7 @@ export type Query = {
      * genders(language: "lt")
      */
     genders?: Maybe<Array<Maybe<Gender>>>;
+    municipalities?: Maybe<Array<Maybe<Municipality>>>;
     /**
      * Lookup an organization.
      *
@@ -76,6 +103,8 @@ export type Query = {
      * organizations
      */
     organizations?: Maybe<Array<Maybe<Organization>>>;
+    organizationTasks?: Maybe<Array<Maybe<OrganizationTask>>>;
+    organizationTask?: Maybe<OrganizationTask>;
     _empty?: Maybe<Scalars['String']>;
     /**
      * Get all species.
@@ -115,11 +144,19 @@ export type QueryAnimalArgs = {
     id: Scalars['Int'];
 };
 
+export type QueryAnimalsArgs = {
+    ids?: Maybe<Array<Scalars['Int']>>;
+};
+
 export type QueryBreedsArgs = {
     species: Scalars['String'];
     language: Scalars['String'];
 };
 
+export type QueryChipCompaniesArgs = {
+    language: Scalars['String'];
+};
+
 export type QueryColorsArgs = {
     language: Scalars['String'];
 };
@@ -128,6 +165,10 @@ export type QueryEventsArgs = {
     language: Scalars['String'];
 };
 
+export type QueryFormerAnimalOwnerArgs = {
+    id: Scalars['Int'];
+};
+
 export type QueryGendersArgs = {
     language: Scalars['String'];
 };
@@ -136,6 +177,10 @@ export type QueryOrganizationArgs = {
     id: Scalars['Int'];
 };
 
+export type QueryOrganizationTaskArgs = {
+    id?: Maybe<Scalars['Int']>;
+};
+
 export type QuerySpeciesArgs = {
     language: Scalars['String'];
 };
@@ -273,8 +318,8 @@ export type CreateAnimalInput = {
     organization: Scalars['Int'];
     /** Status */
     status?: Maybe<AnimalStatus>;
-    /** Image URL */
-    image_url?: Maybe<Scalars['String']>;
+    /** Image File */
+    image?: Maybe<Scalars['Upload']>;
     /** Comments */
     comments?: Maybe<Scalars['String']>;
     /** AnimalRegistration */
@@ -294,8 +339,8 @@ export type UpdateAnimalInput = {
     organization?: Maybe<Scalars['Int']>;
     /** Status */
     status?: Maybe<AnimalStatus>;
-    /** Image URL */
-    image_url?: Maybe<Scalars['String']>;
+    /** Image File */
+    image?: Maybe<Scalars['Upload']>;
     /** Comments */
     comments?: Maybe<Scalars['String']>;
     /** AnimalRegistration */
@@ -481,6 +526,15 @@ export type Breed = {
     value: Scalars['String'];
 };
 
+/** Represents a chip company. */
+export type ChipCompany = {
+    __typename?: 'ChipCompany';
+    /** Chip company id */
+    id: Scalars['String'];
+    /** Chip company value */
+    value: Scalars['String'];
+};
+
 /** Represents a color. */
 export type Color = {
     __typename?: 'Color';
@@ -557,6 +611,19 @@ export type EventsAnimalMedicalArgs = {
     animalId: Scalars['Int'];
 };
 
+/** Represents a former animal owner. */
+export type FormerAnimalOwner = {
+    __typename?: 'FormerAnimalOwner';
+    /** Former animal owner ID, e.g., 1 */
+    id: Scalars['Int'];
+    /** Former animal owner name */
+    name: Scalars['String'];
+    /** Former animal owner surname */
+    surname?: Maybe<Scalars['String']>;
+    /** Former animal owner phone number */
+    phone?: Maybe<Scalars['String']>;
+};
+
 /** Represents a gender. */
 export type Gender = {
     __typename?: 'Gender';
@@ -566,6 +633,17 @@ export type Gender = {
     value: Scalars['String'];
 };
 
+export type Municipality = {
+    __typename?: 'municipality';
+    id: Scalars['Int'];
+    name: Scalars['String'];
+};
+
+export type Subscription = {
+    __typename?: 'Subscription';
+    organizationCreated?: Maybe<Organization>;
+};
+
 /** Represents an organization. */
 export type Organization = {
     __typename?: 'Organization';
@@ -615,6 +693,15 @@ export type UpdateOrganizationInput = {
     phone?: Maybe<Scalars['String']>;
 };
 
+export type OrganizationTask = {
+    __typename?: 'OrganizationTask';
+    id: Scalars['Int'];
+    title?: Maybe<Scalars['String']>;
+    description?: Maybe<Scalars['String']>;
+    organization: Scalars['Int'];
+    isDone?: Maybe<Scalars['Boolean']>;
+};
+
 /** Represents a breed. */
 export type Species = {
     __typename?: 'Species';
diff --git a/src/navigation.ts b/src/navigation.ts
index 5bf4ae6f..3d4daf70 100644
--- a/src/navigation.ts
+++ b/src/navigation.ts
@@ -11,6 +11,7 @@ const navigation: Array<NavigationItem> = [
     { authRequired: true, title: 'Animals', to: '/animal-list', pageTitle: 'Animal list' },
     { authRequired: true, title: 'Favourites', to: '/favourites', pageTitle: 'Favourites' },
     { authRequired: true, title: 'Reports', to: '/reports', pageTitle: 'Reports' },
+    { authRequired: true, title: 'Organization Tasks', to: '/organization-tasks', pageTitle: 'Organization Tasks' },
 ];
 
 export { navigation };
diff --git a/src/pages/OrganizationTasks.test.tsx b/src/pages/OrganizationTasks.test.tsx
new file mode 100644
index 00000000..ffaeecda
--- /dev/null
+++ b/src/pages/OrganizationTasks.test.tsx
@@ -0,0 +1,52 @@
+import { loader } from 'graphql.macro';
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+
+import { screen } from '@testing-library/react';
+import { renderWithMockProvider } from '../test-utils/render-mock-provider';
+import OrganizationTasksPage from './OrganizationTasksPage';
+
+jest.mock('@material-ui/lab/Skeleton', () => () => <div>Loading...</div>);
+const GET_ORGANIZATION_TASKS = loader('../graphql/queries/organization-tasks.graphql');
+test('should have loading state', () => {
+    renderWithMockProvider(<OrganizationTasksPage />, { query: GET_ORGANIZATION_TASKS });
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+});
+test('should handle error state', async () => {
+    renderWithMockProvider(<OrganizationTasksPage />, {
+        query: GET_ORGANIZATION_TASKS,
+        error: new Error('Something went wrong'),
+    });
+    // Wait for the application to update
+    await act(async () => new Promise(resolve => setTimeout(resolve, 0)));
+    expect(screen.getByText('Oooops! Something went wrong')).toBeInTheDocument();
+});
+test('should load organization tasks', async () => {
+    renderWithMockProvider(<OrganizationTasksPage />, {
+        query: GET_ORGANIZATION_TASKS,
+        data: {
+            organizationTasks: [
+                { title: 'Organiz', id: 1, description: 'This is description', organization: 2, isDone: true },
+            ],
+        },
+    });
+    // Wait for the application to update
+    await act(async () => new Promise(resolve => setTimeout(resolve, 0)));
+    expect(screen.getByText('Organiz')).toBeInTheDocument();
+    expect(screen.getByText('This is description')).toBeInTheDocument();
+    expect(screen.getByText('Task is done')).toBeInTheDocument();
+});
+test('should load organization tasks without title', async () => {
+    renderWithMockProvider(<OrganizationTasksPage />, {
+        query: GET_ORGANIZATION_TASKS,
+        data: {
+            organizationTasks: [
+                { title: '', id: 1, description: 'This is description', organization: 2, isDone: true },
+            ],
+        },
+    });
+    // Wait for the application to update
+    await act(async () => new Promise(resolve => setTimeout(resolve, 0)));
+    expect(screen.getByText('This is description')).toBeInTheDocument();
+    expect(screen.getByText('Task is done')).toBeInTheDocument();
+});
diff --git a/src/pages/OrganizationTasksPage.tsx b/src/pages/OrganizationTasksPage.tsx
new file mode 100644
index 00000000..27cf3f04
--- /dev/null
+++ b/src/pages/OrganizationTasksPage.tsx
@@ -0,0 +1,43 @@
+import { loader } from 'graphql.macro';
+import React from 'react';
+
+import { useQuery } from '@apollo/client';
+import { Box, Card, CardContent, Typography } from '@material-ui/core';
+import { Skeleton } from '@material-ui/lab';
+import { OrganizationTask } from '../graphql/types';
+import Page from './Page';
+
+const GET_ORGANIZATION_TASKS_QUERY = loader('src/graphql/queries/organization-tasks.graphql');
+
+export default function OrganizationTasksPage() {
+    const { loading, data, error } = useQuery(GET_ORGANIZATION_TASKS_QUERY);
+
+    if (loading) {
+        return <Skeleton animation="wave" variant="rect" height="70vh" width="40vw" />;
+    }
+    if (error) {
+        return <Typography variant="h6">Oooops! Something went wrong</Typography>;
+    }
+
+    if (!data?.organizationTasks) {
+        return <Typography variant="h6">Sorry, no data found.</Typography>;
+    }
+
+    return (
+        <Page title="Organization Tasks">
+            {data.organizationTasks.map((task: OrganizationTask) => (
+                <Box key={task.id} width="40vw" my={1}>
+                    <Card>
+                        <CardContent>
+                            <Typography variant="body1">{task.title}</Typography>
+                            <Typography variant="body1">{task.description}</Typography>
+                        </CardContent>
+                        <Box bgcolor={task.isDone ? 'lightGreen' : 'pink'} height="50px" p={1.5}>
+                            <Typography align="center">{task.isDone ? 'Task is done' : 'Task to be taken'}</Typography>
+                        </Box>
+                    </Card>
+                </Box>
+            ))}
+        </Page>
+    );
+}