Add autofocus and remove Collapse component for Inputs (to get autofo…

…cus working)
ParticipioLabs · Nov 18, 2018 · 24901c8 · 24901c8
1 parent 6f7f4e4
commit 24901c8
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 40 deletions.
diff --git a/ui/src/components/ListForm/ListForm.js b/ui/src/components/ListForm/ListForm.js
@@ -31,6 +31,7 @@ const ListForm = ({
         <Input
           name={inputName}
           type="textarea"
+          autoFocus
           rows={3}
           placeholder={placeholder}
           value={value}

diff --git a/ui/src/scenes/Home/components/NeedsContainer/NeedsContainer.js b/ui/src/scenes/Home/components/NeedsContainer/NeedsContainer.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import gql from 'graphql-tag';
 import _ from 'lodash';
 import { withRouter, Redirect } from 'react-router-dom';
-import { Collapse } from 'reactstrap';
 import { Query } from 'react-apollo';
 import { GET_NEEDS } from '@/services/queries';
 import withAuth from '@/components/withAuth';
@@ -27,29 +26,29 @@ const NeedsContainer = withAuth(withRouter(({ auth, match }) => (
           text="Needs"
           color={colors.need}
           showButton={auth.isLoggedIn}
-          onButtonClick={() => client.writeData({
-            data: {
-              showCreateNeed: !localData.showCreateNeed,
-              showCreateResponsibility: false,
-            },
-          })}
+          onButtonClick={() =>
+              client.writeData({
+                data: {
+                  showCreateNeed: !localData.showCreateNeed,
+                  showCreateResponsibility: false,
+                },
+              })
+            }
         />
-        <Collapse isOpen={localData.showCreateNeed}>
-          <CreateNeed />
-        </Collapse>
+        {localData.showCreateNeed && <CreateNeed />}
         <Query query={GET_NEEDS}>
           {({ loading, error, data }) => {
-            if (loading) return <WrappedLoader />;
-            if (error) return `Error! ${error.message}`;
-            const firstNeedId = data.needs && data.needs[0] && data.needs[0].nodeId;
-            if (!_.find(data.needs, { nodeId: match.params.needId }) && firstNeedId) {
-              return <Redirect to={`/${firstNeedId}`} />;
-            }
-            return <NeedsList needs={data.needs} selectedNeedId={match.params.needId} />;
-          }}
+              if (loading) return <WrappedLoader />;
+              if (error) return `Error! ${error.message}`;
+              const firstNeedId = data.needs && data.needs[0] && data.needs[0].nodeId;
+              if (!_.find(data.needs, { nodeId: match.params.needId }) && firstNeedId) {
+                return <Redirect to={`/${firstNeedId}`} />;
+              }
+              return <NeedsList needs={data.needs} selectedNeedId={match.params.needId} />;
+            }}
         </Query>
       </div>
-    )}
+      )}
   </Query>
 )));
 

diff --git a/ui/src/scenes/Home/components/ResponsibilitiesContainer/ResponsibilitiesContainer.js b/ui/src/scenes/Home/components/ResponsibilitiesContainer/ResponsibilitiesContainer.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import gql from 'graphql-tag';
 import { withRouter } from 'react-router-dom';
-import { Collapse } from 'reactstrap';
 import { Query } from 'react-apollo';
 import { GET_NEED_RESPONSIBILITIES } from '@/services/queries';
 import withAuth from '@/components/withAuth';
@@ -29,31 +28,31 @@ const ResponsibilitiesContainer = withAuth(withRouter(({ auth, match }) => {
             text="Responsibilities"
             color={colors.responsibility}
             showButton={auth.isLoggedIn && !!match.params.needId}
-            onButtonClick={() => client.writeData({
-              data: {
-                showCreateResponsibility: !localData.showCreateResponsibility,
-                showCreateNeed: false,
-              },
-            })}
+            onButtonClick={() =>
+                client.writeData({
+                  data: {
+                    showCreateResponsibility: !localData.showCreateResponsibility,
+                    showCreateNeed: false,
+                  },
+                })
+              }
           />
-          <Collapse isOpen={localData.showCreateResponsibility}>
-            <CreateResponsibility />
-          </Collapse>
+          {localData.showCreateResponsibility && <CreateResponsibility />}
           <Query query={GET_NEED_RESPONSIBILITIES} variables={{ needId: match.params.needId }}>
             {({ loading, error, data }) => {
-              if (loading) return <WrappedLoader />;
-              if (error) return `Error! ${error.message}`;
-              if (!data.need) return null;
-              return (
-                <ResponsibilitiesList
-                  responsibilities={data.need.fulfilledBy}
-                  selectedResponsibilityId={match.params.responsibilityId}
-                />
-              );
-            }}
+                if (loading) return <WrappedLoader />;
+                if (error) return `Error! ${error.message}`;
+                if (!data.need) return null;
+                return (
+                  <ResponsibilitiesList
+                    responsibilities={data.need.fulfilledBy}
+                    selectedResponsibilityId={match.params.responsibilityId}
+                  />
+                );
+              }}
           </Query>
         </div>
-      )}
+        )}
     </Query>
   );
 }));