Package updates

.eslintignore

@@ -0,0 +1,6 @@
+# don't ever lint node_modules
+node_modules
+# don't lint build output (make sure it's set to your correct build folder name)
+dist
+# don't lint nyc coverage output
+coverage

.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: [
+    '@typescript-eslint',
+  ],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
+};

.gitignore

@@ -9,6 +9,8 @@
 # production
 /build
 
+.idea/
+
 # misc
 .DS_Store
 .env.local

Dockerfile

@@ -1,12 +1,12 @@
-FROM node:10.17.0-alpine as builder
+FROM node:14.15.4-alpine as builder
 ENV NODE_ENV development
 WORKDIR /app
 ADD package.json package-lock.json ./
 RUN npm ci
 ADD . .
 RUN npm run build:prod
 
-FROM node:10.17.0-alpine
+FROM node:14.15.4-alpine
 ENV NODE_ENV production
 WORKDIR /app
 COPY --from=builder /app/package.json /app/package-lock.json ./

package.json

@@ -3,36 +3,32 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.6.1",
-    "@material-ui/icons": "^4.5.1",
-    "@types/jest": "^24.0.18",
-    "@types/node": "^12.7.5",
-    "@types/react": "^16.9.2",
-    "@types/react-dom": "^16.9.0",
+    "@material-ui/core": "^4.11.3",
+    "@material-ui/icons": "^4.11.2",
     "axios": "^0.21.1",
-    "connected-react-router": "^6.5.2",
-    "eslint": "^6.4.0",
+    "connected-react-router": "^6.8.0",
+    "eslint": "^7.19.0",
     "express": "^4.17.1",
-    "form-urlencoded": "^4.1.0",
-    "formik": "^2.0.3",
-    "history": "^4.10.1",
-    "http-proxy": "^1.18.0",
-    "http-proxy-middleware": "^0.20.0",
-    "jss": "^10.0.0",
-    "jwt-decode": "^2.2.0",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "react-jss": "^10.0.0",
-    "react-redux": "^7.1.3",
-    "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
-    "react-scripts": "3.1.1",
-    "redux": "^4.0.4",
+    "form-urlencoded": "^4.2.1",
+    "formik": "^2.2.6",
+    "history": "^5.0.0",
+    "http-proxy": "^1.18.1",
+    "http-proxy-middleware": "^1.0.6",
+    "jss": "^10.5.1",
+    "jwt-decode": "^3.1.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-jss": "^10.5.1",
+    "react-redux": "^7.2.2",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "4.0.2",
+    "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0",
-    "tslint": "^5.20.0",
-    "typescript": "^3.6.3",
-    "yup": "^0.27.0"
+    "tslint": "^5.20.1",
+    "typescript": "^4.1.2",
+    "yup": "^0.32.8"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -57,17 +53,22 @@
     ]
   },
   "devDependencies": {
-    "@types/express": "^4.17.1",
+    "@types/express": "^4.17.11",
     "@types/form-urlencoded": "^2.0.1",
-    "@types/history": "^4.7.3",
-    "@types/http-proxy": "^1.17.0",
+    "@types/history": "^4.7.8",
+    "@types/http-proxy": "^1.17.5",
     "@types/http-proxy-middleware": "^0.19.3",
-    "@types/jwt-decode": "^2.2.1",
-    "@types/material-ui": "^0.21.7",
-    "@types/react-redux": "^7.1.5",
-    "@types/react-router": "^5.1.2",
-    "@types/react-router-dom": "^5.1.1",
-    "@types/yup": "^0.26.24",
-    "redux-devtools": "^3.5.0"
+    "@types/jest": "^26.0.20",
+    "@types/material-ui": "^0.21.8",
+    "@types/node": "^14.14.24",
+    "@types/react": "^17.0.1",
+    "@types/react-dom": "^17.0.0",
+    "@types/react-redux": "^7.1.16",
+    "@types/react-router": "^5.1.11",
+    "@types/react-router-dom": "^5.1.7",
+    "@types/yup": "^0.29.11",
+    "@typescript-eslint/eslint-plugin": "^4.14.2",
+    "@typescript-eslint/parser": "^4.14.2",
+    "redux-devtools": "^3.7.0"
   }
 }

server.js

@@ -1,5 +1,5 @@
 var express  = require('express');
-var proxy = require('http-proxy-middleware');
+const { createProxyMiddleware } = require('http-proxy-middleware');
 var app      = express();
 const fs = require('fs');
 const path = require('path');
@@ -12,7 +12,7 @@ var apiProxyOptions = {
     target: `http://${API_SERVER_HOST}:${API_SERVER_PORT}`,
     pathRewrite: { '^/api': '' }
 };
-var apiProxy = proxy(apiProxyOptions);
+var apiProxy = createProxyMiddleware(apiProxyOptions);
 
 app.use('/api', apiProxy);
 

