Merge pull request #147 from dictyBase/feat/twitter-widget

Feat/twitter widget

flow-typed/npm/react-twitter-widgets_vx.x.x.js

@@ -0,0 +1,172 @@
+// flow-typed signature: 95ae8495b2c287bd9550d2ec383d38f6
+// flow-typed version: <<STUB>>/react-twitter-widgets_vx.x.x/flow_v0.80.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'react-twitter-widgets'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'react-twitter-widgets' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'react-twitter-widgets/dist/components/AbstractWidget' {
+  declare module.exports: any;
+}
+
+declare module 'react-twitter-widgets/dist/components/Follow' {
+  declare module.exports: any;
+}
+
+declare module 'react-twitter-widgets/dist/components/Hashtag' {
+  declare module.exports: any;
+}
+
+declare module 'react-twitter-widgets/dist/components/Mention' {
+  declare module.exports: any;
+}
+
+declare module 'react-twitter-widgets/dist/components/Share' {
+  declare module.exports: any;
+}
+
+declare module 'react-twitter-widgets/dist/components/Timeline' {
+  declare module.exports: any;
+}
+
+declare module 'react-twitter-widgets/dist/components/Tweet' {
+  declare module.exports: any;
+}
+
+declare module 'react-twitter-widgets/dist/index' {
+  declare module.exports: any;
+}
+
+declare module 'react-twitter-widgets/site/src/App' {
+  declare module.exports: any;
+}
+
+declare module 'react-twitter-widgets/site/src/App.test' {
+  declare module.exports: any;
+}
+
+declare module 'react-twitter-widgets/site/src/index' {
+  declare module.exports: any;
+}
+
+declare module 'react-twitter-widgets/site/src/WidgetExample' {
+  declare module.exports: any;
+}
+
+declare module 'react-twitter-widgets/site/src/widgetPropExamples' {
+  declare module.exports: any;
+}
+
+declare module 'react-twitter-widgets/src/components/AbstractWidget' {
+  declare module.exports: any;
+}
+
+declare module 'react-twitter-widgets/src/components/Follow' {
+  declare module.exports: any;
+}
+
+declare module 'react-twitter-widgets/src/components/Hashtag' {
+  declare module.exports: any;
+}
+
+declare module 'react-twitter-widgets/src/components/Mention' {
+  declare module.exports: any;
+}
+
+declare module 'react-twitter-widgets/src/components/Share' {
+  declare module.exports: any;
+}
+
+declare module 'react-twitter-widgets/src/components/Timeline' {
+  declare module.exports: any;
+}
+
+declare module 'react-twitter-widgets/src/components/Tweet' {
+  declare module.exports: any;
+}
+
+declare module 'react-twitter-widgets/src/index' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'react-twitter-widgets/dist/components/AbstractWidget.js' {
+  declare module.exports: $Exports<'react-twitter-widgets/dist/components/AbstractWidget'>;
+}
+declare module 'react-twitter-widgets/dist/components/Follow.js' {
+  declare module.exports: $Exports<'react-twitter-widgets/dist/components/Follow'>;
+}
+declare module 'react-twitter-widgets/dist/components/Hashtag.js' {
+  declare module.exports: $Exports<'react-twitter-widgets/dist/components/Hashtag'>;
+}
+declare module 'react-twitter-widgets/dist/components/Mention.js' {
+  declare module.exports: $Exports<'react-twitter-widgets/dist/components/Mention'>;
+}
+declare module 'react-twitter-widgets/dist/components/Share.js' {
+  declare module.exports: $Exports<'react-twitter-widgets/dist/components/Share'>;
+}
+declare module 'react-twitter-widgets/dist/components/Timeline.js' {
+  declare module.exports: $Exports<'react-twitter-widgets/dist/components/Timeline'>;
+}
+declare module 'react-twitter-widgets/dist/components/Tweet.js' {
+  declare module.exports: $Exports<'react-twitter-widgets/dist/components/Tweet'>;
+}
+declare module 'react-twitter-widgets/dist/index.js' {
+  declare module.exports: $Exports<'react-twitter-widgets/dist/index'>;
+}
+declare module 'react-twitter-widgets/site/src/App.js' {
+  declare module.exports: $Exports<'react-twitter-widgets/site/src/App'>;
+}
+declare module 'react-twitter-widgets/site/src/App.test.js' {
+  declare module.exports: $Exports<'react-twitter-widgets/site/src/App.test'>;
+}
+declare module 'react-twitter-widgets/site/src/index.js' {
+  declare module.exports: $Exports<'react-twitter-widgets/site/src/index'>;
+}
+declare module 'react-twitter-widgets/site/src/WidgetExample.js' {
+  declare module.exports: $Exports<'react-twitter-widgets/site/src/WidgetExample'>;
+}
+declare module 'react-twitter-widgets/site/src/widgetPropExamples.js' {
+  declare module.exports: $Exports<'react-twitter-widgets/site/src/widgetPropExamples'>;
+}
+declare module 'react-twitter-widgets/src/components/AbstractWidget.js' {
+  declare module.exports: $Exports<'react-twitter-widgets/src/components/AbstractWidget'>;
+}
+declare module 'react-twitter-widgets/src/components/Follow.js' {
+  declare module.exports: $Exports<'react-twitter-widgets/src/components/Follow'>;
+}
+declare module 'react-twitter-widgets/src/components/Hashtag.js' {
+  declare module.exports: $Exports<'react-twitter-widgets/src/components/Hashtag'>;
+}
+declare module 'react-twitter-widgets/src/components/Mention.js' {
+  declare module.exports: $Exports<'react-twitter-widgets/src/components/Mention'>;
+}
+declare module 'react-twitter-widgets/src/components/Share.js' {
+  declare module.exports: $Exports<'react-twitter-widgets/src/components/Share'>;
+}
+declare module 'react-twitter-widgets/src/components/Timeline.js' {
+  declare module.exports: $Exports<'react-twitter-widgets/src/components/Timeline'>;
+}
+declare module 'react-twitter-widgets/src/components/Tweet.js' {
+  declare module.exports: $Exports<'react-twitter-widgets/src/components/Tweet'>;
+}
+declare module 'react-twitter-widgets/src/index.js' {
+  declare module.exports: $Exports<'react-twitter-widgets/src/index'>;
+}

