Work periods, part 2

config/dev.js

@@ -1,6 +1,8 @@
 module.exports = {
   API: {
+    V3: "https://api.topcoder-dev.com/v3",
     V5: "https://api.topcoder-dev.com/v5",
   },
   PLATFORM_WEBSITE_URL: "https://platform.topcoder-dev.com",
+  TOPCODER_WEBSITE_URL: "https://www.topcoder-dev.com",
 };

config/index.js

@@ -2,9 +2,5 @@
 
 module.exports = (() => {
   const appEnv = process.env.APPENV === "prod" ? "prod" : "dev";
-
-  // eslint-disable-next-line no-console
-  console.log(`APPENV: "${appEnv}"`);
-
   return require(`./${appEnv}`);
 })();

config/prod.js

@@ -1,6 +1,8 @@
 module.exports = {
   API: {
+    V3: "https://api.topcoder.com/v3",
     V5: "https://api.topcoder.com/v5",
   },
   PLATFORM_WEBSITE_URL: "https://platform.topcoder.com",
+  TOPCODER_WEBSITE_URL: "https://www.topcoder.com",
 };

src/components/Button/index.jsx

@@ -10,6 +10,7 @@ import styles from "./styles.module.scss";
  * @param {Object} props.children button text
  * @param {string} [props.className] class name added to root element
  * @param {'primary'|'primary-dark'|'primary-light'} [props.color] button color
+ * @param {boolean} [props.isDisabled] if button is disabled
  * @param {boolean} [props.isSelected] if button is selected
  * @param {string} [props.name] button name
  * @param {(e: any) => void} props.onClick function called when button is clicked
