Merge pull request #53 from glific/bug/console-warnings

Console warnings cleanup
glific · Jun 19, 2020 · 47745ac · 47745ac
2 parents 703c001 + 187e2e5
commit 47745ac
Showing 1 changed file with 29 additions and 19 deletions.
diff --git a/src/containers/Tag/Tag.tsx b/src/containers/Tag/Tag.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { Redirect } from 'react-router-dom';
 import { Formik, Form, Field } from 'formik';
 import { Button } from '../../components/UI/Form/Button/Button';
@@ -19,19 +19,37 @@ export interface TagProps {
 }
 
 export const Tag: React.SFC<TagProps> = (props) => {
+  const languages = useQuery(GET_LANGUAGES, {
+    onCompleted: (data) => {
+      setLanguageId(data.languages[0].id);
+    },
+  });
   const tagId = props.match.params.id ? props.match.params.id : false;
-  const { loading, error, data } = useQuery(GET_TAG, {
+  const { loading, error } = useQuery(GET_TAG, {
     variables: { id: tagId },
     skip: !tagId,
+    onCompleted: (data) => {
+      if (tagId && data) {
+        tag = data.tag.tag;
+        setLabel(tag.label);
+        setDescription(tag.description);
+        setIsActive(tag.isActive);
+        setIsReserved(tag.isReserved);
+        setLanguageId(tag.language.id);
+      }
+    },
+  });
+  const [updateTag] = useMutation(UPDATE_TAG, {
+    onCompleted: () => {
+      setFormSubmitted(true);
+    },
   });
-  const [updateTag] = useMutation(UPDATE_TAG);
-  const languages = useQuery(GET_LANGUAGES);
 
   const [label, setLabel] = useState('');
   const [description, setDescription] = useState('');
   const [isActive, setIsActive] = useState(false);
   const [isReserved, setIsReserved] = useState(false);
-  const [languageId, setLanguageId] = useState(1);
+  const [languageId, setLanguageId] = useState('');
   const [formSubmitted, setFormSubmitted] = useState(false);
 
   const [createTag] = useMutation(CREATE_TAG, {
@@ -43,25 +61,17 @@ export const Tag: React.SFC<TagProps> = (props) => {
         data: { tags: tags.tags.concat(createTag.tag) },
       });
     },
+    onCompleted: () => {
+      setFormSubmitted(true);
+    },
   });
 
   const client = useApolloClient();
 
   let tag: any = null;
 
-  useEffect(() => {
-    if (tagId && data) {
-      tag = tagId ? data.tag.tag : null;
-      setLabel(tag.label);
-      setDescription(tag.description);
-      setIsActive(tag.isActive);
-      setIsReserved(tag.isReserved);
-      setLanguageId(tag.language.id);
-    }
-  }, [data]);
-
   if (loading) return <Loading />;
-  if (error) return <p>Error</p>;
+  if (error) return <p>Error :(</p>;
 
   const saveHandler = (tag: any) => {
     const payload = {
@@ -90,7 +100,6 @@ export const Tag: React.SFC<TagProps> = (props) => {
       message = 'Tag added successfully!';
     }
     setNotification(client, message);
-    setFormSubmitted(true);
   };
 
   const cancelHandler = () => {
@@ -152,9 +161,10 @@ export const Tag: React.SFC<TagProps> = (props) => {
         {({ submitForm }) => (
           <Paper elevation={3}>
             <Form className={styles.Form}>
-              {formFields.map((field) => {
+              {formFields.map((field, index) => {
                 return (
                   <Field
+                    key={index}
                     component={field.component}
                     name={field.name}
                     type={field.type}