package.json

@@ -49,6 +49,7 @@
     "react-responsive-carousel": "^3.1.41",
     "react-router-dom": "^5.0.0",
     "react-scripts": "^3.0.0",
+    "react-twitter-widgets": "^1.7.1",
     "redux": "^4.0.1",
     "redux-devtools-extension": "^2.13.5",
     "redux-thunk": "^2.3.0",

src/components/editor/plugins/fontcolor.js

@@ -6,6 +6,11 @@ import FormatColorTextIcon from "@material-ui/icons/FormatColorText"
 import ToolbarButton from "../toolbar/ToolbarButton"
 import { ButtonProps, NodeProps } from "../flow/types"
 
+type colorProps = {
+  showColorPicker: boolean,
+  setShowColorPicker: Function,
+}
+
 /**
  * Functions to set the font color marks.
  */
@@ -48,7 +53,10 @@ const FontColorMark = ({ children, mark: { data } }: NodeProps) => (
 /**
  * Button component that uses a click handler to connect to the ColorPicker component.
  */
-const FontColorButton = ({ showColorPicker, setShowColorPicker }) => (
+const FontColorButton = ({
+  showColorPicker,
+  setShowColorPicker,
+}: colorProps) => (
   <Tooltip title="Font Color" placement="bottom">
     <ToolbarButton
       onClick={() => {

src/components/editor/plugins/fontfamily.js

@@ -3,7 +3,7 @@ import React, { useState } from "react"
 import MenuItem from "@material-ui/core/MenuItem"
 import FormControl from "@material-ui/core/FormControl"
 import Select from "@material-ui/core/Select"
-import { NodeProps } from "../flow/types"
+import { NodeProps, ButtonProps } from "../flow/types"
 
 /**
  * List of fonts available
@@ -65,7 +65,7 @@ const FontFamilyMark = ({ children, mark: { data } }: NodeProps) => (
 /**
  * Dropdown component that connects to the editor.
  */
-const FontFamilyDropdown = ({ editor, classes }) => {
+const FontFamilyDropdown = ({ editor, classes }: ButtonProps) => {
   const [currentFont, setCurrentFont] = useState(3)
 
   return (

src/components/editor/plugins/fontsize.js

@@ -3,7 +3,7 @@ import React, { useState } from "react"
 import MenuItem from "@material-ui/core/MenuItem"
 import FormControl from "@material-ui/core/FormControl"
 import Select from "@material-ui/core/Select"
-import { NodeProps } from "../flow/types"
+import { NodeProps, ButtonProps } from "../flow/types"
 
 /**
  * List of font sizes
@@ -68,7 +68,7 @@ const FontSizeMark = ({ children, mark: { data } }: NodeProps) => (
 /**
  * Button components that use click handlers to connect to the editor.
  */
-const FontSizeDropdown = ({ editor, classes }) => {
+const FontSizeDropdown = ({ editor, classes }: ButtonProps) => {
   const [currentFontSize, setCurrentFontSize] = useState(2)
 
   return (

src/components/editor/plugins/table.js

@@ -9,6 +9,11 @@ import DeleteIcon from "@material-ui/icons/Delete"
 import ToolbarButton from "../toolbar/ToolbarButton"
 import { ButtonProps, NodeProps } from "../flow/types"
 
+type tableProps = {
+  showTableOptions: boolean,
+  setShowTableOptions: Function,
+}
+
 /**
  * Rendering components that provide the actual HTML to use inside the editor.
  */
@@ -30,7 +35,7 @@ const TableCellNode = ({ attributes, children }: NodeProps) => (
 const InsertInitialTableButton = ({
   showTableOptions,
   setShowTableOptions,
-}) => (
+}: tableProps) => (
   <Tooltip title="Table" placement="bottom">
     <ToolbarButton
       onClick={() => {

src/components/editor/toolbar/EditorToolbar.js

@@ -101,15 +101,22 @@ const styles = theme => ({
   },
 })
 
+type Props = {
+  /** Material-UI styling */
+  classes: Object,
+  /** Function for saving page content */
+  onSave: Function,
+}
+
 /**
  * The toolbar for the page editor. It uses Material-UI's AppBar component as the foundation, then displays individual buttons inside of it.
  */
 
-export const EditorToolbar = props => {
+export const EditorToolbar = (props: Props) => {
   const [showColorPicker, setShowColorPicker] = useState(false)
   const [showTableOptions, setShowTableOptions] = useState(false)
   const [showHelpModal, setShowHelpModal] = useState(false)
-  const { classes, ...other } = props
+  const { classes, onSave, ...other } = props
 
   return (
     <>
@@ -208,7 +215,7 @@ export const EditorToolbar = props => {
                     size="small"
                     variant="contained"
                     color="primary"
-                    onClick={props.onSave}>
+                    onClick={onSave}>
                     Save
                   </Button>
                 </Grid>