Fix warnings after upgrade

rundsk · Aug 22, 2019 · 02d109e · 02d109e
1 parent 41758a6
commit 02d109e
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 76 deletions.
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -51,7 +51,7 @@ function App(props) {
         })
       }
     });
-  }, []);
+  }, [props.router]);
 
   function loadTree() {
     Client.tree().then((data) => {
@@ -90,7 +90,7 @@ function App(props) {
   // Use frontend configuration to configure app, if present.
   useEffect(() => {
     Client.configuration().then(setFrontendConfig, () => null)
-  }, []);
+  }, [setFrontendConfig]);
 
   // Initialize tree navigation and title.
   useEffect(loadTree, []);

diff --git a/frontend/src/ColorGroup/index.js b/frontend/src/ColorGroup/index.js
@@ -7,17 +7,13 @@ function ColorGroup(props) {
   const [colors, setColors] = useState([]);
 
   useEffect(() => {
-    getData();
-  }, [props.src]);
-
-  function getData() {
     if (props.src) {
       // FIXME: This should obviously be derived from the src attribute
       Client.get(`/The-Frontend/Documentation-Components/Color-Card-and-Color-Group${props.src.slice(1)}`).then(data => {
         setColors(data.colors);
       });
     }
-  }
+  }, [props.src]);
 
   let classes = ['color-group'];
 

diff --git a/frontend/src/Doc/index.js b/frontend/src/Doc/index.js
@@ -23,18 +23,23 @@ import FigmaEmbed from '../FigmaEmbed';
 import TypographySpecimen from '../TypographySpecimen';
 
 function Doc(props) {
-  if (!props.htmlContent) {
-    return <div className="doc">{props.children}</div>;
-  }
-
   useEffect(() => {
+    if (!props.htmlContent) {
+      return;
+    }
     // window.requestAnimationFrame should ensure that the rendering
-    // has finished
+    // has finished.
     window.requestAnimationFrame(() => {
-      if (props.onRender) { props.onRender() };
+      if (props.onRender) {
+        props.onRender()
+      };
     });
   });
 
+  if (!props.htmlContent) {
+    return <div className="doc">{props.children}</div>;
+  }
+
   // Allow to use this inside the `transforms` constant. We cannot use
   // `props.title` there as that refers to the component/element that is being
   // transformed. The title is needed as to calculate the `Heading`'s jump

diff --git a/frontend/src/FigmaEmbed/index.js b/frontend/src/FigmaEmbed/index.js
@@ -14,52 +14,50 @@ function FigmaEmbed(props) {
   const [errorMessage, setErrorMessage] = useState(null);
   const [loadingMessage, setLoadingMessage] = useState(null);
 
+  // Retrieves document.
   useEffect(() => {
-    getDocument();
-  }, [props.document, props.frame]);
-
-  function getDocument() {
-    if (props.document && props.token) {
-      const myHeaders = new Headers();
-      myHeaders.append('X-Figma-Token', props.token);
-
-      setLoadingMessage('Loading document …');
-
-      fetch(`https://api.figma.com/v1/files/${props.document}`, {
-        method: 'GET',
-        headers: myHeaders,
-      })
-        .then(response => {
-          if (response.status === 200) {
-            return response.json();
-          } else {
-            setErrorMessage('Something went wrong.');
-          }
-        })
-        .then(data => {
-          findId(data);
-        })
-        .catch(err => {
-          console.log(err);
-          setErrorMessage('Something went wrong.');
-        });
-
-      // fetch(`https://api.figma.com/v1/teams/669136806690498635/styles`, {
-      //   method: 'GET',
-      //   headers: myHeaders,
-      // }).then((response) => {
-      //   if (response.status === 200) {
-      //     return response.json();
-      //   } else {
-      //     throw new Error('Something went wrong on api server!');
-      //   }
-      // }).then((data) => {
-      //   console.log(data)
-      // }).catch((err) => {
-      //   console.log(err);
-      // });
+    if (!props.document || !props.token) {
+      return;
     }
-  }
+    const myHeaders = new Headers();
+    myHeaders.append('X-Figma-Token', props.token);
+
+    setLoadingMessage('Loading document …');
+
+    fetch(`https://api.figma.com/v1/files/${props.document}`, {
+      method: 'GET',
+      headers: myHeaders,
+    })
+      .then(response => {
+        if (response.status === 200) {
+          return response.json();
+        } else {
+          setErrorMessage('Something went wrong.');
+        }
+      })
+      .then(data => {
+        findId(data);
+      })
+      .catch(err => {
+        console.log(err);
+        setErrorMessage('Something went wrong.');
+      });
+
+    // fetch(`https://api.figma.com/v1/teams/669136806690498635/styles`, {
+    //   method: 'GET',
+    //   headers: myHeaders,
+    // }).then((response) => {
+    //   if (response.status === 200) {
+    //     return response.json();
+    //   } else {
+    //     throw new Error('Something went wrong on api server!');
+    //   }
+    // }).then((data) => {
+    //   console.log(data)
+    // }).catch((err) => {
+    //   console.log(err);
+    // });
+  }, [props.document, props.frame, props.token]);
 
   function findId(data) {
     let nameWeAreLookingFor = props.frame;

diff --git a/frontend/src/NodeList/index.js b/frontend/src/NodeList/index.js
@@ -14,16 +14,12 @@ function Node(props) {
   const [data, setData] = useState(null);
 
   useEffect(() => {
-    getData();
-  }, [props.url]);
-
-  function getData() {
     if (props.url) {
       Client.get(props.url).then(data => {
         setData(data);
       });
     }
-  }
+  }, [props.url]);
 
   return (
     <BaseLink router={props.router} routeName="node" routeParams={{ node: `${props.url}` }} className="node-list__node">

diff --git a/frontend/src/Page/index.js b/frontend/src/Page/index.js
@@ -40,7 +40,7 @@ function Page(props) {
     }
 
     document.title = title;
-  }, [props.title, props.designSystemTitle]);
+  }, [props.title, props.designSystemTitle, props.url]);
 
   function docDidRender() {
     // Check if there is a section marker in the URL, and if their is

diff --git a/frontend/src/SourceView/index.js b/frontend/src/SourceView/index.js
@@ -16,18 +16,12 @@ function SourceView(props) {
       Client.hello().then(data => {
         setSource(data);
       });
-      return;
-    }
-    getSource();
-  }, [props.url]);
-
-  function getSource() {
-    if (props.url !== undefined) {
+    } else if (props.url !== undefined) {
       Client.get(props.url).then(data => {
         setSource(data);
       });
     }
-  }
+  }, [props.url]);
 
   let title = `API Response for /api/v2/tree/${props.url}`;
 

diff --git a/frontend/src/TypographySpecimen/index.js b/frontend/src/TypographySpecimen/index.js
@@ -83,17 +83,13 @@ function TypographySpecimen(props) {
   // ];
 
   useEffect(() => {
-    getData();
-  }, [props.src]);
-
-  function getData() {
     if (props.src) {
       // FIXME: This should obviously be derived from the src attribute
       Client.get(`/The-Frontend/Documentation-Components/Typography-Specimen${props.src.slice(1)}`).then(data => {
         setStyles(data.styles);
       });
     }
-  }
+  }, [props.src]);
 
   return (
     <div className="typography-specimen">