Advertisement
Guest User

App.js

a guest
Nov 18th, 2019
745
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useEffect } from "react"
  2. import { connect } from "react-redux"
  3. import { BrowserRouter as Router, Route } from "react-router-dom"
  4.  
  5. import loginService from "./services/login"
  6.  
  7. import Notification from "./components/Notification"
  8. import Navigation from "./components/Navigation"
  9. import BlogList from "./components/BlogList"
  10. import Blog from "./components/Blog"
  11. import Togglable from "./components/Togglable"
  12. import NewBlog from "./components/NewBlog"
  13. import UserList from "./components/UserList"
  14. import User from "./components/User"
  15.  
  16. import { useField } from "./hooks"
  17.  
  18. import { setNotification } from "./reducers/notificationReducer"
  19. import { initializeBlogs, createBlog } from "./reducers/blogReducer"
  20. import { setUser, setToken } from "./reducers/loginReducer"
  21. import { initializeUsers } from "./reducers/userReducer"
  22.  
  23. import Container from "@material-ui/core/Container"
  24. import Typography from "@material-ui/core/Typography"
  25. import { makeStyles } from "@material-ui/core/styles"
  26. import Button from "@material-ui/core/Button"
  27.  
  28. const useStyles = makeStyles(theme => ({
  29.   button: {
  30.     margin: theme.spacing(1),
  31.   },
  32.   input: {
  33.     display: "none",
  34.   },
  35. }))
  36.  
  37. const App = props => {
  38.   const classes = useStyles()
  39.  
  40.   //React internal state
  41.   const [username, usernameReset] = useField("text")
  42.   const [password, passwordReset] = useField("password")
  43.  
  44.   const [title, titleReset] = useField("text")
  45.   const [author, authorReset] = useField("text")
  46.   const [url, urlReset] = useField("text")
  47.   // const [blogs, setBlogs] = useState([])
  48.  
  49.   const getBlogs = props.initializeBlogs
  50.   const getUsers = props.initializeUsers
  51.  
  52.   //getting blogs
  53.   useEffect(() => {
  54.     getBlogs()
  55.   }, [getBlogs])
  56.  
  57.   //getting users
  58.   useEffect(() => {
  59.     getUsers()
  60.   }, [getUsers])
  61.  
  62.   //action for logged in
  63.   useEffect(() => {
  64.     const loggedUserJSON = window.localStorage.getItem("loggedBlogAppUser")
  65.     if (loggedUserJSON) {
  66.       const user = JSON.parse(loggedUserJSON)
  67.       props.setUser(user)
  68.       props.setToken(user.token)
  69.     }
  70.   }, [])
  71.  
  72.   //ACTIONS/FUNCTIONS
  73.  
  74.   //setNotification function
  75.   const notify = (message, type = "success") => {
  76.     props.setNotification({ message, type })
  77.     setTimeout(() => props.setNotification({ message: null, type: null }), 5000)
  78.   }
  79.  
  80.   //login logic
  81.   const handleLogin = async event => {
  82.     event.preventDefault()
  83.     try {
  84.       const user = await loginService.login({
  85.         username: username.value,
  86.         password: password.value,
  87.       })
  88.       window.localStorage.setItem("loggedBlogAppUser", JSON.stringify(user))
  89.       props.setToken(user.token)
  90.       props.setUser(user)
  91.       notify(`Welcome back ${user.name}`)
  92.     } catch (exception) {
  93.       notify("Wrong username or password", "error")
  94.     }
  95.   }
  96.  
  97.   //logout logic
  98.   // const handleLogout = () => {
  99.   //   props.logout()
  100.   //   // blogService.destroyToken()
  101.   //   window.localStorage.removeItem("loggedBlogAppUser")
  102.   // }
  103.  
  104.   // adding a new blog
  105.   const newBlogRef = React.createRef()
  106.  
  107.   const addBlog = async event => {
  108.     event.preventDefault()
  109.     newBlogRef.current.toggleVisibility()
  110.     const newBlogObject = {
  111.       title: title.value,
  112.       author: author.value,
  113.       url: url.value,
  114.       id: props.id,
  115.     }
  116.     try {
  117.       props.createBlog(newBlogObject)
  118.       notify(
  119.         `Blog ${newBlogObject.title} by ${newBlogObject.author} successfully added!`,
  120.       )
  121.       titleReset()
  122.       authorReset()
  123.       urlReset()
  124.     } catch (error) {
  125.       notify(`Unable to add blog. Error: ${error}`)
  126.     }
  127.   }
  128.  
  129.   //finding specific user to show their page
  130.   // console.log("props.users in App.js: ", props)
  131.   const specificUser = id => props.users.find(user => user.id === id)
  132.  
  133.   const specificBlog = id => props.blogs.find(blog => blog.id === id)
  134.  
  135.   const loginPage = () => (
  136.     <div>
  137.       <Typography variant="h4" gutterBottom>
  138.         Log in to application
  139.       </Typography>
  140.  
  141.       <Notification />
  142.  
  143.       <form onSubmit={handleLogin}>
  144.         <Typography variant="subtitle1" gutterBottom>
  145.           <div>
  146.             Username
  147.             <input id="username" {...username} reset={null} />
  148.           </div>
  149.           <div>
  150.             Password
  151.             <input id="password" {...password} reset={null} />
  152.           </div>
  153.           <Button
  154.             variant="contained"
  155.             color="primary"
  156.             className={classes.button}
  157.             size="small"
  158.             type="submit"
  159.             data-cy="login"
  160.           >
  161.             Log me in!
  162.           </Button>
  163.         </Typography>
  164.       </form>
  165.     </div>
  166.   )
  167.  
  168.   //to go into Login.js
  169.   if (props.username === "") {
  170.     return loginPage()
  171.   }
  172.  
  173.   return (
  174.     <div>
  175.       <Router>
  176.         <Navigation />
  177.         <Notification />
  178.         <Container fixed>
  179.           <Typography variant="h3" gutterBottom>
  180.             Blogs
  181.           </Typography>
  182.  
  183.           <div>
  184.             <Route
  185.               exact
  186.               path="/"
  187.               render={() => (
  188.                 <div>
  189.                   <Togglable buttonLabel="create new" ref={newBlogRef}>
  190.                     <NewBlog
  191.                       addBlog={addBlog}
  192.                       title={title}
  193.                       author={author}
  194.                       url={url}
  195.                     />
  196.                   </Togglable>
  197.                   <BlogList
  198.                     blogs={props.blogs}
  199.                     loggedInUser={props.username}
  200.                     like={props.like}
  201.                     remove={props.remove}
  202.                   />
  203.                 </div>
  204.               )}
  205.             />
  206.             {/* <Blog/> */}
  207.             {/* {displayBlogs()} */}
  208.           </div>
  209.         </Container>
  210.         <Route exact path="/users" render={() => <UserList />} />
  211.         <Route
  212.           path="/users/:id"
  213.           render={({ match }) => <User user={specificUser(match.params.id)} />}
  214.         />
  215.         <Route
  216.           path="/blogs/:id"
  217.           render={({ match }) => <Blog blog={specificBlog(match.params.id)} />}
  218.         />
  219.       </Router>
  220.     </div>
  221.   )
  222. }
  223.  
  224. const mapStateToProps = state => {
  225.   return {
  226.     blogs: state.blogs,
  227.     users: state.users,
  228.     username: state.login.username,
  229.     name: state.login.name,
  230.     id: state.login.id,
  231.   }
  232. }
  233.  
  234. const mapDispatchToProps = dispatch => {
  235.   return {
  236.     initializeBlogs: () => dispatch(initializeBlogs()),
  237.     createBlog: blog => dispatch(createBlog(blog)),
  238.     initializeUsers: () => dispatch(initializeUsers()),
  239.     setUser: user => dispatch(setUser(user)),
  240.     setToken: token => dispatch(setToken(token)),
  241.     setNotification: (message, type) => {
  242.       dispatch(setNotification(message, type))
  243.     },
  244.   }
  245. }
  246.  
  247. export default connect(mapStateToProps, mapDispatchToProps)(App)
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement