Add like and repost syndication targets to settings page

cleverdevil · Nov 19, 2017 · 6cf510f · 6cf510f
1 parent bc05d11
commit 6cf510f
Show file tree

Hide file tree

Showing 7 changed files with 193 additions and 20 deletions.
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -2,4 +2,5 @@ export * from './app';
 export * from './timeline';
 export * from './post-kinds';
 export * from './channels';
-export * from './user';
+export * from './user';
+export * from './settings';
diff --git a/src/actions/settings.js b/src/actions/settings.js
@@ -0,0 +1,7 @@
+export const setSetting = (key, value) => {
+  return {
+    type: 'SET_SETTING',
+    key: key,
+    value: value,
+  };
+}
diff --git a/src/components/card.js b/src/components/card.js
@@ -70,14 +70,14 @@ class TogetherCard extends React.Component {
 
   handleLike(e) {
     const url = this.props.post.url;
-    indieActions.like(url)
+    indieActions.like(url, this.props.likeSyndication)
       .then(() => alert('successful like'))
       .catch(() => alert('error liking'));
   }
 
   handleRepost(e) {
     const url = this.props.post.url;
-    indieActions.repost(url)
+    indieActions.repost(url, this.props.repostSyndication)
       .then(() => alert('successful repost'))
       .catch(() => alert('error repost'));
   }
@@ -318,5 +318,11 @@ TogetherCard.propTypes = {
 //   }, dispatch);
 // }
 
-// export default connect(null, mapDispatchToProps)(withStyles(styles)(TogetherCard));
-export default withStyles(styles)(TogetherCard);
+function mapStateToProps(state, props) {
+  return {
+    likeSyndication: state.settings.get('likeSyndication'),
+    repostSyndication: state.settings.get('repostSyndication'),
+  };
+}
+
+export default connect(mapStateToProps, null)(withStyles(styles)(TogetherCard));
diff --git a/src/components/settings.js b/src/components/settings.js
@@ -13,11 +13,13 @@ import {
   FormHelperText,
 } from 'material-ui/Form';
 import TextField from 'material-ui/TextField';
+import Checkbox from 'material-ui/Checkbox';
 import Button from 'material-ui/Button';
 import Divider from 'material-ui/Divider';
 import IconButton from 'material-ui/IconButton';
 import CloseIcon from 'material-ui-icons/Close';
-import { setUserOption, logout } from '../actions';
+import { setUserOption, setSetting, logout } from '../actions';
+import micropubApi from '../modules/micropub-api';
 
 
 const styles = theme => ({
@@ -37,6 +39,7 @@ const styles = theme => ({
     position: 'absolute',
     top: 0,
     right: 0,
+    zIndex: 10,
     '&:hover button': {
       color: theme.palette.primary['900'],
     },
@@ -50,6 +53,15 @@ class Settings extends React.Component {
     }
     this.handleChange = this.handleChange.bind(this);
     this.handleUserOptionChange = this.handleUserOptionChange.bind(this);
+    this.getSyndicationProviders = this.getSyndicationProviders.bind(this);
+    this.handleLikeSyndicationChange = this.handleLikeSyndicationChange.bind(this);
+    this.handleRepostSyndicationChange = this.handleRepostSyndicationChange.bind(this);
+  }
+
+  componentDidMount() {
+    if (this.props.settings.syndicationProviders.length < 1) {
+      this.getSyndicationProviders();
+    }
   }
 
   handleChange = name => event => {
@@ -62,6 +74,51 @@ class Settings extends React.Component {
     this.props.setUserOption(name, event.target.value);
   }
 
+  handleLikeSyndicationChange(event, checked) {
+    const provider = event.target.value;
+    let options = this.props.settings.likeSyndication;
+    const index = options.indexOf(provider);
+    if (index > -1) {
+      options.splice(index, 1);
+    } else {
+      options.push(provider);
+    }
+    this.props.setSetting('likeSyndication', options);
+    // Have to force an update for some reason
+    this.setState({ force: 'update' });
+  }
+
+  handleRepostSyndicationChange(event, checked) {
+    const provider = event.target.value;
+    let options = this.props.settings.repostSyndication;
+    const index = options.indexOf(provider);
+    if (index > -1) {
+      options.splice(index, 1);
+    } else {
+      options.push(provider);
+    }
+    this.props.setSetting('repostSyndication', options);
+    // Have to force an update for some reason
+    this.setState({ force: 'update' });
+  }
+
+  getSyndicationProviders() {
+    micropubApi('query', {
+      param: 'syndicate-to',
+    })
+      .then((syndicationProviders) => {
+        if (syndicationProviders['syndicate-to']) {
+          this.props.setSetting('syndicationProviders', syndicationProviders['syndicate-to']);
+        } else {
+          alert('Error getting your syndication options')
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+        alert('Error getting your syndication options')
+      });
+  }
+
   render() {
     return (
       <div className={this.props.classes.page}>
@@ -118,6 +175,60 @@ class Settings extends React.Component {
           </FormGroup>
         </FormControl>
         <Divider className={this.props.classes.divider} />
+        <FormControl component="fieldset" className={this.props.classes.fieldset}>
+          <FormLabel component="legend">Together options</FormLabel>
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={this.props.settings.reactions}
+                  onChange={() => { }}
+                />
+              }
+              label="Emoji Reaction Support"
+            />
+
+            <FormControl component="div">
+              <FormLabel component="span">Like Syndication</FormLabel>
+              <FormGroup>
+                {this.props.settings.syndicationProviders.map((provider) => (
+                  <FormControlLabel
+                    key={`like-syndication-setting-${provider.uid}`}  
+                    control={
+                      <Checkbox
+                        checked={(this.props.settings.likeSyndication.indexOf(provider.uid) > -1)}
+                        value={provider.uid}
+                        onChange={this.handleLikeSyndicationChange}
+                      />
+                    }
+                    label={provider.name}
+                  />
+                ))}
+              </FormGroup>
+            </FormControl>
+
+            <FormControl component="div">
+              <FormLabel component="span">Repost Syndication</FormLabel>
+              <FormGroup>
+                {this.props.settings.syndicationProviders.map((provider) => (
+                  <FormControlLabel
+                    key={`repost-syndication-setting-${provider.uid}`}
+                    control={
+                      <Checkbox
+                        checked={(this.props.settings.repostSyndication.indexOf(provider.uid) > -1)}
+                        value={provider.uid}
+                        onChange={this.handleRepostSyndicationChange}
+                      />
+                    }
+                    label={provider.name}
+                  />
+                ))}
+              </FormGroup>
+            </FormControl>
+
+            <Button onClick={this.getSyndicationProviders} raised>Update Syndication Providers</Button>
+          </FormGroup>
+        </FormControl>
       </div>
     );
   }
@@ -132,12 +243,14 @@ Settings.propTypes = {
 function mapStateToProps(state, props) {
   return {
     user: state.user.toJS(),
+    settings: state.settings.toJS(),
   };
 }
 
 function mapDispatchToProps(dispatch) {
   return bindActionCreators({
     setUserOption: setUserOption,
+    setSetting: setSetting,
     logout: logout,
   }, dispatch);
 }

diff --git a/src/modules/indie-actions.js b/src/modules/indie-actions.js
@@ -1,24 +1,32 @@
 import micropubApi from './micropub-api';
 
-export function like(url) {
-  return micropubApi('create', {
-    param: {
-      type: ['h-entry'],
-      properties: {
-        'like-of': [url],
-      },
+export function like(url, syndication = []) {
+  let mf = {
+    type: ['h-entry'],
+    properties: {
+      'like-of': [url],
     },
+  };
+  if (syndication.length > 0) {
+    mf.properties['mp-syndicate-to'] = syndication;
+  }
+  return micropubApi('create', {
+    param: mf,
   });
 }
 
-export function repost(url) {
-  return micropubApi('create', {
-    param: {
-      type: ['h-entry'],
-      properties: {
-        'repost-of': [url],
-      },
+export function repost(url, syndication = []) {
+  let mf = {
+    type: ['h-entry'],
+    properties: {
+      'repost-of': [url],
     },
+  };
+  if (syndication.length > 0) {
+    mf.properties['mp-syndicate-to'] = syndication;
+  }
+  return micropubApi('create', {
+    param: mf,
   });
 }
 

diff --git a/src/reducers/index.js b/src/reducers/index.js
@@ -5,13 +5,15 @@ import timeline from './timeline';
 import postKinds from './post-kinds';
 import channels from './channels';
 import user from './user';
+import settings from './settings';
 
 const rootReducer = combineReducers({
   app,
   timeline,
   postKinds,
   channels,
   user,
+  settings,
 });
 
 export default rootReducer;
diff --git a/src/reducers/settings.js b/src/reducers/settings.js
@@ -0,0 +1,36 @@
+import { Map } from 'immutable';
+
+const emptyState = {
+  reactions: false,
+  syndicationProviders: [],
+  likeSyndication: [],
+  repostSyndication: [],
+};
+
+let initialState = new Map();
+for (const key in emptyState) {
+  const localValue = localStorage.getItem(`together-setting-${key}`);
+  if (localValue) {
+    initialState = initialState.set(key, JSON.parse(localValue));
+  } else {
+    initialState = initialState.set(key, emptyState[key]);
+  }
+}
+
+export default (state = initialState, payload) => {
+  switch (payload.type) {
+    case 'SET_SETTING': {
+      localStorage.setItem(`together-setting-${payload.key}`, JSON.stringify(payload.value));
+      return state.set(payload.key, payload.value);
+    }
+    case 'LOGOUT': {
+      return state.map((value, key) => {
+        localStorage.removeItem(`together-setting-${key}`);
+        return emptyState[key];
+      });
+    }  
+    default: {
+      return state;
+    }
+  }
+};