@@ -24,6 +25,7 @@ const Button = ({
   children,
   className,
   color = "primary",
+  isDisabled = false,
   isSelected = false,
   name,
   onClick,
@@ -35,6 +37,7 @@ const Button = ({
 }) => (
   <button
     data-value={value}
+    disabled={isDisabled}
     name={name || ""}
     type={type}
     className={cn(
@@ -58,6 +61,7 @@ Button.propTypes = {
   children: PT.node,
   className: PT.string,
   color: PT.oneOf(["primary"]),
+  isDisabled: PT.bool,
   isSelected: PT.bool,
   name: PT.string,
   onClick: PT.func,

src/components/Button/styles.module.scss

@@ -10,6 +10,11 @@
   text-transform: uppercase;
   outline: none;
   cursor: pointer;
+
+  &:disabled {
+    opacity: 1;
+    cursor: not-allowed;
+  }
 }
 
 .medium {
@@ -55,6 +60,12 @@
     border-color: $primary-dark-color;
     color: $primary-dark-text-color;
   }
+
+  &:disabled {
+    border-color: $control-disabled-border-color;
+    background-color: $control-disabled-bg-color;
+    color: $control-disabled-text-color;
+  }
 }
 
 .contained {
@@ -76,6 +87,12 @@
     border-color: $primary-dark-color;
     background-color: $primary-dark-color;
   }
+
+  &:disabled {
+    border-color: $control-disabled-border-color;
+    background-color: $control-disabled-bg-color;
+    color: $control-disabled-text-color;
+  }
 }
 
 .circle,

src/components/Checkbox/index.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import PT from "prop-types";
 import cn from "classnames";
+import { stopPropagation } from "utils/misc";
 import styles from "./styles.module.scss";
 
 /**
@@ -9,30 +10,37 @@ import styles from "./styles.module.scss";
  * @param {Object} props component properties
  * @param {boolean} props.checked whether checkbox is checked
  * @param {string} [props.className] class name added to root element
+ * @param {boolean} [props.isDisabled] if checkbox is disabled
  * @param {string} props.name name for input element
  * @param {() => void} props.onChange function called when checkbox changes state
  * @param {Object} [props.option] object { value, label }
  * @param {'medium'|'small'} [props.size] checkbox size
+ * @param {boolean} [props.stopClickPropagation] whether to stop click event propagation
  * @returns {JSX.Element}
  */
 const Checkbox = ({
   checked,
   className,
+  isDisabled = false,
   name,
   onChange,
   option,
   size = "medium",
+  stopClickPropagation = false,
 }) => (
+  // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
   <label
     className={cn(
       styles.container,
       styles[size],
       { [styles.single]: !option || !option.label },
       className
     )}
+    onClick={stopClickPropagation ? stopPropagation : null}
   >
     <input
       type="checkbox"
+      disabled={isDisabled}
       className={styles.checkbox}
       name={name}
       onChange={onChange}
@@ -49,13 +57,15 @@ const Checkbox = ({
 Checkbox.propTypes = {
   checked: PT.bool,
   className: PT.string,
+  isDisabled: PT.bool,
   name: PT.string.isRequired,
   size: PT.oneOf(["medium", "small"]),
   onChange: PT.func.isRequired,
   option: PT.shape({
     value: PT.string.isRequired,
     label: PT.string,
   }),
+  stopClickPropagation: PT.bool,
 };
 
 export default Checkbox;

src/components/Checkbox/styles.module.scss

@@ -36,6 +36,13 @@ input.checkbox {
       }
     }
   }
+
+  &:disabled {
+    + .impostor {
+      background-color: $control-disabled-bg-color;
+      cursor: not-allowed;
+    }
+  }
 }
 
 .impostor {

src/components/IntegerField/index.jsx

@@ -8,6 +8,7 @@ import styles from "./styles.module.scss";
  *
  * @param {Object} props component properties
  * @param {string} [props.className] class name to be added to root element
+ * @param {boolean} [props.isDisabled] if the field is disabled
  * @param {string} props.name field's name
  * @param {number} props.value field's value
  * @param {number} [props.maxValue] maximum allowed value
@@ -17,27 +18,45 @@ import styles from "./styles.module.scss";
  */
 const IntegerField = ({
   className,
+  isDisabled = false,
   name,
   onChange,
   value,
   maxValue = Infinity,
   minValue = -Infinity,
 }) => (
   <div className={cn(styles.container, className)}>
+    <input
+      disabled={isDisabled}
+      readOnly
+      className={styles.input}
+      name={name}
+      value={value}
+    />
     <button
       className={styles.btnMinus}
-      onClick={() => onChange(Math.max(value - 1, minValue))}
+      onClick={(event) => {
+        event.stopPropagation();
+        if (!isDisabled) {
+          onChange(Math.max(value - 1, minValue));
+        }
+      }}
     />
     <button
       className={styles.btnPlus}
-      onClick={() => onChange(Math.min(+value + 1, maxValue))}
+      onClick={(event) => {
+        event.stopPropagation();
+        if (!isDisabled) {
+          onChange(Math.min(+value + 1, maxValue));
+        }
+      }}
     />
-    <input readOnly className={styles.input} name={name} value={value} />
   </div>
 );
 
 IntegerField.propTypes = {
   className: PT.string,
+  isDisabled: PT.bool,
   name: PT.string.isRequired,
   maxValue: PT.number,
   minValue: PT.number,

src/components/IntegerField/styles.module.scss

@@ -19,6 +19,18 @@ input.input {
   outline: none !important;
   box-shadow: none !important;
   text-align: center;
+
+  &:disabled {
+    border-color: $control-disabled-border-color;
+    background-color: $control-disabled-bg-color;
+    color: $control-disabled-text-color;
+    cursor: not-allowed;
+
+    ~ .btnMinus,
+    ~ .btnPlus {
+      cursor: not-allowed;
+    }
+  }
 }
 
 .btnMinus,

src/components/Page/index.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import PT from "prop-types";
 import cn from "classnames";
+import ReduxToastr from "react-redux-toastr";
 import styles from "./styles.module.scss";
 
 /**
@@ -12,7 +13,15 @@ import styles from "./styles.module.scss";
  * @returns {Object}
  */
 const Page = ({ className, children }) => (
-  <div className={cn(styles.container, className)}>{children}</div>
+  <div className={cn(styles.container, className)}>
+    {children}
+    <ReduxToastr
+      timeOut={60000}
+      position="top-right"
+      transitionIn="fadeIn"
+      transitionOut="fadeOut"
+    />
+  </div>
 );
 
 Page.propTypes = {

src/components/SearchHandleField/index.jsx

@@ -0,0 +1,102 @@
+import React, { useCallback, useState } from "react";
+import PT from "prop-types";
+import cn from "classnames";
+import _ from "lodash";
+import AsyncSelect from "react-select/async";
+import { getMemberSuggestions } from "services/teams";
+// import { getOptionByValue } from "utils/misc";
+import styles from "./styles.module.scss";
+
+const selectComponents = {
+  DropdownIndicator: () => null,
+  IndicatorSeparator: () => null,
+};
+
+/**
+ * Displays search input field.
+ *
+ * @param {Object} props component properties
+ * @param {string} [props.className] class name added to root element
+ * @param {string} props.id id for input element
+ * @param {string} props.placeholder placeholder text
+ * @param {string} props.name name for input element
+ * @param {'medium'|'small'} [props.size] field size
+ * @param {function} props.onChange function called when input value changes
+ * @param {string} props.value input value
+ * @returns {JSX.Element}
+ */
+const SearchAutocomplete = ({
+  className,
+  id,
+  size = "medium",
+  onChange,
+  placeholder,
+  value,
+}) => {
+  // const option = getOptionByValue(options, value);
+  const [savedInput, setSavedInput] = useState("");
+
+  const onValueChange = useCallback(
+    (option) => {
+      onChange(option.value);
+    },
+    [onChange]
+  );
+
+  return (
+    <div className={cn(styles.container, styles[size], className)}>
+      <span className={styles.icon} />
+      <AsyncSelect
+        className={styles.select}
+        classNamePrefix="custom"
+        components={selectComponents}
+        id={id}
+        isSearchable={true}
+        // menuIsOpen={true} // for debugging
+        // onChange={onOptionChange}
+        // onMenuOpen={onMenuOpen}
+        // onMenuClose={onMenuClose}
+        value={{ value, label: value }}
+        onInputChange={setSavedInput}
+        onFocus={() => {
+          setSavedInput("");
+          onChange(savedInput);
+        }}
+        placeholder={placeholder}
+        onChange={onValueChange}
+        noOptionsMessage={() => "No options"}
+        loadingMessage={() => "Loading..."}
+        loadOptions={loadSuggestions}
+        blurInputOnSelect
+      />
+    </div>
+  );
+};
+
+const loadSuggestions = (inputVal) => {
+  return getMemberSuggestions(inputVal)
+    .then((res) => {
+      const users = _.get(res, "data.result.content", []);
+      return users.map((user) => ({
+        label: user.handle,
+        value: user.handle,
+      }));
+    })
+    .catch(() => {
+      console.warn("could not get suggestions");
+      return [];
+    });
+};
+
+SearchAutocomplete.propTypes = {
+  className: PT.string,
+  id: PT.string.isRequired,
+  size: PT.oneOf(["medium", "small"]),
+  name: PT.string.isRequired,
+  onChange: PT.func.isRequired,
+  options: PT.array,
+  placeholder: PT.string,
+  value: PT.oneOfType([PT.number, PT.string]),
+};
+
+export default SearchAutocomplete;