src/actions/authAction.ts

@@ -29,7 +29,7 @@ export interface AuthResponse {
     message: string;
     token: string;
     expire: string;
-};
+}
 
 export interface GenericAuthResponse {
     code: number;
@@ -100,7 +100,7 @@ export const pwForgotAction = (passwordForgotData: any) => {
 
 export const checkAuthenticated = () => {
     const token = localStorage.getItem('authToken');
-    var config = {};
+    let config = {};
     if (token) {
         config = {headers: {'Authorization': 'Bearer '+token}}
     }
@@ -117,4 +117,4 @@ export function logoutAction() {
     return (dispatch: ThunkDispatch<any, any, LogoutAction>) => {
         dispatch({type: LOGOUT_USER});
     };
-};
+}

src/actions/itemAction.ts

@@ -30,7 +30,7 @@ export interface ItemResponse<T> {
     code: number,
     message: string,
     items: T[]
-};
+}
 
 export interface ItemGenericResponse {
     code: number,
@@ -45,7 +45,7 @@ export interface WantedItems {
     rank: number,
     createdAt: string,
     updatedAt: string
-};
+}
 
 export interface ReservedItems {
     id: number,
@@ -55,7 +55,7 @@ export interface ReservedItems {
     rank: number,
     createdAt: string,
     updatedAt: string
-};
+}
 
 export type ItemGetWantedStartAction = {type: string};
 export type ItemGetWantedSuccessAction = {type: string, payload: ItemResponse<WantedItems>};
@@ -95,7 +95,7 @@ export const getReservedItemsAction = () => {
     return (dispatch: ThunkDispatch<any, any, ItemGetReservedAction>) => {
         dispatch({type: ITEM_GET_RESERVED_START});
         const token = localStorage.getItem('authToken');
-        var config = {};
+        let config = {};
         if (token) {
             config = {headers: {'Authorization': 'Bearer '+token}}
         }
@@ -114,7 +114,7 @@ export const reserveItemAction = (itemid: string) => {
     return (dispatch: ThunkDispatch<any, any, ItemReserveAction>) => {
         dispatch({type: ITEM_RESERVE_START});
         const token = localStorage.getItem('authToken');
-        var config = {};
+        let config = {};
         if (token) {
             config = {headers: {'Authorization': 'Bearer '+token}}
         }
@@ -135,7 +135,7 @@ export const unReserveItemAction = (itemid: string) => {
     return (dispatch: ThunkDispatch<any, any, ItemUnReserveAction>) => {
         dispatch({type: ITEM_UNRESERVE_START});
         const token = localStorage.getItem('authToken');
-        var config = {};
+        let config = {};
         if (token) {
             config = {headers: {'Authorization': 'Bearer '+token}}
         }

src/actions/registerAction.ts

@@ -14,7 +14,7 @@ export const REGISTER_FAIL = 'register/REGISTER_FAIL';
 export interface RegisterResponse {
     code: number;
     message: string;
-};
+}
 
 export type RegisterStartAction = { type: string };
 export type RegisterSuccessAction = { type: string, payload: string };

src/components/LoginForm.tsx

@@ -8,7 +8,7 @@ import JatgamMUI from '../jatgam/mui/JatgamMUI';
 export interface LoginFormValues {
     username: string,
     password: string,
-};
+}
 
 export interface LoginFormProps {
     listCommonContentStatus: any,
@@ -81,8 +81,8 @@ class LoginForm extends PureComponent<LoginFormProps & FormikProps<LoginFormValu
                 </Grid>
             </form>
         );
-    };
-};
+    }
+}
 
 export default LoginForm;
 
@@ -93,7 +93,7 @@ export const EnhancedLoginForm = withFormik<LoginFormProps, LoginFormValues>({
     },
     mapPropsToValues: () => ({username: '', password: ''}),
     validateOnChange: false,
-    validationSchema: Yup.object().shape<LoginFormValues>({
+    validationSchema: Yup.object({
         username: Yup.string().required(),
         password: Yup.string().required()
     })

src/components/PasswordForgotForm.tsx

@@ -8,7 +8,7 @@ import JatgamMUI from '../jatgam/mui/JatgamMUI';
 
 export interface PasswordForgotFormValues {
     email: string
-};
+}
 
 export interface PasswordForgotFormProps {
     handlePasswordForgot: (passwordForgotData: PasswordForgotFormValues) => void
@@ -56,8 +56,8 @@ class PasswordForgotForm extends PureComponent<PasswordForgotFormProps & FormikP
                 </Grid>
             </form>
         );
-    };
-};
+    }
+}
 
 export default PasswordForgotForm;
 
@@ -68,7 +68,7 @@ export const EnhancedPasswordForgotForm = withFormik<PasswordForgotFormProps, Pa
     },
     mapPropsToValues: () => ({email: ''}),
     validateOnChange: false,
