diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..ea4cddfc
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+ "javascript.preferences.quoteStyle": "double",
+ "typescript.preferences.quoteStyle": "double",
+ "prettier.jsxSingleQuote": false
+}
diff --git a/README.md b/README.md
index aa44f185..4a827f43 100644
--- a/README.md
+++ b/README.md
@@ -20,7 +20,7 @@ This is a [single-spa](https://single-spa.js.org/) example React microapp.
## Config
-For available variables config which depend on the running environment (`development` or `production`), please refer to `config/development.js` and `config/production.js`.
+For available variables config which depend on the running environment (`APPENV=dev` or `APPENV=prod`), please refer to `config/dev.js` and `config/prod.js`.
For application constants which don't depend on the running environment use `src/constants/index.js`.
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 00000000..07815e13
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,59 @@
+module.exports = function (api) {
+ const isProd = process.env.APPMODE === "production";
+ api.cache(!isProd);
+
+ const generateScopedName = isProd
+ ? "[hash:base64:6]"
+ : "teams_[path][name]___[local]___[hash:base64:6]";
+ return {
+ presets: ["@babel/preset-env", "@babel/preset-react"],
+ plugins: [
+ [
+ "@babel/plugin-transform-runtime",
+ {
+ useESModules: true,
+ regenerator: false,
+ },
+ ],
+ [
+ "react-css-modules",
+ {
+ filetypes: {
+ ".scss": {
+ syntax: "postcss-scss",
+ },
+ },
+ generateScopedName,
+ },
+ ],
+ "inline-react-svg",
+ ],
+ env: {
+ test: {
+ presets: [
+ [
+ "@babel/preset-env",
+ {
+ targets: "current node",
+ },
+ ],
+ ],
+ plugins: [
+ [
+ "module-resolver",
+ {
+ alias: {
+ styles: "./src/styles",
+ components: "./src/components",
+ hooks: "./src/hooks",
+ utils: "./src/utils",
+ constants: "./src/constants",
+ services: "./src/services",
+ },
+ },
+ ],
+ ],
+ },
+ },
+ };
+};
diff --git a/babel.config.json b/babel.config.json
deleted file mode 100644
index 00432fb5..00000000
--- a/babel.config.json
+++ /dev/null
@@ -1,51 +0,0 @@
-{
- "presets": [
- "@babel/preset-env",
- "@babel/preset-react"
- ],
- "plugins": [
- [
- "@babel/plugin-transform-runtime",
- {
- "useESModules": true,
- "regenerator": false
- }
- ],
- [
- "react-css-modules",
- {
- "filetypes": {
- ".scss": {
- "syntax": "postcss-scss"
- }
- },
- "generateScopedName": "teams_[path][name]___[local]___[hash:base64:6]"
- }
- ],
- "inline-react-svg"
- ],
- "env": {
- "test": {
- "presets": [
- [
- "@babel/preset-env",
- {
- "targets": "current node"
- }
- ]
- ],
- "plugins": [
- ["module-resolver", {
- "alias": {
- "styles": "./src/styles",
- "components": "./src/components",
- "hooks": "./src/hooks",
- "utils": "./src/utils",
- "constants": "./src/constants",
- "services": "./src/services"
- }
- }]
- ]
- }
- }
-}
diff --git a/config/development.js b/config/dev.js
similarity index 100%
rename from config/development.js
rename to config/dev.js
diff --git a/config/index.js b/config/index.js
index d89d9220..0de81581 100644
--- a/config/index.js
+++ b/config/index.js
@@ -1,11 +1,11 @@
/* global process */
module.exports = (() => {
- const env = process.env.NODE_ENV || "development";
+ const env = process.env.APPENV || "dev";
// for security reason don't let to require any arbitrary file defined in process.env
- if (["production", "development"].indexOf(env) < 0) {
- return require("./development");
+ if (["prod", "dev"].indexOf(env) < 0) {
+ return require("./dev");
}
return require("./" + env);
diff --git a/config/production.js b/config/prod.js
similarity index 100%
rename from config/production.js
rename to config/prod.js
diff --git a/src/components/Pagination/styles.module.scss b/src/components/Pagination/styles.module.scss
index 9f0ce714..5c918ff5 100644
--- a/src/components/Pagination/styles.module.scss
+++ b/src/components/Pagination/styles.module.scss
@@ -2,11 +2,14 @@
.pagination {
display: flex;
+ flex-wrap: wrap;
+ margin-bottom: -10px;
.page {
padding: 0 10px;
- margin: 0 5px;
+ margin: 0 5px 10px;
min-width: 30px;
+
}
.current {
@@ -17,6 +20,7 @@
.next {
margin-left: 5px;
+ margin-bottom: 10px;
> svg {
transform: rotate(-90deg);
@@ -29,6 +33,7 @@
.prev {
margin-right: 5px;
+ margin-bottom: 10px;
> svg {
margin-right: 3px;
diff --git a/src/components/SkillsList/index.jsx b/src/components/SkillsList/index.jsx
index edc64219..c4cc1ae4 100644
--- a/src/components/SkillsList/index.jsx
+++ b/src/components/SkillsList/index.jsx
@@ -101,6 +101,7 @@ const SkillsList = ({ requiredSkills, skills, limit = 3 }) => {
<div styleName="skills-section">
<div styleName="skills-title">Required Job Skills</div>
<ul styleName="skills-list">
+ {!requiredSkills.length && <li>None</li>}
{requiredSkills.map((skill) => (
<li key={skill.id}>
{_.find(skills, { id: skill.id }) ? (
diff --git a/src/components/SkillsList/styles.module.scss b/src/components/SkillsList/styles.module.scss
index 637d0967..2b15c443 100644
--- a/src/components/SkillsList/styles.module.scss
+++ b/src/components/SkillsList/styles.module.scss
@@ -22,10 +22,12 @@
.popover-content {
display: flex;
- padding: 24px;
+ flex-wrap: wrap;
+ padding: 4px 24px 24px;
}
.skills-section {
+ margin-top: 20px;
padding-right: 32px;
}
diff --git a/src/utils/format.js b/src/utils/format.js
index 54de66f9..47435e12 100644
--- a/src/utils/format.js
+++ b/src/utils/format.js
@@ -161,5 +161,9 @@ export const formatDateRange = (startDate, endDate) => {
const startDateStr = startDate ? moment(startDate).format(DAY_FORMAT) : "";
const endDateStr = endDate ? moment(endDate).format(DAY_FORMAT) : "";
+ if (!startDateStr && !endDateStr) {
+ return "TBD";
+ }
+
return `${startDateStr} - ${endDateStr}`;
};
diff --git a/webpack.config.js b/webpack.config.js
index 53bce9e0..64dbbbfe 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,10 +1,14 @@
/* global __dirname */
+const webpack = require("webpack");
const webpackMerge = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa-react");
const path = require("path");
const autoprefixer = require("autoprefixer");
-const cssLocalIdent = "teams_[path][name]___[local]___[hash:base64:6]";
+
+const cssLocalIdent = process.env.APPMODE === "production"
+ ? "[hash:base64:6]"
+ : "teams_[path][name]___[local]___[hash:base64:6]";
module.exports = (webpackConfigEnv) => {
const defaultConfig = singleSpaDefaults({
@@ -65,5 +69,10 @@ module.exports = (webpackConfigEnv) => {
services: path.resolve(__dirname, "src/services"),
},
},
+ plugins: [
+ // ignore moment locales to reduce bundle size by 64kb gzipped
+ // see solution details https://stackoverflow.com/questions/25384360/how-to-prevent-moment-js-from-loading-locales-with-webpack/25426019#25426019
+ new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+ ],
});
};