API tools faq
paste
Advertisement
ahmadandika

Untitled

ahmadandika
Mar 19th, 2020
239
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 17.43 KB | None | 0 0
raw download clone embed print report
  1. // containers/subcategory/SubCategory.jsx
  2.  
  3. /* eslint-disable no-nested-ternary */
  4. import React, { Component, Fragment } from 'react';
  5. import { withRouter } from 'next/router';
  6. import { connect } from 'react-redux';
  7. import Link from 'next/link';
  8. import Breadcrumb from '@components/Breadcrumb';
  9. import { fetchData } from '@actions/sub-category.action';
  10. import { UncontrolledTooltip } from 'reactstrap';
  11. import ListingPrimaryProduct from './ListingPrimaryProduct';
  12.  
  13. const queryString = require('query-string');
  14.  
  15. // const Picture = ({ path }) => (
  16. //   <div
  17. //     className="mx-auto"
  18. //     style={{
  19. //       width: '60px',
  20. //       height: '60px',
  21. //       backgroundImage: `url('${path || ''}')`,
  22. //       backgroundSize: 'cover',
  23. //       backgroundPosition: 'center'
  24. //     }}
  25. //   />
  26. // );
  27.  
  28. // const Category = ({ item, pathArray }) => (
  29. //   <Link
  30. //     href="/subcategory/SubCategory"
  31. //     as={`/subcategory/id/${item.id}&path=${JSON.stringify([
  32. //       ...pathArray,
  33. //       { id: item.id, name: item.name }
  34. //     ])}`}
  35. //     key={item.id}
  36. //   >
  37. //     <div className="product-listing mt-5 mr-2">
  38. //       <div className="thumb-wrapper w-100">
  39. //         {item.picture && <Picture path={item.picture.path} />}
  40. //       </div>
  41. //       <div className="desc">{item.name}</div>
  42. //     </div>
  43. //   </Link>
  44. // );
  45.  
  46. // const Product = ({ item, pathArray, data, dataCount }) => (
  47. //   <Fragment key={item.id}>
  48. //     {item.secondary === null && (
  49. //       <Link
  50. //         href="/primary-product/PrimaryProduct"
  51. //         as={`/primary-product/id/${item.id}&path=${JSON.stringify([
  52. //           ...pathArray,
  53. //           { id: item.id, name: item.name }
  54. //         ])}`}
  55. //         key={item.id}
  56. //       >
  57. //         <div className="product-wrapper">
  58. //           <div className="product-listing mt-5 mr-2 mx-auto">
  59. //             <div className="thumb-wrapper w-100">
  60. //               <Picture path={item.banner} />
  61. //             </div>
  62. //             <div className="desc">{item.name}</div>
  63. //           </div>
  64. //         </div>
  65. //       </Link>
  66. //     )}
  67. //     {item.secondary !== null && dataCount < 2 ? (
  68. //       <ListingPrimaryProduct data={data} retItem={item} />
  69. //     ) : (
  70. //       <Link
  71. //         href="/primary-product/PrimaryProduct"
  72. //         as={`/primary-product/id/${item.id}`}
  73. //         key={item.id}
  74. //       >
  75. //         <div className="product-wrapper">
  76. //           <div className="product-listing mt-5 mr-2 mx-auto">
  77. //             <div className="thumb-wrapper w-100">
  78. //               <Picture path={item.banner} />
  79. //             </div>
  80. //             <div className="desc">{item.name}</div>
  81. //           </div>
  82. //         </div>
  83. //       </Link>
  84. //     )}
  85. //   </Fragment>
  86. // );
  87.  
  88. class SubCategory extends Component {
  89.   constructor(props) {
  90.     super(props);
  91.     const { router } = this.props;
  92.     // const parsed = queryString.parse(router.asPath);
  93.     // const pathArray = JSON.parse(parsed.path);
  94.  
  95.     let pathArray = null;
  96.     let pathString = null;
  97.  
  98.     // get localstorage
  99.     if (process.browser) {
  100.       pathArray = JSON.parse(localStorage.getItem('path') || null);
  101.       pathString = JSON.stringify(pathArray);
  102.     }
  103.  
  104.     this.state = {
  105.       pathArray,
  106.       pathString
  107.     };
  108.   }
  109.  
  110.   componentDidMount() {
  111.     const { pathString } = this.state;
  112.     const { fetchData, router } = this.props;
  113.     const id = router.query.id;
  114.  
  115.     setTimeout(() => {
  116.       fetchData({
  117.         id,
  118.         path: pathString
  119.       });
  120.     }, 500);
  121.     // console.log('id', id);
  122.     // console.log('pathString', pathString);
  123.   }
  124.  
  125.   render() {
  126.     const { pathArray } = this.state;
  127.     const { data } = this.props;
  128.     const dataCount = data.product && data.product.length;
  129.     const dataAllProduct = data.all_product && data.all_product.length;
  130.  
  131.     // console.log('data', data);
  132.     console.log('dataAll', dataAllProduct);
  133.     // console.log('pathArray', pathArray);
  134.  
  135.     return (
  136.       <div id="page-content-wrapper" className="pl-3 pr-3 w-100">
  137.         {/* <Breadcrumb /> */}
  138.         <div className="container-fluid">
  139.           <div className="row">
  140.             <div className="col-md-12">
  141.               <span className="d-block">
  142.                 About {data.meta && data.meta.name}
  143.               </span>
  144.               <span className="d-block text-dark">
  145.                 <i className="fa fa-caret-right pr-2 text-warning" />
  146.                 {data.meta && data.meta.name}
  147.               </span>
  148.             </div>
  149.           </div>
  150.           <div className="d-flex flex-wrap" style={{ cursor: 'pointer' }}>
  151.             {/* WHEN FILTER ON */}
  152.             {data.all_product === null &&
  153.               data.category &&
  154.               data.category.map(item => (
  155.                 <Link
  156.                   href="/subcategory/SubCategory"
  157.                   as={`/subcategory/id/${item.id}&path=${JSON.stringify([
  158.                     ...pathArray,
  159.                     { id: item.id, name: item.name }
  160.                   ])}`}
  161.                   key={item.id}
  162.                 >
  163.                   <div className="product-listing mt-5 mr-2">
  164.                     <div
  165.                       className="thumb-wrapper w-100"
  166.                       id={`Tooltip-${item.id}`}
  167.                     >
  168.                       {item.picture && (
  169.                         <>
  170.                           <div
  171.                             className="mx-auto"
  172.                             style={{
  173.                               width: '60px',
  174.                               height: '60px',
  175.                               backgroundImage: `url('${item.picture.path ||
  176.                                ''}')`,
  177.                               backgroundSize: 'cover',
  178.                               backgroundPosition: 'center'
  179.                             }}
  180.                           />
  181.                         </>
  182.                       )}
  183.                     </div>
  184.                     <UncontrolledTooltip
  185.                       innerClassName="mc-tooltip"
  186.                       placement="top"
  187.                       target={`Tooltip-${item.id}`}
  188.                     >
  189.                       {item.description}
  190.                     </UncontrolledTooltip>
  191.                     <div className="desc">{item.name}</div>
  192.                   </div>
  193.                 </Link>
  194.               ))}
  195.             {/* WHEN CATEGORY NOT NULL */}
  196.             {data.category !== null ? (
  197.               <>
  198.                 {/* WHEN FILTER OFF */}
  199.                 {data.all_product === null
  200.                   ? data.product &&
  201.                     data.product.map(item => (
  202.                       <React.Fragment key={item.id}>
  203.                         {item.secondary === null ? (
  204.                           <Link
  205.                             href="/primary-product/PrimaryProduct"
  206.                             as={`/primary-product/id/${
  207.                               item.id
  208.                             }&path=${JSON.stringify([
  209.                               ...pathArray,
  210.                               { id: item.id, name: item.name }
  211.                             ])}`}
  212.                             key={item.id}
  213.                           >
  214.                             <div className="product-wrapper">
  215.                               <div className="product-listing mt-5 mr-2 mx-auto">
  216.                                 <div className="thumb-wrapper w-100">
  217.                                   <div
  218.                                     className="mx-auto"
  219.                                     style={{
  220.                                       width: '60px',
  221.                                       height: '60px',
  222.                                       backgroundImage: `url('${item.banner ||
  223.                                        ''}')`,
  224.                                       backgroundSize: 'cover',
  225.                                       backgroundPosition: 'center'
  226.                                     }}
  227.                                   />
  228.                                 </div>
  229.                                 <div className="desc">{item.name}</div>
  230.                               </div>
  231.                             </div>
  232.                           </Link>
  233.                         ) : item.secondary !== null && dataCount < 2 ? (
  234.                           <ListingPrimaryProduct data={data} retItem={item} />
  235.                         ) : (
  236.                           <Link
  237.                             href="/primary-product/PrimaryProduct"
  238.                             as={`/primary-product/id/${
  239.                               item.id
  240.                             }&path=${JSON.stringify([
  241.                               ...pathArray,
  242.                               { id: item.id, name: item.name }
  243.                             ])}`}
  244.                             key={item.id}
  245.                           >
  246.                             <div className="product-wrapper">
  247.                               <div className="product-listing mt-5 mr-2 mx-auto">
  248.                                 <div className="thumb-wrapper w-100">
  249.                                   <div
  250.                                     className="mx-auto"
  251.                                     style={{
  252.                                       width: '60px',
  253.                                       height: '60px',
  254.                                       backgroundImage: `url('${item.banner ||
  255.                                        ''}')`,
  256.                                       backgroundSize: 'cover',
  257.                                       backgroundPosition: 'center'
  258.                                     }}
  259.                                   />
  260.                                 </div>
  261.                                 <div className="desc">{item.name}</div>
  262.                               </div>
  263.                             </div>
  264.                           </Link>
  265.                         )}
  266.                       </React.Fragment>
  267.                     ))
  268.                   : // WHEN FILTER ON
  269.                     data.all_product &&
  270.                     data.all_product.map(item => (
  271.                       <React.Fragment key={item.id}>
  272.                         {item.secondary === null ? (
  273.                           <Link
  274.                             href="/primary-product/PrimaryProduct"
  275.                             as={`/primary-product/id/${
  276.                               item.id
  277.                             }&path=${JSON.stringify([
  278.                               ...pathArray,
  279.                               { id: item.id, name: item.name }
  280.                             ])}`}
  281.                             key={item.id}
  282.                           >
  283.                             <div className="product-wrapper">
  284.                               <div className="product-listing mt-5 mr-2 mx-auto">
  285.                                 <div className="thumb-wrapper w-100">
  286.                                   <div
  287.                                     className="mx-auto"
  288.                                     style={{
  289.                                       width: '60px',
  290.                                       height: '60px',
  291.                                       backgroundImage: `url('${item.banner ||
  292.                                        ''}')`,
  293.                                       backgroundSize: 'cover',
  294.                                       backgroundPosition: 'center'
  295.                                     }}
  296.                                   />
  297.                                 </div>
  298.                                 <div className="desc">{item.name}</div>
  299.                               </div>
  300.                             </div>
  301.                           </Link>
  302.                         ) : item.secondary !== null && dataAllProduct < 3 ? (
  303.                           <ListingPrimaryProduct data={data} retItem={item} />
  304.                         ) : (
  305.                           <Link
  306.                             href="/primary-product/PrimaryProduct"
  307.                             as={`/primary-product/id/${
  308.                               item.id
  309.                             }&path=${JSON.stringify([
  310.                               ...pathArray,
  311.                               { id: item.id, name: item.name }
  312.                             ])}`}
  313.                             key={item.id}
  314.                           >
  315.                             <div className="product-wrapper">
  316.                               <div className="product-listing mt-5 mr-2 mx-auto">
  317.                                 <div className="thumb-wrapper w-100">
  318.                                   <div
  319.                                     className="mx-auto"
  320.                                     style={{
  321.                                       width: '60px',
  322.                                       height: '60px',
  323.                                       backgroundImage: `url('${item.banner ||
  324.                                        ''}')`,
  325.                                       backgroundSize: 'cover',
  326.                                       backgroundPosition: 'center'
  327.                                     }}
  328.                                   />
  329.                                 </div>
  330.                                 <div className="desc">{item.name}</div>
  331.                               </div>
  332.                             </div>
  333.                           </Link>
  334.                         )}
  335.                       </React.Fragment>
  336.                     ))}
  337.               </>
  338.             ) : data.category === null ? (
  339.               <>
  340.                 {/* WHEN FILTER OFF */}
  341.                 {data.all_product === null
  342.                   ? data.product &&
  343.                     data.product.map(item => (
  344.                       <>
  345.                         {dataCount < 3 ? (
  346.                           <ListingPrimaryProduct data={data} retItem={item} />
  347.                         ) : (
  348.                           <Link
  349.                             href="/primary-product/PrimaryProduct"
  350.                             as={`/primary-product/id/${
  351.                               item.id
  352.                             }&path=${JSON.stringify([
  353.                               ...pathArray,
  354.                               { id: item.id, name: item.name }
  355.                             ])}`}
  356.                             key={item.id}
  357.                           >
  358.                             <div className="product-wrapper">
  359.                               <div className="product-listing mt-5 mr-2 mx-auto">
  360.                                 <div className="thumb-wrapper w-100">
  361.                                   <div
  362.                                     className="mx-auto"
  363.                                     style={{
  364.                                       width: '60px',
  365.                                       height: '60px',
  366.                                       backgroundImage: `url('${item.banner ||
  367.                                        ''}')`,
  368.                                       backgroundSize: 'cover',
  369.                                       backgroundPosition: 'center'
  370.                                     }}
  371.                                   />
  372.                                 </div>
  373.                                 <div className="desc">{item.name}</div>
  374.                               </div>
  375.                             </div>
  376.                           </Link>
  377.                         )}
  378.                       </>
  379.                     ))
  380.                   : // WHEN FILTER ON
  381.                     data.all_product &&
  382.                     data.all_product.map(item => (
  383.                       <>
  384.                         {dataAllProduct < 3 ? (
  385.                           <ListingPrimaryProduct data={data} retItem={item} />
  386.                         ) : (
  387.                           <Link
  388.                             href="/primary-product/PrimaryProduct"
  389.                             as={`/primary-product/id/${
  390.                               item.id
  391.                             }&path=${JSON.stringify([
  392.                               ...pathArray,
  393.                               { id: item.id, name: item.name }
  394.                             ])}`}
  395.                             key={item.id}
  396.                           >
  397.                             <div className="product-wrapper">
  398.                               <div className="product-listing mt-5 mr-2 mx-auto">
  399.                                 <div className="thumb-wrapper w-100">
  400.                                   <div
  401.                                     className="mx-auto"
  402.                                     style={{
  403.                                       width: '60px',
  404.                                       height: '60px',
  405.                                       backgroundImage: `url('${item.banner ||
  406.                                        ''}')`,
  407.                                       backgroundSize: 'cover',
  408.                                       backgroundPosition: 'center'
  409.                                     }}
  410.                                   />
  411.                                 </div>
  412.                                 <div className="desc">{item.name}</div>
  413.                               </div>
  414.                             </div>
  415.                           </Link>
  416.                         )}
  417.                       </>
  418.                     ))}
  419.               </>
  420.             ) : (
  421.               <div>no datas</div>
  422.             )}
  423.           </div>
  424.         </div>
  425.       </div>
  426.     );
  427.   }
  428. }
  429.  
  430. const mapStateToProps = state => ({
  431.   data: state.subcategory.data
  432. });
  433.  
  434. export default connect(mapStateToProps, { fetchData })(withRouter(SubCategory));
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!