[DUOS-1815][risk=no] New Researcher Profile Page

src/components/SearchSelectOrText.js

@@ -0,0 +1,114 @@
+import { useState, useEffect, useRef } from 'react';
+import {div, input, span, a, ul, li } from 'react-hyperscript-helpers';
+import './SearchSelect.css';
+
+// Similar to SearchSelect, but allows the user to input free text
+export const SearchSelectOrText = (props) => {
+  const { onPresetSelection, onManualSelection, placeholder, options, searchPlaceholder, id, label } = props;
+  const [currentDisplay, setCurrentDisplay] = useState(placeholder || '');
+
+  const [currentSelection, setCurrentSelection] = useState(props.value);
+  const [fullList, setFullList] = useState(props.options);
+  const [filteredList, setFilteredList] = useState(props.options);
+
+  const searchTerms = useRef('');
+
+  useEffect(() => {
+    if (props.value) {
+      setCurrentSelection(props.value);
+      const item = props.options.filter(i => i.key === props.value);
+      if (item && item.length) {
+        setCurrentDisplay(item[0].displayText);
+      }
+    } else {
+      setCurrentDisplay(props.freetextValue);
+    }
+
+    setFullList(props.options);
+    setFilteredList(props.options);
+  }, [props.value, props.freetextValue, props.options]);
+
+  const setPresetDisplay = (selection) => {
+    const item = options.filter(i => i.key === selection);
+    if (item && item.length) {
+      setCurrentDisplay(item[0].displayText);
+    }
+  };
+
+  const setManualDisplay = (text) => {
+    setCurrentDisplay(text);
+  };
+
+  const select = (selection) => {
+    return () => {
+      setPresetDisplay(selection);
+      onPresetSelection(selection);
+    };
+  };
+
+
+  const selectManual = (text) => {
+    // check and see if the manually entered item is an option
+    const presetOption = options.filter(i => i.key === text);
+    if (presetOption.length != 0) {
+      select(presetOption[0]);
+      return;
+    }
+
+    setManualDisplay(text);
+    onManualSelection(text);
+  };
+
+  const handleSearch = (searchTerm) => {
+    const filteredList = fullList.filter(kv => kv.displayText.toLowerCase().indexOf(searchTerm.current.value.toLowerCase()) > -1);
+    setFilteredList(filteredList);
+  };
+
+
+  return (
+    div({ className: 'dropdown select-dropdown', id, name: label }, [
+      a({
+        className: 'btn select-btn btn-secondary dropdown-toggle',
+        role: 'button',
+        id: 'dropdownMenuLink',
+        'data-toggle': 'dropdown',
+        'aria-haspopup': true,
+        'aria-expanded': false
+      }, [
+        div({
+          style: { width: '100%' }
+        }, [
+          currentDisplay,
+          span({ className: 'caret select-caret caret-margin', style: { right: '2%' } })
+        ])
+      ]),
+      div({
+        className: 'dropdown-menu select-dropdown-menu'
+      }, [
+        input({
+          type: 'text',
+          placeholder: searchPlaceholder ? searchPlaceholder : 'Search...',
+          className: 'search-bar',
+          onChange:() => handleSearch(searchTerms),
+          onKeyDown: (e) => {
+            if (e.key == 'Enter') {
+              selectManual(searchTerms.current.value);
+            }
+          },
+          ref: searchTerms
+        }),
+        div({
+          className: 'dropdown-divider'
+        }),
+        ul({}, filteredList.map(item => {
+          return li({
+            className: item.key === currentSelection
+              ? 'dropdown-item select-dropdown-item active'
+              : 'dropdown-item select-dropdown-item',
+            onClick: select(item.key),
+          }, [item.displayText]);
+        }))
+      ])
+    ])
+  );
+};

src/components/eRACommons.js

@@ -114,7 +114,7 @@ export const eRACommons = hh(class eRACommons extends React.Component {
       cursor: 'pointer',
       color: '#999',
       fontWeight: 500,
-      fontSize: '.9em',
+      fontSize: '.8em',
       transition: 'all .2s ease'
     };
     const validationErrorState = get(this.props, 'validationError', false) ? {
@@ -126,7 +126,7 @@ export const eRACommons = hh(class eRACommons extends React.Component {
 
     return (
       div({ className: this.props.className }, [
-        label({ className: 'control-label' }, ['NIH eRA Commons ID*']),
+        label({ className: 'control-label', isRendered: this.props.header }, ['NIH eRA Commons ID*']),
         div({
           isRendered: (!this.state.isAuthorized || this.state.expirationCount < 0)
         }, [

src/libs/ajax.js

@@ -860,8 +860,21 @@ export const User = {
     }
   },
 
+  updateSelf: async (payload) => {
+    const url = `${await Config.getApiUrl()}/api/user`;
+    // We should not be updating the user's create date, associated institution, or library cards
+    try {
+      const res = await fetchOk(url, fp.mergeAll([Config.authOpts(), Config.jsonBody(payload), { method: 'PUT' }]));
+      if (res.ok) {
+        return res.json();
+      }
+    } catch (err) {
+      return false;
+    }
+  },
+
   update: async (user, userId) => {
-    const url = `${await Config.getApiUrl()}/api/dacuser/${userId}`;
+    const url = `${await Config.getApiUrl()}/api/user/${userId}`;
     // We should not be updating the user's create date, associated institution, or library cards
     let filteredUser = flow(
       cloneDeep,

src/libs/utils.js

@@ -31,7 +31,11 @@ export const UserProperties = {
   RESEARCHER_GATE: 'researcherGate',
   SCIENTIFIC_URL: 'scientificURL',
   STATE: 'state',
-  ZIPCODE: 'zipcode'
+  ZIPCODE: 'zipcode',
+  SUGGESTED_SIGNING_OFFICIAL: 'suggestedSigningOfficial',
+  SELECTED_SIGNING_OFFICIAL_ID: 'selectedSigningOfficialId',
+  INSTITUTION_ID: 'institutionId',
+  SUGGESTED_INSTITUTION: 'suggestedInstitution'
 };
 
 ///////DAR Collection Utils///////////////////////////////////////////////////////////////////////////////////
@@ -139,7 +143,11 @@ export const getPropertyValuesFromUser = (user) => {
     researcherGate: findPropertyValue(UserProperties.RESEARCHER_GATE, user),
     scientificURL: findPropertyValue(UserProperties.SCIENTIFIC_URL, user),
     state: findPropertyValue(UserProperties.STATE, user),
-    zipcode: findPropertyValue(UserProperties.ZIPCODE, user)
+    zipcode: findPropertyValue(UserProperties.ZIPCODE, user),
+    institutionId: findPropertyValue(UserProperties.INSTITUTION_ID, user),
+    suggestedInstitution: findPropertyValue(UserProperties.SUGGESTED_INSTITUTION, user),
+    selectedSigningOfficialId: findPropertyValue(UserProperties.SELECTED_SIGNING_OFFICIAL_ID, user),
+    suggestedSigningOfficial: findPropertyValue(UserProperties.SUGGESTED_SIGNING_OFFICIAL, user)
   };
 
   researcherProps.institutionId = user.institutionId;