Toggle navigation
Toggle navigation
This project
Loading...
Sign in
2020-1-capstone-design1
/
Triz_Project1
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
1
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
sdy
2020-05-27 22:52:20 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
df723d9eebbb61749336109961c8bce76a524727
df723d9e
1 parent
e800ee09
add state, update form styling
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
44 additions
and
27 deletions
front/src/Routes/Room/RoomPresenter.js
front/src/Routes/Room/RoomPresenter.js
View file @
df723d9
...
...
@@ -19,8 +19,18 @@ const Wrapper = styled.div`
}
`
;
const
HideWrapper
=
styled
.
div
`
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
background-color: #535c68;
opacity: 0.6;
`
;
const
FormContainer
=
styled
.
div
`
visibility: hidden;
display: flex;
position: fixed;
background-color: #f5f6fa;
...
...
@@ -143,35 +153,42 @@ const StyledLink = styled(Link)`
}
`
;
export
default
({
roomArray
,
action
})
=>
{
export
default
({
roomArray
,
action
,
setAction
})
=>
{
return
(
<
Wrapper
>
<
Header
text
=
{
"KhuChat"
}
><
/Header
>
<
RoomWrapper
>
<
RoomContainer
>
<
RoomUL
>
{
roomArray
&&
roomArray
.
map
((
e
)
=>
(
<
StyledLink
to
=
{
e
.
name
}
key
=
{
e
.
id
}
>
<
RoomItem
>
{
e
.
name
}
<
/RoomItem
>
<
FontAwesomeIcon
icon
=
{
faArrowRight
}
/
>
<
/StyledLink
>
))}
<
/RoomUL
>
<
/RoomContainer
>
<
CreateContainer
>
<
StyledLink
to
=
"/"
>
<
span
>
Create
New
Room
<
/span
>
<
/StyledLink
>
<
/CreateContainer
>
<
/RoomWrapper
>
<
FormContainer
>
<
Form
>
<
FormText
>
Room
Name
<
/FormText
>
<
Input
placeholder
=
"Enter new Room name"
/>
<
Button
text
=
"Submit"
/>
<
/Form
>
<
/FormContainer
>
{
action
===
"showList"
?
(
<>
<
RoomWrapper
>
<
RoomContainer
>
<
RoomUL
>
{
roomArray
&&
roomArray
.
map
((
e
)
=>
(
<
StyledLink
to
=
{
e
.
name
}
key
=
{
e
.
id
}
>
<
RoomItem
>
{
e
.
name
}
<
/RoomItem
>
<
FontAwesomeIcon
icon
=
{
faArrowRight
}
/
>
<
/StyledLink
>
))}
<
/RoomUL
>
<
/RoomContainer
>
<
CreateContainer
>
<
StyledLink
to
=
"/"
onClick
=
{()
=>
setAction
(
"makeList"
)}
>
<
span
>
Create
New
Room
<
/span
>
<
/StyledLink
>
<
/CreateContainer
>
<
/RoomWrapper
>
<
/
>
)
:
(
<
HideWrapper
className
=
"hideWrapper"
>
<
FormContainer
>
<
Form
>
<
FormText
>
Room
Name
<
/FormText
>
<
Input
placeholder
=
"Enter new Room name"
/>
<
Button
text
=
"Submit"
/>
<
/Form
>
<
/FormContainer
>
<
/HideWrapper
>
)}
<
/Wrapper
>
);
};
...
...
Please
register
or
login
to post a comment