Skip to content

Commit 0c47451

Browse files
mdtaggmdtagg
authored
Merge pull request #8 from oslabs-beta/stephenfeature
Stephenfeature
2 parents 809958c + e46be48 commit 0c47451

16 files changed

Lines changed: 175 additions & 47 deletions

File tree

‎app/components/Occupied/Occupied.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@ import AddCircleOutlineTwoToneIcon from '@material-ui/icons/AddCircleOutlineTwoT
1414

1515
// // MODALS
1616
// import AddModal from '../modals/AddModal';
17-
import EnvModal from '../../modals/EnvModal';
18-
import AddModal from '../../modals/AddModal';
19-
import AwsModal from '../../modals/AwsModal';
17+
import EnvModal from '../../modals/EnvModal/EnvModal';
18+
import AddModal from '../../modals/AddModal/AddModal';
19+
import AwsModal from '../../modals/AwsModal/AwsModal';
2020
import ProfileContainer from '../../containers/ProfileContainer';
21-
import ServicesModal from '../../modals/ServicesModal';
21+
import ServicesModal from '../../modals/ServicesModal/ServicesModal';
2222

2323
// STYLESHEETS
2424
import './Occupied.scss';

‎app/containers/ProfileContainer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useContext } from 'react';
2-
import UserModal from '../modals/UserModal';
3-
import SetAuth from '../modals/SetAuth';
2+
import UserModal from '../modals/UserModal/UserModal';
3+
import SetAuth from '../modals/SetAuth/SetAuth';
44
import { DashboardContext } from '../context/DashboardContext';
55
import { TModalSetter } from '../components/Occupied/types/Occupied';
66

app/stylesheets/AddModal.scss renamed to app/modals/AddModal/AddModal.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import './constants.scss';
1+
@import '../../stylesheets/constants.scss';
22

33
.add-container {
44
@include centerModal(30%, 500px);

app/modals/AddModal.tsx renamed to app/modals/AddModal/AddModal.tsx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
/* eslint-disable jsx-a11y/label-has-associated-control */
22
import React, { useState, useContext, useCallback } from 'react';
3-
import { DashboardContext } from '../context/DashboardContext';
4-
import '../stylesheets/AddModal.scss';
3+
import { DashboardContext } from '../../context/DashboardContext';
4+
import './AddModal.scss';
55

6-
import { TModalSetter } from '../components/Occupied/types/Occupied';
6+
import { TModalSetter } from '../../components/Occupied/types/Occupied';
7+
import ServiceDBType from './ServiceDBType';
8+
import ServicesDescription from'./ServicesDescription';
79

810
interface IFields {
911
typeOfService: string;
@@ -60,7 +62,8 @@ const AddModal: React.FC<TModalSetter> = React.memo(({ setModal }) => {
6062
</div>
6163
<form onSubmit={handleSubmit}>
6264
<p>Required*</p>
63-
<div>
65+
<ServiceDBType typeOfService={typeOfService} handleChange={handleChange} database={database}/>
66+
{/* <div>
6467
<label htmlFor="serv-type">
6568
Type of Service<span>*</span>
6669
</label>
@@ -84,8 +87,9 @@ const AddModal: React.FC<TModalSetter> = React.memo(({ setModal }) => {
8487
<option value="SQL">SQL</option>
8588
<option value="MongoDB">MongoDB</option>
8689
</select>
87-
</div>
88-
<div>
90+
</div> */}
91+
<ServicesDescription URI={URI} name={name} description={description}/>
92+
{/* <div>
8993
<label htmlFor="db-uri">
9094
URI<span>*</span>
9195
</label>
@@ -121,7 +125,7 @@ const AddModal: React.FC<TModalSetter> = React.memo(({ setModal }) => {
121125
onChange={e => handleChange(e)}
122126
placeholder="Add a short description"
123127
/>
124-
</div>
128+
</div> */}
125129
<button>Submit</button>
126130
</form>
127131
</div>

‎app/modals/AddModal/ServiceDBType.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from 'react';
2+
3+
4+
const ServiceDBType = (props) => {
5+
return (
6+
<>
7+
<div>
8+
<label htmlFor="serv-type">
9+
Type of Service<span>*</span>
10+
</label>
11+
<select
12+
id="serv-type"
13+
name="typeOfService"
14+
value={props.typeOfService}
15+
onChange={e => props.handleChange(e)}
16+
>
17+
<option value="Docker">Docker</option>
18+
<option value="gRPC">gRPC</option>
19+
<option value="Kubernetes">Kubernetes</option>
20+
<option value="Microservices">Microservices</option>
21+
</select>
22+
</div>
23+
<div>
24+
<label htmlFor="db-type">
25+
Type of Database<span>*</span>
26+
</label>
27+
<select id="db-type" name="database" value={props.database} onChange={e => props.handleChange(e)}>
28+
<option value="SQL">SQL</option>
29+
<option value="MongoDB">MongoDB</option>
30+
</select>
31+
</div>
32+
</>
33+
)
34+
}
35+
36+
export default ServiceDBType;

‎app/modals/AddModal/ServicesDescription.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from 'react';
2+
3+
const ServicesDescription = (props) => {
4+
return (
5+
<>
6+
<div>
7+
<label htmlFor="db-uri">
8+
URI<span>*</span>
9+
</label>
10+
<input
11+
id="db-uri"
12+
name="URI"
13+
value={props.URI}
14+
onChange={e => props.handleChange(e)}
15+
placeholder="Database URI"
16+
required
17+
/>
18+
</div>
19+
<div>
20+
<label htmlFor="db-name">
21+
Name<span>*</span>
22+
</label>
23+
<input
24+
id="db-name"
25+
type="text"
26+
name="name"
27+
value={props.name}
28+
onChange={e => props.handleChange(e)}
29+
placeholder="Add a name for your new service"
30+
required
31+
/>
32+
</div>
33+
<div>
34+
<label htmlFor="db-desc">Description</label>
35+
<textarea
36+
id="db-desc"
37+
name="description"
38+
value={props.description}
39+
onChange={e => props.handleChange(e)}
40+
placeholder="Add a short description"
41+
/>
42+
</div>
43+
</>
44+
)
45+
}
46+
47+
export default ServicesDescription;

app/stylesheets/AwsModal.scss renamed to app/modals/AwsModal/AwsModal.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import './constants.scss';
1+
@import '../../stylesheets/constants.scss';
22

33
.add-container {
44
@include centerModal(30%, 500px);

app/modals/AwsModal.tsx renamed to app/modals/AwsModal/AwsModal.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/* eslint-disable jsx-a11y/label-has-associated-control */
22
import React, { useState, useContext, useCallback } from 'react';
3-
import { DashboardContext } from '../context/DashboardContext';
4-
import '../stylesheets/AwsModal.scss';
3+
import { DashboardContext } from '../../context/DashboardContext';
4+
import './AwsModal.scss';
55

6-
import { TModalSetter } from '../components/Occupied/types/Occupied';
6+
import { TModalSetter } from '../../components/Occupied/types/Occupied';
77

88
interface AwsFields {
99
typeOfService: string;

app/stylesheets/EnvModal.scss renamed to app/modals/EnvModal/EnvModal.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import './constants.scss';
1+
@import '../../stylesheets/constants.scss';
22

33
.add-container {
44
@include centerModal(30%, 500px);

app/modals/EnvModal.tsx renamed to app/modals/EnvModal/EnvModal.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
2-
import { Typography } from '@material-ui/core';
3-
import '../stylesheets/EnvModal.scss';
2+
import { Button, Typography } from '@material-ui/core';
3+
import './EnvModal.scss';
44
import { CloudQueue, Computer } from '@material-ui/icons';
5-
import { TModalSetter } from '../components/Occupied/types/Occupied';
5+
import { TModalSetter } from '../../components/Occupied/types/Occupied';
66

77
const EnvModal: React.FC<TModalSetter> = React.memo(
88
({ setModal}) => {

0 commit comments

Comments
 (0)