SHARE
TWEET

blolb

a guest Dec 11th, 2019 97 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* eslint-disable no-shadow */
  2. /* eslint-disable react/display-name */
  3. import React from 'react';
  4. import { useQuery } from '@apollo/react-hooks';
  5. import PropTypes from 'prop-types';
  6. import { Link } from 'react-router-dom';
  7. // Components
  8. import { Button, Header, Message, RotatingIcon, Icon } from 'library';
  9. import UpdateUser from '../UpdateUser/UpdateUser';
  10. import Task from '../Task/Task';
  11. import Note from '../Note/Note';
  12. import css from './user.scss';
  13. // Queries
  14. import GET_USER from './GET_USER.graphql';
  15.  
  16. const User = ({ match }) => {
  17.     const {
  18.         params: { linkFirstName, linkLastName }
  19.     } = match;
  20.     const { loading, error, data } = useQuery(GET_USER, {
  21.         variables: {
  22.             firstName: linkFirstName,
  23.             lastName: linkLastName
  24.         }
  25.     });
  26.     const [userFirstName, setUserFirstName] = React.useState(
  27.         linkFirstName
  28.     );
  29.     const [userLastName, setUserLastName] = React.useState(
  30.         linkLastName
  31.     );
  32.     const [isNotDeleted, setIsNotDeleted] = React.useState(true);
  33.     if (loading) {
  34.         return (
  35.             <div className={css.loading}>
  36.                 <RotatingIcon name="icon-spinner2" fontSize={300} />
  37.             </div>
  38.         );
  39.     }
  40.     if (error) {
  41.         return (
  42.             <Message
  43.                 title="Error!"
  44.                 description="an error has occured"
  45.                 className="negative"
  46.             />
  47.         );
  48.     }
  49.     return (
  50.         <div key={data.getSpecificUser.userId} className={css.user}>
  51.             {isNotDeleted && (
  52.                 <div>
  53.                     <Header
  54.                         as="h2"
  55.                         style={{ fontSize: 40 }}
  56.                     >{`${userFirstName} ${userLastName}`}</Header>
  57.                     <UpdateUser
  58.                         data={data}
  59.                         firstName={userFirstName}
  60.                         lastName={userLastName}
  61.                         setFirstName={setUserFirstName}
  62.                         setLastName={setUserLastName}
  63.                         setIsNotDeleted={setIsNotDeleted}
  64.                     />
  65.                     {data.getSpecificUser.checkList &&
  66.                         data.getSpecificUser.checkList.map(
  67.                             ({ taskId, isDone, description }) => (
  68.                                 <Task
  69.                                     key={taskId}
  70.                                     userId={
  71.                                         data.getSpecificUser.userId
  72.                                     }
  73.                                     taskId={taskId}
  74.                                     isDone={isDone}
  75.                                     description={description}
  76.                                 />
  77.                             )
  78.                         )}
  79.                     {data.getSpecificUser.notes &&
  80.                         data.getSpecificUser.notes.map(
  81.                             ({ noteId, title, description }) => (
  82.                                 <div key={noteId}>
  83.                                     <Note
  84.                                         key={noteId}
  85.                                         userId={
  86.                                             data.getSpecificUser
  87.                                                 .userId
  88.                                         }
  89.                                         noteId={noteId}
  90.                                         title={title}
  91.                                         description={description}
  92.                                     />
  93.                                 </div>
  94.                             )
  95.                         )}
  96.                     <Link to="/users">
  97.                         <Button>
  98.                             <Icon
  99.                                 name="icon-arrow-left"
  100.                                 fontSize={16}
  101.                             />
  102.                             {' Back to users'}
  103.                         </Button>
  104.                     </Link>
  105.                 </div>
  106.             )}
  107.             {!isNotDeleted && (
  108.                 <div>
  109.                     <Message
  110.                         description={`${userFirstName} ${userLastName} has been deleted!`}
  111.                         title="User deleted"
  112.                         className="positive"
  113.                     />
  114.                     <Link to="/users">
  115.                         <Button>
  116.                             <Icon
  117.                                 name="icon-arrow-left"
  118.                                 fontSize={16}
  119.                             />
  120.                             {' Back to users'}
  121.                         </Button>
  122.                     </Link>
  123.                 </div>
  124.             )}
  125.         </div>
  126.     );
  127. };
  128.  
  129. User.propTypes = {
  130.     match: PropTypes.object
  131. };
  132.  
  133. export default User;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top