lodash#camelCase JavaScript Examples

createModelLoader = Model =>
  new DataLoader(
    async ids => {
      const idColumns = isArray(Model.idColumn)
        ? Model.idColumn
        : [Model.idColumn];

      const camelCasedIdColumns = idColumns.map(id => camelCase(id));

      const results = await Model.query().findByIds(ids);

      return ids.map(
        id =>
          find(
            results,
            zipObject(camelCasedIdColumns, isArray(id) ? id : [id]),
          ) || null,
      );
    },
    {
      cacheKeyFn: jsonCacheKeyFn,
    },
  )

softErrorHandler = {
    register() {
        window.addEventListener('extendify::softerror-encountered', (event) => {
            this[camelCase(event.detail.type)](event.detail)
        })
    },
    versionOutdated(error) {
        render(
            <RequiredPluginsModal
                title={error.data.title}
                requiredPlugins={['extendify']}
                message={error.data.message}
                buttonLabel={error.data.buttonLabel}
                forceOpen={true}
            />,
            document.getElementById('extendify-root'),
        )
    },
}

camelizeKeys = (obj) => {
  if (Array.isArray(obj)) {
    return obj.map((v) => camelizeKeys(v))
  }

  if (obj instanceof Object) {
    return Object.keys(obj).reduce(
      (result, key) => ({
        ...result,
        [camelCase(key)]: camelizeKeys(obj[key]),
      }),
      {}
    )
  }

  return obj
}

getThemePrefix = key => {
  if (key.endsWith('-color')) return 'color';
  if (themeProps.includes(key)) return camelCase(key);

  return '';
}

async function generate() {
  clearDir(SVG_DIR)
  clearDir(path.join(DATA_DIR, 'icons'))

  ICON_PACKS.forEach((pack) => {
    let iconsDir = path.join(getPackDir(pack), 'src/icons')
    clearDir(iconsDir)
  })

  Promise.all(
    (await getSVGFiles()).map(async ({ slug, content }) => {
      let file = `${slug}.svg`
      let { el, content: svg, width, height } = await normalizeSVG(
        content,
        file
      )

      fs.writeFileSync(path.join(SVG_DIR, file), svg, 'utf8')

      let name = camelCase(slug)
      let Name = upperFirst(name)

      let iconCode = stringifyObject(
        {
          name: `icon-${slug}`,
          content: el.children.map((child) => stringify(child)).join(''),
          width: Number(width),
          height: Number(height),
        },
        {
          indent: '  ',
        }
      )

      let tplData = {
        name,
        Name,
        icon: iconCode,
      }

      let dataModuleCode = renderTpl(DATA_TPL, tplData)
      let iconModuleCode = renderTpl(ICON_TPL, tplData)

      fs.writeFileSync(path.join(DATA_DIR, `icons/${Name}.js`), dataModuleCode, 'utf8')

      ICON_PACKS.forEach((pack) => {
        let iconsDir = path.join(getPackDir(pack), 'src/icons')
        fs.writeFileSync(path.join(iconsDir, `${Name}.js`), iconModuleCode, 'utf8')
      })

      return { slug, name, Name, file }
    })
  ).then((icons) => {
    let dataIndex = icons
      .map((data) => renderTpl(DATA_EXPORT_TPL, data))
      .join('')

    fs.writeFileSync(path.join(DATA_DIR, 'index.js'), dataIndex, 'utf8')

    let iconIndex =
      icons.map((data) => renderTpl(ICON_EXPORT_TPL, data)).join('') +
      `export createIcon from './createIcon'\n`

    ICON_PACKS.concat(DATA_PACK).forEach((pack) => {
      let packDir = getPackDir(pack)
      if (pack !== DATA_PACK) {
        fs.writeFileSync(path.join(packDir, 'src/index.js'), iconIndex, 'utf8')
      }

      let readmeFile = path.join(packDir, 'README.md')
      let readmeContent = fs.readFileSync(readmeFile, 'utf8')

      let cols = 5
      let prefix = pack === DATA_PACK ? 'data' : 'Icon'
      let iconTable =
        '<table><tbody>' +
        Array.from({ length: Math.ceil(icons.length / cols) })
          .map((_, i) => {
            return Array.from({ length: cols })
              .map((_, j) => icons[i * cols + j])
              .map(
                (icon) =>
                  `<td align="center">${
                    icon
                      ? `<img src="https://raw.githubusercontent.com/ecomfe/dls-icons/master/svg/${icon.file}" height="24"/><br/><sub>${prefix}${icon.Name}</sub>`
                      : ''
                  }</td>`
              )
              .join('')
          })
          .map((row) => `<tr>${row}</tr>`)
          .join('') +
        '</tbody></table>'
      fs.writeFileSync(
        readmeFile,
        commentMark(readmeContent, {
          icons: iconTable,
        }),
        'utf8'
      )
    })

    console.log(`Normalized ${icons.length} icons.`)
  })
}

JobLogsContainer = props => {
  const {
    children,
    ...rest
  } = props;

  const { okapi } = useStripes();
  const history = useHistory();
  const calloutRef = useRef(null);

  const handleDownloadError = () => {
    if (!calloutRef.current) return;

    calloutRef.current.sendCallout({
      type: 'error',
      message: <FormattedMessage id="ui-data-export.communicationProblem" />,
    });
  };

  const downloadExportFile = async record => {
    try {
      const fileName = get(record.exportedFiles, '0.fileName');
      const downloadLink = await getFileDownloadLink(record, okapi);

      downloadFileByLink(fileName, downloadLink);
    } catch (error) {
      handleDownloadError();

      console.error(error); // eslint-disable-line no-console
    }
  };

  const getFileNameField = record => {
    const fileName = get(record.exportedFiles, '0.fileName');

    if (!record.progress?.exported) {
      return (
        <span
          title={fileName}
          className={styles.disabledFileName}
        >
          {fileName}
        </span>
      );
    }

    return (
      <Button
        title={fileName}
        data-test-download-file-btn
        buttonStyle="link"
        marginBottom0
        buttonClass={styles.fileNameBtn}
        onClick={e => {
          e.stopPropagation();
          downloadExportFile(record);
        }}
      >
        {fileName}
      </Button>
    );
  };

  const handleRowClick = (e, row) => {
    if (row.status !== JOB_EXECUTION_STATUSES.COMPLETED) {
      const path = `/data-export/log/${row.id}`;

      history.push(path);
    }
  };

  const intl = useIntl();

  const listProps = {
    ...useJobLogsProperties(customProperties),
    resultsFormatter: useJobLogsListFormatter(
      {
        status: record => intl.formatMessage({ id: `ui-data-export.jobStatus.${camelCase(record.status)}` }),
        fileName: record => getFileNameField(record),
        errors: record => {
          const failed = record.progress?.failed;

          return failed || '';
        },
      }
    ),
  };

  return (
    <>
      {children({
        listProps,
        onRowClick: handleRowClick,
        ...rest,
      })}
      <Callout ref={calloutRef} />
    </>
  );
}

function LiveSettings({
  intl,
  onClose,
}) {
  const dispatch = useDispatch();
  const courseId = useSelector(state => state.courseDetail.courseId);
  const availableProviders = useSelector((state) => state.live.appIds);
  const {
    piiSharingAllowed, selectedAppId, enabled, status, tierType,
  } = useSelector(state => state.live);

  const appConfig = useModel('liveAppConfigs', selectedAppId);
  const app = useModel('liveApps', selectedAppId);

  const liveConfiguration = {
    enabled: enabled || false,
    consumerKey: appConfig?.consumerKey || '',
    consumerSecret: appConfig?.consumerSecret || '',
    launchUrl: appConfig?.launchUrl || '',
    launchEmail: appConfig?.launchEmail || '',
    provider: selectedAppId || 'zoom',
    piiSharingEnable: piiSharingAllowed || false,
    piiSharingUsername: app?.piiSharing?.username || false,
    piiSharingEmail: app?.piiSharing?.email || false,
    tierType: tierType || '',
  };

  const validationSchema = {
    enabled: Yup.boolean(),
    consumerKey: Yup.string().when(['provider', 'tierType'], {
      is: (provider, tier) => provider === 'zoom' || (provider === 'big_blue_button' && tier === bbbPlanTypes.commercial),
      then: Yup.string().required(intl.formatMessage(messages.consumerKeyRequired)),
    }),
    consumerSecret: Yup.string().when(['provider', 'tierType'], {
      is: (provider, tier) => provider === 'zoom' || (provider === 'big_blue_button' && tier === bbbPlanTypes.commercial),
      then: Yup.string().required(intl.formatMessage(messages.consumerSecretRequired)),
    }),
    launchUrl: Yup.string().when(['provider', 'tierType'], {
      is: (provider, tier) => provider === 'zoom' || (provider === 'big_blue_button' && tier === bbbPlanTypes.commercial),
      then: Yup.string().required(intl.formatMessage(messages.launchUrlRequired)),
    }),
    launchEmail: Yup.string().when('provider', {
      is: 'zoom',
      then: Yup.string().required(intl.formatMessage(messages.launchEmailRequired)),
    }),
  };

  const handleProviderChange = (providerId, setFieldValue, values) => {
    dispatch(saveLiveConfigurationAsDraft(values));
    dispatch(selectApp({ appId: providerId }));
    setFieldValue('provider', providerId);
  };

  const handleSettingsSave = async (values) => {
    await dispatch(saveLiveConfiguration(courseId, values));
  };

  useEffect(() => {
    dispatch(fetchLiveData(courseId));
  }, [courseId]);

  return (
    <>
      <AppSettingsModal
        appId="live"
        title={intl.formatMessage(messages.heading)}
        enableAppHelp={intl.formatMessage(messages.enableLiveHelp)}
        enableAppLabel={intl.formatMessage(messages.enableLiveLabel)}
        learnMoreText={intl.formatMessage(messages.enableLiveLink)}
        onClose={onClose}
        initialValues={liveConfiguration}
        validationSchema={validationSchema}
        onSettingsSave={handleSettingsSave}
        configureBeforeEnable
        enableReinitialize
      >
        {({ values, setFieldValue }) => (
          <>
            {(status === RequestStatus.IN_PROGRESS) ? (
              <Loading />
              ) : (
                <>
                  <h4 className="my-3">{intl.formatMessage(messages.selectProvider)}</h4>
                  <SelectableBox.Set
                    type="checkbox"
                    value={values.provider}
                    onChange={(event) => handleProviderChange(event.target.value, setFieldValue, values)}
                    name="provider"
                    columns={3}
                    className="mb-3"
                  >
                    {availableProviders.map((provider) => (
                      <SelectableBox value={provider} type="checkbox" key={provider}>
                        <div className="d-flex flex-column align-items-center">
                          <Icon src={iconsSrc[`${camelCase(provider)}`]} alt={provider} />
                          <span>{intl.formatMessage(messages[`appName-${camelCase(provider)}`])}</span>
                        </div>
                      </SelectableBox>
                    ))}
                  </SelectableBox.Set>
                  {values.provider === 'zoom' ? <ZoomSettings values={values} />
                    : (
                      <BBBSettings
                        values={values}
                        setFieldValue={setFieldValue}
                      />
                    )}
                </>
              )}
          </>
          )}
      </AppSettingsModal>
    </>
  );
}