@aclymatepackages/modules 2.1.8 → 2.1.10

package/dist/components/PdlCompanySelect.js

@@ -52,7 +52,8 @@ const CompanySelectionChip = _ref => {
 };
 const PdlCompanySelect = _ref2 => {
   let {
-    onSelectCompany
+    onSelectCompany,
+    apiKey
   } = _ref2;
   const [inputValue, setInputValue] = (0, _react.useState)("");
   const [matchingCompanies, setMatchingCompanies] = (0, _react.useState)([]);
@@ -60,7 +61,7 @@ const PdlCompanySelect = _ref2 => {
   const [pdlFetchLoading, setPdlFetchLoading] = (0, _react.useState)(false);
   const [selectedCompanyId, setSelectedCompanyId] = (0, _react.useState)(null);
   const pdlClient = (0, _react.useMemo)(() => new _peopledatalabs.default({
-    apiKey: process.env.REACT_APP_PEOPLEDATALABS_API_KEY
+    apiKey
   }), []);
   const fetchMatchingCompanies = async () => {
     setPdlFetchLoading(true);
@@ -85,6 +86,14 @@ const PdlCompanySelect = _ref2 => {
     setMatchingCompanies(capitalizedCompanies);
     return setInputComplete(true);
   };
+  const {
+    name: selectedCompanyName
+  } = matchingCompanies.find(_ref4 => {
+    let {
+      id
+    } = _ref4;
+    return selectedCompanyId === id;
+  }) || {};
   return /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
     spacing: 2,
@@ -96,10 +105,10 @@ const PdlCompanySelect = _ref2 => {
     label: "Enter your company's name",
     value: inputValue,
     setValue: setInputValue,
-    onKeyPress: _ref4 => {
+    onKeyPress: _ref5 => {
       let {
         key
-      } = _ref4;
+      } = _ref5;
       if (key === "Enter") {
         return fetchMatchingCompanies();
       }
@@ -126,11 +135,11 @@ const PdlCompanySelect = _ref2 => {
     container: true,
     spacing: 2,
     justifyContent: "center"
-  }, matchingCompanies.map((_ref5, idx) => {
+  }, matchingCompanies.map((_ref6, idx) => {
     let {
       name,
       meta
-    } = _ref5;
+    } = _ref6;
     return /*#__PURE__*/_react.default.createElement(CompanySelectionChip, _extends({
       key: "company-list-item-".concat(idx),
       name: name,
@@ -147,7 +156,7 @@ const PdlCompanySelect = _ref2 => {
   }, selectedCompanyId ? /*#__PURE__*/_react.default.createElement(_material.Button, {
     variant: "contained",
     color: "secondary",
-    onClick: () => onSelectCompany(selectedCompanyId)
+    onClick: () => onSelectCompany(selectedCompanyId, selectedCompanyName)
   }, "Choose this company") : /*#__PURE__*/_react.default.createElement(_material.Button, {
     color: "primary",
     onClick: () => onSelectCompany("none", inputValue)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aclymatepackages/modules",
-  "version": "2.1.8",
+  "version": "2.1.10",
   "description": "Aclymate modules",
   "author": "William Loopesko",
   "main": "dist/index.js",

package/src/components/PdlCompanySelect.js

@@ -35,7 +35,7 @@ const CompanySelectionChip = ({
   </Grid>
 );
 
-const PdlCompanySelect = ({ onSelectCompany }) => {
+const PdlCompanySelect = ({ onSelectCompany, apiKey }) => {
   const [inputValue, setInputValue] = useState("");
   const [matchingCompanies, setMatchingCompanies] = useState([]);
   const [inputComplete, setInputComplete] = useState(false);
@@ -45,7 +45,7 @@ const PdlCompanySelect = ({ onSelectCompany }) => {
   const pdlClient = useMemo(
     () =>
       new PDLJS({
-        apiKey: process.env.REACT_APP_PEOPLEDATALABS_API_KEY,
+        apiKey,
       }),
     []
   );
@@ -72,6 +72,9 @@ const PdlCompanySelect = ({ onSelectCompany }) => {
     return setInputComplete(true);
   };
 
+  const { name: selectedCompanyName } =
+    matchingCompanies.find(({ id }) => selectedCompanyId === id) || {};
+
   return (
     <Grid container spacing={2} direction="column">
       <Grid item>
@@ -128,7 +131,9 @@ const PdlCompanySelect = ({ onSelectCompany }) => {
                 <Button
                   variant="contained"
                   color="secondary"
-                  onClick={() => onSelectCompany(selectedCompanyId)}
+                  onClick={() =>
+                    onSelectCompany(selectedCompanyId, selectedCompanyName)
+                  }
                 >
                   Choose this company
                 </Button>