fix: repair lifecycles, hooks rules and default props

app/components/Content/Layout.js

@@ -69,10 +69,12 @@ const Layout = ({ widgets }) => {
   const [ primaryWidgets, setPrimaryWidgets ] = useState(originalPrimaryWidgets)
   const [ secondaryWidgets, setSecondaryWidgets ] = useState(originalSecondaryWidgets)
 
-  useEffect(() => {
+  const updateColumns = () => {
     setPrimaryWidgets(originalPrimaryWidgets)
     setSecondaryWidgets(originalSecondaryWidgets)
-  }, [ editMode, originalPrimaryWidgets, originalSecondaryWidgets ])
+  }
+
+  useEffect(updateColumns, [ editMode, widgets ])
 
   const setPrimary = p => {
     const nextWidgets = p.map((e, i) => ({ ...e, index: i, layout: { primary: true } }))

app/components/Form/WidgetSelect.js

@@ -20,7 +20,11 @@ const WidgetSelect = ({ onChange, value }) => (
 
 WidgetSelect.propTypes ={
   onChange: PropTypes.func.isRequired,
-  value: PropTypes.number.isRequired,
+  value: PropTypes.number,
+}
+
+WidgetSelect.defaultProps ={
+  value: -1,
 }
 
 export default WidgetSelect

app/components/Panel/Panel.js

@@ -11,6 +11,7 @@ import { uuid } from '../../utils/helpers'
 // TODO: encode this in types constant along with widgetSelect
 const widgetType = {
   MARKDOWN: 0,
+  NONE: -1,
   VOTES: 1,
   // ACTIVITY: 1,
   // VOTES: 2,
@@ -36,9 +37,14 @@ const WidgetConfig = ({ data, type, setData }) => {
 }
 
 WidgetConfig.propTypes ={
-  data: PropTypes.string.isRequired,
+  data: PropTypes.string,
   setData: PropTypes.func.isRequired,
-  type: PropTypes.oneOf(Object.values(widgetType)).isRequired,
+  type: PropTypes.oneOf(Object.values(widgetType)),
+}
+
+WidgetConfig.defaultProps ={
+  data: '',
+  type: widgetType.NONE,
 }
 
 const Panel = ({ onSubmit }) => {

app/components/Widget/Markdown/Editor.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef } from 'react'
 import { GU, RADIUS, textStyle, useSidePanel, useTheme } from '@aragon/ui'
 
 import CodeMirror from 'codemirror/lib/codemirror'
@@ -15,60 +15,33 @@ const editorOptions = {
   scrollbarStyle: 'overlay', // depends on simplescrollbars codemirror addon
 }
 
-
 // TODO: Dark mode needs fixing here
 const Editor = ({ editor, initialValue, onChange, setEditor, ...props }) => {
-  const [ , setValue ] = useState(initialValue)
-
   const ref = useRef()
-
   const { readyToFocus } = useSidePanel()
   const theme = useTheme()
+
+  const handleValueChange = useCallback(instance => {
+    onChange(instance.getValue())
+  }, [onChange])
+
   // initialize editor
   useEffect(() => {
     const setupCodeMirror = async () => {
-      const { current: textarea } = ref
-
-      if (!textarea) {
-        return
+      if (ref.current) {
+        const cm = CodeMirror.fromTextArea(ref.current, editorOptions)
+        cm.on('change', handleValueChange)
+        cmResize(cm, {
+          minHeight: 100,
+          resizableWidth: false,
+        })
+        setEditor(cm)
       }
-
-      const cm = CodeMirror.fromTextArea(textarea, editorOptions)
-      cm.on('change', instance => {
-        const value = instance.getValue()
-        onChange(value)
-      })
-      cmResize(cm, {
-        minHeight: 100,
-        resizableWidth: false,
-      })
-      // TODO: Clean event handlers on exit
-      setEditor(cm)
     }
-
     setupCodeMirror()
 
-    return () => {
-      if (!editor) {
-        return
-      }
-
-      editor.toTextArea()
-    }
-  }, [ editor, onChange, ref, setEditor ])
-
-  useEffect(() => {
-    setValue(initialValue)
-  }, [initialValue])
-
-  // useEffect(() => {
-  //   if (!editor) {
-  // return
-  // }
-  // if (value !== editor.getValue()) {
-  //     editor.setValue(value)
-  //   }
-  // }, [editor, value])
+    return () => void setEditor(null)
+  }, [ handleValueChange, setEditor ])
 
   useEffect(() => {
     if (readyToFocus && editor) {
@@ -123,10 +96,20 @@ const Editor = ({ editor, initialValue, onChange, setEditor, ...props }) => {
 }
 
 Editor.propTypes = {
-  editor: PropTypes.func.isRequired,
-  initialValue:PropTypes.string.isRequired,
+  editor: PropTypes.shape({
+    focus: PropTypes.func,
+    lineCount: PropTypes.func,
+    setCursor: PropTypes.func,
+
+  }),
+  initialValue:PropTypes.string,
   onChange: PropTypes.func.isRequired,
   setEditor: PropTypes.func.isRequired,
 }
 
-export default Editor
+Editor.defaultProps = {
+  editor: null,
+  initialValue: '',
+}
+
+export default Editor

app/components/Widget/Votes/Votes.js

@@ -155,7 +155,8 @@ const IdContainer = styled.span`
 const Description = ({ text }) => {
   // by the rules of hooks, they cannot be called conditionally
   const network = useNetwork()
-  const [localLabel] = useIdentity(address)
+  // TODO:: check initialization error,  put some wait or check
+  const [localLabel] = 'Pepito' // useIdentity(address)
 
   if (!text) return <span />
   const addressRegex = /0x[a-fA-F0-9]{40}/g

contracts/dev/Template.sol

@@ -123,8 +123,8 @@ contract Template is BaseTemplate, TokenCache {
     {
         About app = _installAboutApp(_dao);
         // Warning here, set ANY_ENTITY for development,
-        // use another grantee or manager in prod like for example _voting
-        _createAboutAppPermissions(_acl, app, ANY_ENTITY, ANY_ENTITY);
+        // use another grantee in prod like for example _voting
+        _createAboutAppPermissions(_acl, app, ANY_ENTITY, _voting);
     }
 
     function _installAboutApp(