Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
quiz-competition
Commits
08ce2115
Commit
08ce2115
authored
Sep 28, 2020
by
Yoon, Daeki
😅
Browse files
auth provider hook 로 변경
parent
70ab25bf
Changes
5
Show whitespace changes
Inline
Side-by-side
src/client/src/App.js
View file @
08ce2115
import
React
,
{
useState
}
from
'
react
'
;
import
React
from
'
react
'
;
import
{
BrowserRouter
}
from
'
react-router-dom
'
import
{
BrowserRouter
}
from
'
react-router-dom
'
import
{
AuthContext
}
from
'
./auth/auth-context
'
;
import
{
AuthProvider
}
from
'
./auth/auth-context
'
;
import
authHelpers
from
'
./auth/auth-helpers
'
;
import
MainRouter
from
'
./MainRouter
'
;
import
MainRouter
from
'
./MainRouter
'
;
function
App
()
{
function
App
()
{
const
[
authState
,
setAuthState
]
=
useState
(
authHelpers
.
isAuthenticated
())
return
(
return
(
<
Auth
Context
.
Provider
value
=
{{
authState
,
setAuthState
}}
>
<
Auth
Provider
>
<
BrowserRouter
>
<
BrowserRouter
>
<
MainRouter
/>
<
MainRouter
/>
<
/BrowserRouter
>
<
/BrowserRouter
>
<
/Auth
Context.
Provider
>
<
/AuthProvider
>
);
);
}
}
...
...
src/client/src/MainRouter.jsx
View file @
08ce2115
import
React
from
"
react
"
;
import
React
from
"
react
"
;
import
{
BrowserRouter
,
Route
,
Switch
}
from
"
react-router-dom
"
;
import
{
Route
,
Switch
}
from
"
react-router-dom
"
;
import
Signin
from
"
./auth/Signin
"
;
import
Signin
from
"
./auth/Signin
"
;
import
Home
from
"
./core/Home
"
;
import
Home
from
"
./core/Home
"
;
import
Menu
from
"
./core/Menu
"
;
import
Menu
from
"
./core/Menu
"
;
...
...
src/client/src/auth/Signin.jsx
View file @
08ce2115
import
React
,
{
useState
,
useContext
}
from
"
react
"
;
import
React
,
{
useState
}
from
"
react
"
;
import
Button
from
"
react-bootstrap/Button
"
;
import
Button
from
"
react-bootstrap/Button
"
;
import
Form
from
"
react-bootstrap/Form
"
;
import
Form
from
"
react-bootstrap/Form
"
;
import
Container
from
"
react-bootstrap/Container
"
;
import
Container
from
"
react-bootstrap/Container
"
;
import
{
signin
}
from
"
./api-auth
"
;
import
{
signin
}
from
"
./api-auth
"
;
import
auth
from
"
./auth-helpers
"
;
import
auth
from
"
./auth-helpers
"
;
import
{
Redirect
,
useHistory
}
from
"
react-router-dom
"
;
import
{
Redirect
}
from
"
react-router-dom
"
;
import
{
Auth
Context
}
from
"
./auth-context
"
;
import
{
use
Auth
}
from
"
./auth-context
"
;
function
Signin
()
{
function
Signin
()
{
const
authContext
=
useContext
(
AuthContext
)
const
{
setAuthUser
}
=
useAuth
();
// const history = useHistory()
const
[
values
,
setValues
]
=
useState
({
const
[
values
,
setValues
]
=
useState
({
email
:
""
,
email
:
""
,
password
:
""
,
password
:
""
,
...
@@ -22,20 +21,18 @@ function Signin() {
...
@@ -22,20 +21,18 @@ function Signin() {
};
};
const
clickSubmit
=
(
event
)
=>
{
const
clickSubmit
=
(
event
)
=>
{
event
.
preventDefault
()
event
.
preventDefault
()
;
const
user
=
{
const
user
=
{
email
:
values
.
email
||
undefined
,
email
:
values
.
email
||
undefined
,
password
:
values
.
password
||
undefined
,
password
:
values
.
password
||
undefined
,
};
};
console
.
log
(
'
authContext in Signin.jsx:
'
,
authContext
)
signin
(
user
).
then
((
data
)
=>
{
signin
(
user
).
then
((
data
)
=>
{
if
(
data
.
error
)
{
if
(
data
.
error
)
{
setValues
({
...
values
,
error
:
data
.
error
});
setValues
({
...
values
,
error
:
data
.
error
});
}
else
{
}
else
{
auth
.
authenticate
(
data
,
()
=>
{
auth
.
authenticate
(
data
,
()
=>
{
authContext
.
setAuth
State
(
auth
.
isAuthenticated
())
setAuth
User
(
auth
.
isAuthenticated
())
;
setValues
({
...
values
,
error
:
""
,
redirect
:
true
});
setValues
({
...
values
,
error
:
""
,
redirect
:
true
});
});
});
}
}
...
@@ -43,7 +40,7 @@ function Signin() {
...
@@ -43,7 +40,7 @@ function Signin() {
};
};
if
(
values
.
redirect
)
{
if
(
values
.
redirect
)
{
return
<
Redirect
to
=
'/'
/>
return
<
Redirect
to
=
"/"
/>
;
}
}
return
(
return
(
...
@@ -54,7 +51,7 @@ function Signin() {
...
@@ -54,7 +51,7 @@ function Signin() {
<
Form
.
Control
<
Form
.
Control
type
=
"email"
type
=
"email"
placeholder
=
"Enter email"
placeholder
=
"Enter email"
onChange
=
{
handleChange
(
'
email
'
)
}
onChange
=
{
handleChange
(
"
email
"
)
}
/>
/>
<
Form
.
Text
className
=
"text-muted"
>
<
Form
.
Text
className
=
"text-muted"
>
We'll never share your email with anyone else.
We'll never share your email with anyone else.
...
@@ -66,7 +63,7 @@ function Signin() {
...
@@ -66,7 +63,7 @@ function Signin() {
<
Form
.
Control
<
Form
.
Control
type
=
"password"
type
=
"password"
placeholder
=
"Password"
placeholder
=
"Password"
onChange
=
{
handleChange
(
'
password
'
)
}
onChange
=
{
handleChange
(
"
password
"
)
}
/>
/>
</
Form
.
Group
>
</
Form
.
Group
>
...
...
src/client/src/auth/auth-context.js
View file @
08ce2115
import
React
from
'
react
'
import
React
,
{
useState
,
useContext
}
from
'
react
'
import
authHelpers
from
'
./auth-helpers
'
export
const
AuthContext
=
React
.
createContext
({
const
AuthContext
=
React
.
createContext
()
authState
:
false
,
isAuthed
:
()
=>
{}
export
const
AuthProvider
=
({
children
})
=>
{
})
const
[
authUser
,
setAuthUser
]
=
useState
(
authHelpers
.
isAuthenticated
())
\ No newline at end of file
return
(
<
AuthContext
.
Provider
value
=
{{
authUser
,
setAuthUser
}}
>
{
children
}
<
/AuthContext.Provider
>
)
}
export
const
useAuth
=
()
=>
useContext
(
AuthContext
)
\ No newline at end of file
src/client/src/core/Menu.jsx
View file @
08ce2115
import
React
,
{
useState
,
useEffect
,
useContext
}
from
"
react
"
;
import
React
from
"
react
"
;
import
Navbar
from
"
react-bootstrap/Navbar
"
;
import
Navbar
from
"
react-bootstrap/Navbar
"
;
import
Nav
from
"
react-bootstrap/Nav
"
;
import
Nav
from
"
react-bootstrap/Nav
"
;
import
NavDropdown
from
"
react-bootstrap/NavDropdown
"
;
import
NavDropdown
from
"
react-bootstrap/NavDropdown
"
;
import
Form
from
"
react-bootstrap/Form
"
;
import
FormControl
from
"
react-bootstrap/FormControl
"
;
import
Button
from
"
react-bootstrap/Button
"
;
import
Button
from
"
react-bootstrap/Button
"
;
import
auth
from
"
../auth/auth-helpers
"
;
import
auth
from
"
../auth/auth-helpers
"
;
import
{
Link
,
useHistory
}
from
"
react-router-dom
"
;
import
{
Link
,
useHistory
}
from
"
react-router-dom
"
;
import
{
AuthContext
}
from
"
../auth/auth-context
"
;
import
{
useAuth
}
from
"
../auth/auth-context
"
;
// import { Link } from "react-router-dom";
function
Menu
()
{
function
Menu
()
{
const
auth
Context
=
useContext
(
AuthContext
);
const
{
auth
User
,
setAuthUser
}
=
useAuth
()
const
history
=
useHistory
();
const
history
=
useHistory
();
console
.
log
(
"
Menu.jsx
"
,
history
);
console
.
log
(
"
authContext in Menu.jsx:
"
,
authContext
);
return
(
return
(
<
Navbar
sticky
=
"top"
bg
=
"dark"
variant
=
"dark"
expand
=
"sm"
>
<
Navbar
sticky
=
"top"
bg
=
"dark"
variant
=
"dark"
expand
=
"sm"
>
<
Navbar
.
Brand
href
=
"/"
>
<
Navbar
.
Brand
href
=
"/"
>
...
@@ -40,12 +33,12 @@ function Menu() {
...
@@ -40,12 +33,12 @@ function Menu() {
</
NavDropdown
.
Item
>
</
NavDropdown
.
Item
>
</
NavDropdown
>
</
NavDropdown
>
</
Nav
>
</
Nav
>
{
auth
Context
.
authState
?
(
{
auth
User
?
(
<
Button
<
Button
onClick
=
{
()
=>
onClick
=
{
()
=>
auth
.
clearJwt
(()
=>
{
auth
.
clearJwt
(()
=>
{
history
.
push
(
"
/
"
);
history
.
push
(
"
/
"
);
authContext
.
setAuth
State
(
false
);
setAuth
User
(
false
);
})
})
}
}
>
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment