Skip to content

Commit 9db64ac

Browse files
fix styling and error msg issue
1 parent 135f23f commit 9db64ac

File tree

4 files changed

+344
-333
lines changed

4 files changed

+344
-333
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
};

src/pages/hackshack/f2fhelper/template.js

Lines changed: 64 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@ import { MainTitle } from '../../../components/hackshack/StyledComponents';
88
import AuthService from '../../../services/auth.service';
99
import { SEO } from '../../../components';
1010

11-
12-
1311
const Student = (props) => {
1412
const getStudentsApi = `${process.env.GATSBY_WORKSHOPCHALLENGE_API_ENDPOINT}/api/students`;
1513
const [students, setstudents] = useState([]);
@@ -40,18 +38,13 @@ const Student = (props) => {
4038
headers: { 'x-access-token': token },
4139
})
4240
.then((response) => {
43-
console.log('response ++++', response.data.length);
4441
// Map created
4542
response.data.forEach((student) => {
46-
// Check is student is assigned
47-
if (student.assigned)
48-
arr.push({ ...student });
43+
// Check is student is assigned
44+
if (student.assigned) arr.push({ ...student });
4945
});
50-
console.log('students ++++', arr.length, arr);
5146
if (arr.length <= 0)
52-
setError(
53-
'There are currently no active students. Stay tuned!',
54-
);
47+
setError('There are currently no active students. Stay tuned!');
5548
setstudents(arr);
5649
})
5750
.catch((err) => {
@@ -66,7 +59,6 @@ const Student = (props) => {
6659
});
6760
};
6861
getToken();
69-
7062
}, []);
7163

7264
console.log('students in students ', students);
@@ -76,68 +68,70 @@ const Student = (props) => {
7668
return (
7769
<Layout background="/img/hackshack/BackgroundImages/schedule-background.png">
7870
<SEO title={title} description={description} image={badgeImg} />
79-
<MainTitle>
80-
<Heading color="text-strong" margin={{ top: 'none', bottom: 'small' }}>
81-
Active Participants
82-
</Heading>
83-
</MainTitle>
84-
{}
85-
{students.length >= 0 ? (
86-
<tab>
87-
<DataTable
88-
columns={[
89-
{
90-
property: 'username',
91-
header: <Text>Username</Text>,
92-
primary: true,
93-
},
94-
{
95-
property: 'password',
96-
header: <Text>Password</Text>,
97-
},
98-
{
99-
property: 'url',
100-
header: <Text>URL</Text>,
101-
render: datum => (
102-
<Button
103-
href= {datum.url}
104-
target= "_blank"
105-
label="Connect"
106-
/>),
107-
},
108-
]}
109-
data={students}
110-
/* data={[
111-
{ username: 'Alan', password: '20' },
112-
{ username: 'Bryan', password: '30' },
113-
{ username: 'Chris', password: '40' },
114-
{ username: 'Eric', password: '80' },
115-
] } */
116-
/>
117-
</tab>
118-
) : (
119-
<Box
120-
pad="small"
121-
justify="center"
122-
margin={{ top: 'medium' }}
123-
direction="column"
124-
// background="status-critical"
125-
>
126-
{error ? (
127-
<>
128-
<Text size="large" color="status-critical" alignSelf="center">
129-
{error}
130-
</Text>
131-
<Image
132-
alt="gremlin rockin"
133-
src="/img/hackshack/gremlin-rockin.svg"
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}
134108
/>
135-
</>
109+
</tab>
136110
) : (
137-
<Box height="medium" />
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>
138132
)}
139-
</Box>
140-
)}
133+
</>
134+
</Box>
141135
</Layout>
142136
);
143137
};

0 commit comments

Comments
 (0)