Skip to content

Commit 95cd6ca

Browse files
Merge pull request #2574 from hpe-dev-incubator/add-f2f-helper-page
Add f2f helper page
2 parents 6c0cf21 + 9db64ac commit 95cd6ca

File tree

5 files changed

+440
-263
lines changed

5 files changed

+440
-263
lines changed

src/pages/hackshack/challenges/template.js

Lines changed: 95 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -97,12 +97,16 @@ const Challenge = (props) => {
9797
return (
9898
<Layout background="/img/hackshack/BackgroundImages/schedule-background.png">
9999
<SEO title={title} description={description} image={badgeImg} />
100-
<MainTitle>
101-
<Heading color="text-strong" margin={{ top: 'none', bottom: 'small' }}>
102-
Challenges
103-
</Heading>
104-
</MainTitle>
105-
{/* <Text
100+
<Box style={{ minHeight: 'calc(100vh - 345px)' }}>
101+
<MainTitle>
102+
<Heading
103+
color="text-strong"
104+
margin={{ top: 'none', bottom: 'small' }}
105+
>
106+
Challenges
107+
</Heading>
108+
</MainTitle>
109+
{/* <Text
106110
color="text-strong"
107111
weight="bold"
108112
margin={{ top: 'none', bottom: 'small' }}
@@ -129,45 +133,47 @@ const Challenge = (props) => {
129133
</Anchor>
130134
.
131135
</Text> */}
132-
{/* {console.log('replays in tabs ', workshops)} */}
133-
{workshops.length > 0 ? (
134-
<Tabs activeIndex={index} onActive={onActive} justify="start">
135-
<Tab title="All">
136-
<CardGrid pad={{ top: 'medium' }} key="all">
137-
{workshops.map((workshop, i) => renderScheduleCard(workshop, i))}
138-
</CardGrid>
139-
</Tab>
140-
<Tab title="Open Source Advocate">
141-
<CardGrid pad={{ top: 'medium' }} key="os">
142-
{workshops.map(
143-
(workshop, i) =>
144-
workshop.category &&
145-
workshop.category.includes('open source') &&
146-
renderScheduleCard(workshop, i),
147-
)}
148-
</CardGrid>
149-
</Tab>
150-
<Tab title="ML Engineer">
151-
<CardGrid pad={{ top: 'medium' }} key="ifa">
152-
{workshops.map(
153-
(workshop, i) =>
154-
workshop.category &&
155-
workshop.category.includes('ml engineer') &&
156-
renderScheduleCard(workshop, i),
157-
)}
158-
</CardGrid>
159-
</Tab>
160-
<Tab title="Cloud Architect">
161-
<CardGrid pad={{ top: 'medium' }} key="hpee">
162-
{workshops.map(
163-
(workshop, i) =>
164-
workshop.category &&
165-
workshop.category.includes('cloud architect') &&
136+
{/* {console.log('replays in tabs ', workshops)} */}
137+
{workshops.length > 0 ? (
138+
<Tabs activeIndex={index} onActive={onActive} justify="start">
139+
<Tab title="All">
140+
<CardGrid pad={{ top: 'medium' }} key="all">
141+
{workshops.map((workshop, i) =>
166142
renderScheduleCard(workshop, i),
167-
)}
168-
</CardGrid>
169-
</Tab>
170-
{/* <Tab title="Data-Driven Developer">
143+
)}
144+
</CardGrid>
145+
</Tab>
146+
<Tab title="Open Source Advocate">
147+
<CardGrid pad={{ top: 'medium' }} key="os">
148+
{workshops.map(
149+
(workshop, i) =>
150+
workshop.category &&
151+
workshop.category.includes('open source') &&
152+
renderScheduleCard(workshop, i),
153+
)}
154+
</CardGrid>
155+
</Tab>
156+
<Tab title="ML Engineer">
157+
<CardGrid pad={{ top: 'medium' }} key="ifa">
158+
{workshops.map(
159+
(workshop, i) =>
160+
workshop.category &&
161+
workshop.category.includes('ml engineer') &&
162+
renderScheduleCard(workshop, i),
163+
)}
164+
</CardGrid>
165+
</Tab>
166+
<Tab title="Cloud Architect">
167+
<CardGrid pad={{ top: 'medium' }} key="hpee">
168+
{workshops.map(
169+
(workshop, i) =>
170+
workshop.category &&
171+
workshop.category.includes('cloud architect') &&
172+
renderScheduleCard(workshop, i),
173+
)}
174+
</CardGrid>
175+
</Tab>
176+
{/* <Tab title="Data-Driven Developer">
171177
<CardGrid pad={{ top: 'medium' }} key="os">
172178
{workshops.map(
173179
(workshop, i) =>
@@ -177,50 +183,51 @@ const Challenge = (props) => {
177183
)}
178184
</CardGrid>
179185
</Tab> */}
180-
<Tab title="Developer">
181-
<CardGrid pad={{ top: 'medium' }} key="os">
182-
{workshops.map(
183-
(workshop, i) =>
184-
workshop.category &&
185-
workshop.category.includes('developer') &&
186-
renderScheduleCard(workshop, i),
187-
)}
188-
</CardGrid>
189-
</Tab>
190-
<Tab title="Data Scientist">
191-
<CardGrid pad={{ top: 'medium' }} key="os">
192-
{workshops.map(
193-
(workshop, i) =>
194-
workshop.category &&
195-
workshop.category.includes('data scientist') &&
196-
renderScheduleCard(workshop, i),
197-
)}
198-
</CardGrid>
199-
</Tab>
200-
</Tabs>
201-
) : (
202-
<Box
203-
pad="small"
204-
justify="center"
205-
margin={{ top: 'medium' }}
206-
direction="column"
207-
// background="status-critical"
208-
>
209-
{error ? (
210-
<>
211-
<Text size="large" color="status-critical" alignSelf="center">
212-
{error}
213-
</Text>
214-
<Image
215-
alt="gremlin rockin"
216-
src="/img/hackshack/gremlin-rockin.svg"
217-
/>
218-
</>
219-
) : (
220-
<Box height="medium" />
221-
)}
222-
</Box>
223-
)}
186+
<Tab title="Developer">
187+
<CardGrid pad={{ top: 'medium' }} key="os">
188+
{workshops.map(
189+
(workshop, i) =>
190+
workshop.category &&
191+
workshop.category.includes('developer') &&
192+
renderScheduleCard(workshop, i),
193+
)}
194+
</CardGrid>
195+
</Tab>
196+
<Tab title="Data Scientist">
197+
<CardGrid pad={{ top: 'medium' }} key="os">
198+
{workshops.map(
199+
(workshop, i) =>
200+
workshop.category &&
201+
workshop.category.includes('data scientist') &&
202+
renderScheduleCard(workshop, i),
203+
)}
204+
</CardGrid>
205+
</Tab>
206+
</Tabs>
207+
) : (
208+
<Box
209+
pad="small"
210+
justify="center"
211+
margin={{ top: 'medium' }}
212+
direction="column"
213+
// background="status-critical"
214+
>
215+
{error ? (
216+
<>
217+
<Text size="large" color="status-critical" alignSelf="center">
218+
{error}
219+
</Text>
220+
<Image
221+
alt="gremlin rockin"
222+
src="/img/hackshack/gremlin-rockin.svg"
223+
/>
224+
</>
225+
) : (
226+
<Box height="medium" />
227+
)}
228+
</Box>
229+
)}
230+
</Box>
224231
</Layout>
225232
);
226233
};
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
// eslint-disable-next-line max-len
3+
import GrommetThemeWrapper from '../../../components/hackshack/Grommet/GrommetThemeWrapper';
4+
import Student from './template';
5+
6+
const Students = (props) => {
7+
return (
8+
<GrommetThemeWrapper>
9+
<Student {...props} />
10+
</GrommetThemeWrapper>
11+
);
12+
};
13+
14+
export default Students;
Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
/* eslint-disable max-len */
2+
import React, { useEffect, useState } from 'react';
3+
import { Heading, Text, Box, Image, DataTable, Button } from 'grommet';
4+
import axios from 'axios';
5+
import PropTypes from 'prop-types';
6+
import { Layout, ScheduleCard, CardGrid } from '../../../components/hackshack';
7+
import { MainTitle } from '../../../components/hackshack/StyledComponents';
8+
import AuthService from '../../../services/auth.service';
9+
import { SEO } from '../../../components';
10+
11+
const Student = (props) => {
12+
const getStudentsApi = `${process.env.GATSBY_WORKSHOPCHALLENGE_API_ENDPOINT}/api/students`;
13+
const [students, setstudents] = useState([]);
14+
const [error, setError] = useState('');
15+
const arr = [];
16+
const [index, setIndex] = useState(0);
17+
const onActive = (nextIndex) => setIndex(nextIndex);
18+
19+
useEffect(() => {
20+
const getToken = () => {
21+
AuthService.login().then(
22+
() => {
23+
getStudents(AuthService.getCurrentUser().accessToken);
24+
},
25+
(err) => {
26+
console.log('Error: ', err);
27+
setError(
28+
'Oops..something went wrong. The HPE Developer team is addressing the problem. Please try again later!',
29+
);
30+
},
31+
);
32+
};
33+
34+
const getStudents = (token) => {
35+
axios({
36+
method: 'GET',
37+
url: getStudentsApi,
38+
headers: { 'x-access-token': token },
39+
})
40+
.then((response) => {
41+
// Map created
42+
response.data.forEach((student) => {
43+
// Check is student is assigned
44+
if (student.assigned) arr.push({ ...student });
45+
});
46+
if (arr.length <= 0)
47+
setError('There are currently no active students. Stay tuned!');
48+
setstudents(arr);
49+
})
50+
.catch((err) => {
51+
if (err.response.status === 401) {
52+
AuthService.login().then(() => getToken());
53+
} else {
54+
console.log('catch error', err);
55+
setError(
56+
'Oops..something went wrong. The HPE Developer team is addressing the problem. Please try again later!',
57+
);
58+
}
59+
});
60+
};
61+
getToken();
62+
}, []);
63+
64+
console.log('students in students ', students);
65+
66+
const { title, description, badgeImg } = props.pageContext;
67+
68+
return (
69+
<Layout background="/img/hackshack/BackgroundImages/schedule-background.png">
70+
<SEO title={title} description={description} image={badgeImg} />
71+
<Box style={{ minHeight: 'calc(100vh - 345px)' }}>
72+
<>
73+
<MainTitle>
74+
<Heading
75+
color="text-strong"
76+
margin={{ top: 'none', bottom: 'small' }}
77+
>
78+
Active Participants
79+
</Heading>
80+
</MainTitle>
81+
{}
82+
{students.length > 0 ? (
83+
<tab>
84+
<DataTable
85+
columns={[
86+
{
87+
property: 'username',
88+
header: <Text>Username</Text>,
89+
primary: true,
90+
},
91+
{
92+
property: 'password',
93+
header: <Text>Password</Text>,
94+
},
95+
{
96+
property: 'url',
97+
header: <Text>URL</Text>,
98+
render: (datum) => (
99+
<Button
100+
href={datum.url}
101+
target="_blank"
102+
label="Connect"
103+
/>
104+
),
105+
},
106+
]}
107+
data={students}
108+
/>
109+
</tab>
110+
) : (
111+
<Box
112+
pad="small"
113+
justify="center"
114+
margin={{ top: 'medium' }}
115+
direction="column"
116+
// background="status-critical"
117+
>
118+
{error ? (
119+
<>
120+
<Text size="large" color="status-critical" alignSelf="center">
121+
{error}
122+
</Text>
123+
<Image
124+
alt="gremlin rockin"
125+
src="/img/hackshack/gremlin-rockin.svg"
126+
/>
127+
</>
128+
) : (
129+
<Box height="medium" />
130+
)}
131+
</Box>
132+
)}
133+
</>
134+
</Box>
135+
</Layout>
136+
);
137+
};
138+
139+
Student.propTypes = {
140+
pageContext: PropTypes.shape({
141+
username: PropTypes.string,
142+
password: PropTypes.string,
143+
}),
144+
};
145+
146+
export default Student;

0 commit comments

Comments
 (0)