-    validationSchema: Yup.object().shape<PasswordForgotFormValues>({
+    validationSchema: Yup.object({
         email: Yup.string().email().required()
     })
 })(JatgamMUI(withStyles(styles, {withTheme:true})(PasswordForgotForm)));

src/components/RegisterForm.tsx

@@ -13,7 +13,7 @@ export interface RegisterFormValues {
     email: string,
     firstname: string,
     lastname: string,
-};
+}
 
 export interface RegisterFormProps {
     handleRegister: (registerData: RegisterFormValues) => void
@@ -83,8 +83,8 @@ class RegisterForm extends PureComponent<RegisterFormProps & FormikProps<Registe
                 </Grid>
             </form>
         );
-    };
-};
+    }
+}
 
 export default RegisterForm;
 
@@ -95,7 +95,7 @@ export const EnhancedRegisterForm = withFormik<RegisterFormProps, RegisterFormVa
     },
     mapPropsToValues: () => ({username: '', password: '', password_confirm: '', email: '', firstname: '', lastname: ''}),
     validateOnChange: false,
-    validationSchema: Yup.object().shape<RegisterFormValues>({
+    validationSchema: Yup.object({
         username: Yup.string().required(),
         password: Yup.string().min(10).matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^\w\s]|[_])/, {excludeEmptyString:true, message:'The password must be at least 10 character long and contain at least one of each: lowercase letter, uppercase letter, number, and special character'}).required('Password is Required'),
         password_confirm: Yup.string().oneOf([Yup.ref('password'), null], "Passwords must match").required('Password Confirm is required'),

src/components/ReservedItemsContainer.tsx

@@ -11,7 +11,7 @@ interface ReservedItemsContainerProps {
     reservedItems: ReservedItems[],
     getReservedItems: () => void,
     unReserveItem: (itemid: string) => void,
-};
+}
 
 class ReservedItemsContainer extends PureComponent<ReservedItemsContainerProps> {
     componentDidMount(): void {
@@ -25,7 +25,7 @@ class ReservedItemsContainer extends PureComponent<ReservedItemsContainerProps>
         return (
             <ReservedItemsComponent unReserveItem={unReserveItem} loggedIn={loggedIn} loading={loading} items={reservedItems}></ReservedItemsComponent>
         );
-    };
+    }
 }
 
 const mapDispatchToProps = (dispatch: ThunkDispatch<any, any, AnyAction>) => ({

src/components/ResetPasswordForm.tsx

@@ -10,7 +10,7 @@ export interface PasswordResetFormValues {
     password: string,
     password_confirm: string,
     email: string,
-};
+}
 
 export interface PasswordResetFormProps {
     handlePasswordReset: (passwordResetData: PasswordResetFormValues, pwResetToken: string) => void,
@@ -67,8 +67,8 @@ class PasswordResetForm extends PureComponent<PasswordResetFormProps & FormikPro
                 </Grid>
             </form>
         );
-    };
-};
+    }
+}
 
 export default PasswordResetForm;
 
@@ -79,7 +79,7 @@ export const EnhancedPasswordResetForm = withFormik<PasswordResetFormProps, Pass
     },
     mapPropsToValues: () => ({password: '', password_confirm: '', email: ''}),
     validateOnChange: false,
-    validationSchema: Yup.object().shape<PasswordResetFormValues>({
+    validationSchema: Yup.object({
         password: Yup.string().min(10).matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^\w\s]|[_])/, {excludeEmptyString:true, message:'The password must be at least 10 character long and contain at least one of each: lowercase letter, uppercase letter, number, and special character'}).required('Password is Required'),
         password_confirm: Yup.string().oneOf([Yup.ref('password'), null], "Passwords must match").required('Password Confirm is required'),
         email: Yup.string().email().required()

src/components/TopToolbar.tsx

@@ -84,6 +84,6 @@ function TopToolbar({barTitle, loggedIn, logout}: {barTitle: string, loggedIn: b
             </AppBar>
         </div>
     );
-};
+}
 
 export default TopToolbar;

src/components/WantedItemsContainer.tsx

@@ -11,7 +11,7 @@ interface WantedItemsContainerProps {
     wantedItems: WantedItems[],
     getWantedItems: () => void,
     reserveItem: (itemid: string) => void,
-};
+}
 
 class WantedItemsContainer extends PureComponent<WantedItemsContainerProps> {
     componentDidMount(): void {
@@ -25,7 +25,7 @@ class WantedItemsContainer extends PureComponent<WantedItemsContainerProps> {
         return (
             <WantedItemsComponent reserveItem={reserveItem} loggedIn={loggedIn} loading={loading} items={wantedItems}></WantedItemsComponent>
         );
-    };
+    }
 }
 
 const mapDispatchToProps = (dispatch: ThunkDispatch<any, any, AnyAction>) => ({