# STEP-11 SocialShare for CategoryPage

[**STEP-11**](https://github.com/GAkim/SocialShareGraphQl/tree/STEP-11)

{% embed url="<https://www.youtube.com/watch?v=dW9V-Dj-UhI>" %}

Let's repeat what we did with ProductAction Component for CategoryPage

1. &#x20;Create **CategoryPageContainerMSTP.plugin.js** at **SOURCE/plugin**

{% code title="scandipwa-socialshare/src/plugin/CategoryPageContainerMSTP.plugin.js" %}

```javascript
const mapStateToProps = (args, callback, instance) => {
   const [state] = args;

   return {
       ...callback(...args),
       socialShare: state.SocialShareReducer.socialShare
   };
};

export default {
   'Route/CategoryPage/Container/mapStateToProps': {
       function: mapStateToProps
   }
};

```

{% endcode %}

2\. Create **CategoryPageComponent.plugin.js** at **\<SOURCE>/plugin**

{% code title="scandipwa/packages/scandipwa-socialshare/src/plugin/CategoryPageComponent.plugin.js" %}

```javascript
import { lazy, Suspense } from 'react';

export const SocialShare = lazy(() => import(
   /* webpackMode: "lazy", webpackChunkName: "social-share" */
   '../component/SocialShare'
));

const renderItemsCount = (args, callback, instance) => {
   const [isVisibleOnMobile] = args;

   return (
       <>
           { callback.apply(instance, args) }
           { renderSocialShare(instance.props, isVisibleOnMobile) }
       </>
   );
};

const renderSocialShare = (props, isVisibleOnMobile) => {
   const {
       category: {
           description
       },
       socialShare: {
           socialShareConfig: {
               enabled, categoryPage, rounded, size
           }, providers
       }, device
   } = props;

   if (isVisibleOnMobile && !device.isMobile) {
       return null;
   }

   if (!isVisibleOnMobile && device.isMobile) {
       return null;
   }

   if (!enabled && !categoryPage) {
       return null;
   }

   return (
       <Suspense fallback={ null }>
           <SocialShare
             isRounded={ rounded }
             size={ size }
             providers={ providers }
             quote={ description }
           />
       </Suspense>
   );
};

export const config = {
   'Route/CategoryPage/Component': {
       'member-function': {
           renderItemsCount
       }
   }
};

export default config;
```

{% endcode %}

3\. Resolve style issue by modifying **SocialShare.style.scss**

{% code title="scandipwa-socialshare/src/component/SocialShare/SocialShare.style.scss Line: 12 - 21" %}

```javascript
.CategoryPage {
   &-LayoutButtons {
       margin-bottom: 10px;
       min-width: 100px;
   }

   &-Miscellaneous {
       grid-template-columns: unset;
   }
}

```

{% endcode %}

4\. Restart the frontend and check the outcome

| **Mobile**                                                                                                                                                                      |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](https://lh5.googleusercontent.com/lE8wj_lZYvdyT_KE-HOUYJ_KWTgWuItjy60RaER9ZSjG2jWy79MMGd2pmN2dU6UUhsMB-0bxvIRH_nUjH4VMrPN7Bs6x_f-QUpWheI9-yVth4s0Qfdr1PLaAFeDwP_513glaMC0f) |
| **Desktop**                                                                                                                                                                     |

![](https://lh4.googleusercontent.com/vm6-5QCDOkc8UlpQlQfyoNFzxnPF0xPT7r3yMmFG298GnN2S99yOB2wsXRB-BrYgs80H7M89bZlp8_OzEspl2a6OXcMovU1pK6w5VHkzeOkUhje3DDsywrxHaamSt3iy-yO06s4H)