connect to the backend

packages/app/src/components/SubscribeButton.jsx

@@ -2,21 +2,28 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
+import { withUnstatedContainers } from './UnstatedUtils';
 
+import { toastError } from '~/client/util/apiNotification';
+import AppContainer from '~/client/services/AppContainer';
+import PageContainer from '~/client/services/PageContainer';
 
-const WatchButton = (props) => {
+const SubscruibeButton = (props) => {
 
   const [isWatching, setIsWatching] = useState(true);
 
-  const handleClick = () => {
+  const { appContainer } = props;
+
+  const handleClick = async() => {
     setIsWatching(!isWatching);
+    await appContainer.apiv3Put('page/subscribe', {});
   };
 
   return (
     <>
       <button
         type="button"
-        id="watch-button"
+        id="subscribe-button"
         onClick={handleClick}
         className={`btn btn-watch border-0 ${`btn-${props.size}`} ${isWatching ? 'active' : ''} `}
       >
@@ -34,12 +41,17 @@ const WatchButton = (props) => {
 
 };
 
-WatchButton.propTypes = {
+
+const SubscruibeButtonWrapper = withUnstatedContainers(SubscruibeButton, [AppContainer, PageContainer]);
+
+SubscruibeButton.propTypes = {
   size: PropTypes.string,
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
 };
 
-WatchButton.defaultProps = {
+SubscruibeButton.defaultProps = {
   size: 'md',
 };
 
-export default withTranslation()(WatchButton);
+export default withTranslation()(SubscruibeButtonWrapper);