From c7e0de2739a2d213c9cba43f139386ed7652618d Mon Sep 17 00:00:00 2001 From: Quinton Coert Date: Mon, 7 Aug 2023 08:13:08 +0200 Subject: [PATCH 1/2] commit to ask Vuyani to help with dummy api call --- components/PathogenTable/index.tsx | 1 + components/SideMenu/index.tsx | 5 +- components/TeamTable/index.tsx | 129 ++++++++++++++++++++ components/pages/apa/team.tsx | 187 +++++++++++++++++++++++++++++ global/utils/api.ts | 2 +- global/utils/dummy_apis.ts | 37 ++++++ pages/apa/team/[pathogen-id].tsx | 15 +++ pages/apa/team/index.tsx | 11 ++ 8 files changed, 385 insertions(+), 2 deletions(-) create mode 100644 components/TeamTable/index.tsx create mode 100644 components/pages/apa/team.tsx create mode 100644 global/utils/dummy_apis.ts create mode 100644 pages/apa/team/[pathogen-id].tsx create mode 100644 pages/apa/team/index.tsx diff --git a/components/PathogenTable/index.tsx b/components/PathogenTable/index.tsx index 3e3bb76a..7e9ba83e 100644 --- a/components/PathogenTable/index.tsx +++ b/components/PathogenTable/index.tsx @@ -71,6 +71,7 @@ const PathogenTable: React.FC = () => { useEffect(() => { apiRequest(HttpMethods.GET, 'read').then((res) => { + console.log(res); setData(convertToTableData(res)); }); }, []); diff --git a/components/SideMenu/index.tsx b/components/SideMenu/index.tsx index 1ec108b2..cb9c7b14 100644 --- a/components/SideMenu/index.tsx +++ b/components/SideMenu/index.tsx @@ -8,6 +8,7 @@ import { NotificationOutlined, ProfileOutlined, UploadOutlined, + TeamOutlined, } from '@ant-design/icons'; import { Menu, MenuProps } from 'antd'; import { useRouter } from 'next/router'; @@ -18,6 +19,7 @@ const MenuItemUrls = new Map([ ['home', '/apa'], ['pathogen', '/apa/pathogens'], ['projects', '/apa/projects'], + ['team', '/apa/team'], ['submission', '/apa/projects/sars-cov-2'], ['resources', '/apa/resources'], ['guides', '/apa/guides'], @@ -48,7 +50,7 @@ function getItem( const itemsWhenAuthenticated: MenuProps['items'] = [ getItem('Home', 'home', ), getItem('Pathogen', 'pathogen', ), - getItem('Projects', 'projects', ), + getItem('Projects', 'projects', ), getItem('Submission', 'submission', ), getItem('Resources', 'resources', ), getItem('Guides', 'guides', ), @@ -60,6 +62,7 @@ const itemsWhenAuthenticated: MenuProps['items'] = [ const itemsWhenNotAuthenticated: MenuProps['items'] = [ getItem('Home', 'home', ), getItem('Pathogen', 'pathogen', ), + getItem('Team', 'team', ), // Move to is authenticated later. Just below Projects getItem('Resources', 'resources', ), getItem('Guides', 'guides', ), getItem('FAQs', 'faqs', ), diff --git a/components/TeamTable/index.tsx b/components/TeamTable/index.tsx new file mode 100644 index 00000000..06f029e4 --- /dev/null +++ b/components/TeamTable/index.tsx @@ -0,0 +1,129 @@ +import React, { useState, useEffect } from 'react'; +import Link from 'next/link'; +import { Select, Space, Table, Tag } from 'antd'; +import type { ColumnsType } from 'antd/es/table'; + +// import { apiRequest } from '@/global/utils/api'; +import { dummyApiRequest } from '@/global/utils/dummy_apis'; +import { HttpMethods } from '@/global/utils/constants'; + +// interface NumberOfSamplesType { +// count: number; +// new: number; +// } + +// interface DataType { +// key: string; +// pathogen: string; +// numberOfSamples: NumberOfSamplesType; +// } + +interface TeamDataType { + key: string; + name: string; + email: string; + institution: string; + role: string; + // edit: string; +} + + +const columns: ColumnsType = [ + { + title: 'Name', + dataIndex: 'name', + key: 'name', + }, + { + title: 'Email', + dataIndex: 'email', + key: 'email', + }, + { + title: 'Institution', + dataIndex: 'institution', + key: 'institution', + }, + { + title: 'Role', + dataIndex: 'role', + key: 'role', + render: (_, { role }) => ( + { role } + ) + }, + { + title: '', + key: 'action', + render: (_, record) => ( + + ), + }, +]; + +function convertToTableData(responseData: any[]): TeamDataType[] { + return responseData.map((element: any) => { + return { + key: element.id, + name: element.item.name, + email: element.item.email, + institution: element.item.institution, + role: element.item.role, + }; + }); +} + +const TeamTable: React.FC = () => { + const [data, setData] = useState([]); + + const team_data = [ + { + id: "jameswatt", + item: { + name: "James Watt", + email: "jameswatt@gmail.com", + institution: "UWC", + role: "uploader" + } + } + ] + + useEffect(() => { + + const table_data = convertToTableData(team_data); + + console.log(table_data); + setData(table_data); + + // dummyApiRequest(HttpMethods.GET, 'teamdata').then((res) => { + // setData(convertToTableData(team_data)); + // }); + }, []); + + return ; +}; + +export default TeamTable; \ No newline at end of file diff --git a/components/pages/apa/team.tsx b/components/pages/apa/team.tsx new file mode 100644 index 00000000..0677d2cf --- /dev/null +++ b/components/pages/apa/team.tsx @@ -0,0 +1,187 @@ +/* + * + * Copyright (c) 2022 The Ontario Institute for Cancer Research. All rights reserved + * + * This program and the accompanying materials are made available under the terms of + * the GNU Affero General Public License v3.0. You should have received a copy of the + * GNU Affero General Public License along with this program. + * If not, see . + * + * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY + * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES + * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT + * SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, + * INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED + * TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; + * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER + * IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN + * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + * + */ + +import React, { useState, useEffect } from 'react'; +import { Layout, Space, Button, Typography, Input } from 'antd'; +import { css } from '@emotion/react'; + +import { InternalLink } from '@/components/Link'; +import TeamTable from '@/components/TeamTable'; + +import useAuthContext from '../../../global/hooks/useAuthContext'; +import CurrentUser from '../../NavBar/CurrentUser'; +import SideMenu from '../../SideMenu'; +import { getConfig } from '../../../global/config'; + +import PartnerLogosBanner from './PartnerLogosBanner'; + +const { Header, Footer, Sider, Content } = Layout; +const { Title } = Typography; +const { Search } = Input; + +const headerStyle: React.CSSProperties = { + textAlign: 'center', + color: '#000', + height: 64, + paddingInline: 50, + lineHeight: '64px', + backgroundColor: '#ffffff', + display: 'flex', + justifyItems: 'center', + justifyContent: 'space-between', + position: 'sticky', + top: 0, + zIndex: 1, + width: '100%', +}; + +const headerButtons: React.CSSProperties = { + display: 'flex', + justifyContent: 'space-around', + alignItems: 'center', + width: 180, +}; + +const contentStyle: React.CSSProperties = { + textAlign: 'left', + minHeight: '80vh', + lineHeight: '120px', + color: '#fff', + backgroundColor: '#F5F5F5', + display: 'flex', + flexDirection: 'column', + justifyContent: 'start', + alignItems: 'center', +}; + +const descriptiveText: React.CSSProperties = { + width: '80%', + display: 'flex', + justifyContent: 'space-between', +}; + +const siderStyle: React.CSSProperties = { + textAlign: 'center', + lineHeight: '120px', + color: '#fff', + backgroundColor: '#3ba0e9', +}; + +const footerStyle: React.CSSProperties = { + textAlign: 'center', + color: '#fff', + backgroundColor: '#ffffff', + bottom: 0, + height: 64, +}; + +const { NEXT_PUBLIC_EGO_API_ROOT, NEXT_PUBLIC_EGO_CLIENT_ID, NEXT_PUBLIC_KEYCLOAK } = getConfig(); + +const Team: React.FC = () => { + const { logout, token, userHasAccessToStudySvc } = useAuthContext(); + const [origin, setOrigin] = useState(''); + useEffect(() => { + window && setOrigin(window.location.origin); + }, []); + return ( + + +
+
+ + + APA logo + + +
+ {token === undefined && ( +
+ + +
+ )} + {token && ( +
+ +
+ )} +
+ + + + + + +
+ Your Team + {}} + enterButton + /> +
+ + + + +
+
+ +
+
+ + + + + ); +}; + +export default Team; diff --git a/global/utils/api.ts b/global/utils/api.ts index c9af6faf..0755ffa8 100644 --- a/global/utils/api.ts +++ b/global/utils/api.ts @@ -23,4 +23,4 @@ export async function apiRequest(method: HttpMethods, url = '', data = {}) { } return await response.json(); // parses JSON response into native JavaScript objects -} +} \ No newline at end of file diff --git a/global/utils/dummy_apis.ts b/global/utils/dummy_apis.ts new file mode 100644 index 00000000..0a59d542 --- /dev/null +++ b/global/utils/dummy_apis.ts @@ -0,0 +1,37 @@ +import { HttpMethods } from './constants'; + +export async function dummyApiRequest(method: HttpMethods, url = '', data = []) { + const BASE_URL = 'https://us-central1-apa-beta-e5aa0.cloudfunctions.net/app/api/'; + + if (url == 'read') { + return GetPathogenData(); + } + + if (url == 'teamdata'){ + return GetTeamData(); + } + +} + +const GetPathogenData = () => { + const data = [{"id":"amr","item":{"noOfSamples":"25","dateCreated":"2023-07-25","pathogen":"Camomile","projectId":"amr-1"}},{"id":"cholera","item":{"noOfSamples":"25","dateCreated":"2023-07-25","pathogen":"Rooibos","projectId":"cholera-1"}},{"id":"hiv","item":{"noOfSamples":"25","dateCreated":"2023-07-25","pathogen":"HIV","projectId":"hiv-1"}},{"id":"m-tuberculosis","item":{"noOfSamples":"25","dateCreated":"2023-07-25","pathogen":"M.tuberculosis","projectId":"m-tuberculosis-1"}},{"id":"malaria","item":{"noOfSamples":"20","dateCreated":"2023-07-25","pathogen":"Malaria","projectId":"malaria-1"}},{"id":"mpox","item":{"noOfSamples":"25","dateCreated":"2023-07-25","pathogen":"Mpox","projectId":"mpox-1"}},{"id":"sars-cov-2","item":{"noOfSamples":"38","dateCreated":"2023-07-01","pathogen":"SARS-CoV-2","projectId":"SARS-CoV-2 Study"}},{"id":"viral-hemorrhagic-fever","item":{"noOfSamples":"25","dateCreated":"2023-07-25","pathogen":"Viral hemorrhagic Fever","projectId":"viral-hemorrhagic-fever"}},{"id":"waste-water-surveillance","item":{"noOfSamples":"25","dateCreated":"2023-07-25","pathogen":"Waste water surveillance","projectId":"waste-water-surveillance-1"}}] + return data +} + +const GetTeamData = () => { + const data = [{"id":"jameswatt","item":{"name":"James Watt","email":"jameswatt@gmail.com","institute":"UWC","role":"uploader"}}] + return data +} + +// const GetTeamData = () => { +// const data = [ +// {"id":"jameswatt","item":{"name":"James Watt","email":"jameswatt@gmail.com","institute":"UWC","role":"uploader"}}, +// {"id":"albertcole","item":{"name":"Albert Cole","email":"albertcole@gmail.com","institute":"UWC","role":"downloader"}}, +// {"id":"alanwhite","item":{"name":"Alan White","email":"alanwhite@gmail.com","institute":"UWC","role":"downloader"}}, +// {"id":"karynwhite","item":{"name":"Karyn White","email":"karynwhite@gmail.com","institute":"UCT","role":"collaborator"}}, +// {"id":"tinacousins","item":{"name":"Tina Cousins","email":"tinacousins@gmail.com","institute":"UP","role":"administrator"}}, +// {"id":"aerinstone","item":{"name":"Aerin Stone","email":"aerinstone@gmail.com","institute":"CTIV","role":"uploader"}}, +// {"id":"hestermeek","item":{"name":"Hester Meek","email":"hestermeek@gmail.com","institute":"CTIV","role":"collaborator"}}, +// ] +// return data +// } \ No newline at end of file diff --git a/pages/apa/team/[pathogen-id].tsx b/pages/apa/team/[pathogen-id].tsx new file mode 100644 index 00000000..f6117144 --- /dev/null +++ b/pages/apa/team/[pathogen-id].tsx @@ -0,0 +1,15 @@ +/*import App from '../../components/pages/apa'; + +export default App;*/ + +import { createPage } from '../../../global/utils/pages'; +import Pathogen from '../../../components/pages/apa/pathogen'; + +const ApaHome = createPage({ + getInitialProps: async () => null, + isPublic: true, +})(() => { + return ; +}); + +export default ApaHome; diff --git a/pages/apa/team/index.tsx b/pages/apa/team/index.tsx new file mode 100644 index 00000000..e1e330a2 --- /dev/null +++ b/pages/apa/team/index.tsx @@ -0,0 +1,11 @@ +import { createPage } from '../../../global/utils/pages'; +import Team from '../../../components/pages/apa/team'; + +const TeamPage = createPage({ + getInitialProps: async () => null, + isPublic: true, +})(() => { + return ; +}); + +export default TeamPage; From afa157ee7b74c6f76888a4b6da1ab7d7f40f9134 Mon Sep 17 00:00:00 2001 From: Quinton Coert Date: Thu, 10 Aug 2023 14:22:22 +0200 Subject: [PATCH 2/2] Check in for review --- components/TeamTable/index.tsx | 76 ++++++++++++++++++++++------------ global/utils/dummy_apis.ts | 29 ++++++------- 2 files changed, 62 insertions(+), 43 deletions(-) diff --git a/components/TeamTable/index.tsx b/components/TeamTable/index.tsx index 06f029e4..0e124b45 100644 --- a/components/TeamTable/index.tsx +++ b/components/TeamTable/index.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; import Link from 'next/link'; -import { Select, Space, Table, Tag } from 'antd'; +import { Select, Space, Table, Tag, } from 'antd'; import type { ColumnsType } from 'antd/es/table'; // import { apiRequest } from '@/global/utils/api'; @@ -55,7 +55,7 @@ const columns: ColumnsType = [ { title: '', key: 'action', - render: (_, record) => ( + render: (_, { role }) => ( + + + + + + + +) + function convertToTableData(responseData: any[]): TeamDataType[] { return responseData.map((element: any) => { return { @@ -91,7 +102,8 @@ function convertToTableData(responseData: any[]): TeamDataType[] { name: element.item.name, email: element.item.email, institution: element.item.institution, - role: element.item.role, + role: element.item.role, + action: dropdownlist, }; }); } @@ -99,31 +111,43 @@ function convertToTableData(responseData: any[]): TeamDataType[] { const TeamTable: React.FC = () => { const [data, setData] = useState([]); - const team_data = [ - { - id: "jameswatt", - item: { - name: "James Watt", - email: "jameswatt@gmail.com", - institution: "UWC", - role: "uploader" - } - } - ] - - useEffect(() => { - - const table_data = convertToTableData(team_data); - - console.log(table_data); - setData(table_data); + const columns = [ + { + title: 'Name', + dataIndex: 'name', + key: 'name', + }, + { + title: 'Email', + dataIndex: 'email', + key: 'email', + }, + { + title: 'Institute', + dataIndex: 'institution', + key: 'institution', + }, + { + title: 'Role', + dataIndex: 'role', + key: 'role', + }, + { + title: '', + dataIndex: 'action', + key: 'action', + }, + ]; + + + useEffect(() => { + var dummy_data = dummyApiRequest(HttpMethods.GET, 'teamdata'); + setData(convertToTableData(dummy_data)); - // dummyApiRequest(HttpMethods.GET, 'teamdata').then((res) => { - // setData(convertToTableData(team_data)); - // }); - }, []); + }); - return
; + return
; + }; export default TeamTable; \ No newline at end of file diff --git a/global/utils/dummy_apis.ts b/global/utils/dummy_apis.ts index 0a59d542..91b74d81 100644 --- a/global/utils/dummy_apis.ts +++ b/global/utils/dummy_apis.ts @@ -1,6 +1,6 @@ import { HttpMethods } from './constants'; -export async function dummyApiRequest(method: HttpMethods, url = '', data = []) { +export function dummyApiRequest(method: HttpMethods, url = '', data = []) { const BASE_URL = 'https://us-central1-apa-beta-e5aa0.cloudfunctions.net/app/api/'; if (url == 'read') { @@ -19,19 +19,14 @@ const GetPathogenData = () => { } const GetTeamData = () => { - const data = [{"id":"jameswatt","item":{"name":"James Watt","email":"jameswatt@gmail.com","institute":"UWC","role":"uploader"}}] - return data -} - -// const GetTeamData = () => { -// const data = [ -// {"id":"jameswatt","item":{"name":"James Watt","email":"jameswatt@gmail.com","institute":"UWC","role":"uploader"}}, -// {"id":"albertcole","item":{"name":"Albert Cole","email":"albertcole@gmail.com","institute":"UWC","role":"downloader"}}, -// {"id":"alanwhite","item":{"name":"Alan White","email":"alanwhite@gmail.com","institute":"UWC","role":"downloader"}}, -// {"id":"karynwhite","item":{"name":"Karyn White","email":"karynwhite@gmail.com","institute":"UCT","role":"collaborator"}}, -// {"id":"tinacousins","item":{"name":"Tina Cousins","email":"tinacousins@gmail.com","institute":"UP","role":"administrator"}}, -// {"id":"aerinstone","item":{"name":"Aerin Stone","email":"aerinstone@gmail.com","institute":"CTIV","role":"uploader"}}, -// {"id":"hestermeek","item":{"name":"Hester Meek","email":"hestermeek@gmail.com","institute":"CTIV","role":"collaborator"}}, -// ] -// return data -// } \ No newline at end of file + const data = [ + {"id":"jameswatt","item":{"name":"James Watt","email":"jameswatt@gmail.com","institution":"UWC","role":"uploader"}}, + {"id":"calvincole","item":{"name":"Calvin Cole","email":"calvincole@gmail.com","institution":"Stellenbosch","role":"downloader"}}, + {"id":"alanwhite","item":{"name":"Alan White","email":"alanwhite@gmail.com","institution":"UWC","role":"downloader"}}, + {"id":"karynwhite","item":{"name":"Karyn White","email":"karynwhite@gmail.com","institution":"UCT","role":"collaborator"}}, + {"id":"tinacousins","item":{"name":"Tina Cousins","email":"tinacousins@gmail.com","institution":"UP","role":"administrator"}}, + {"id":"aerinstone","item":{"name":"Aerin Stone","email":"aerinstone@gmail.com","institution":"CTIV","role":"uploader"}}, + {"id":"hestermeek","item":{"name":"Hester Meek","email":"hestermeek@gmail.com","institution":"CTIV","role":"collaborator"}}, + ] + return data +} \ No newline at end of file