update parcel

frontend/.parcelrc

@@ -0,0 +1,6 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
+  }
+}

frontend/package.json

@@ -1,7 +1,7 @@
 {
     "name": "photos-frontend",
     "scripts": {
-        "start": "parcel serve src/index.html",
+        "start": "parcel src/index.html",
         "build": "parcel build src/index.html",
         "lint": "eslint ./src/** --ext .js,.jsx,.ts,.tsx",
         "lint-fix": "eslint ./src/** --ext .js,.jsx,.ts,.tsx --fix",
@@ -17,7 +17,6 @@
         "@typescript-eslint/eslint-plugin": "^5.12.0",
         "@typescript-eslint/parser": "^5.12.0",
         "@wojtekmaj/enzyme-adapter-react-17": "^0",
-        "autoprefixer": "^9",
         "enzyme": "^3.11.0",
         "eslint": "^8.9.0",
         "eslint-config-prettier": "^8.3.0",
@@ -31,11 +30,11 @@
         "eslint-plugin-react-hooks": "^4.3.0",
         "flush-promises": "^1.0.2",
         "jest": "^27.5.1",
-        "parcel": "1.12.3",
+        "parcel": "2.3.1",
         "pluralize": "^8.0.0",
-        "postcss": "^8.4.6",
         "prettier": "^2.5.1",
         "prettier-eslint": "^13.0.0",
+        "process": "^0.11.10",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-redux": "^7.2.6",
@@ -46,7 +45,6 @@
         "redux-devtools-extension": "^2.13.9",
         "redux-persist": "^6.0.0",
         "redux-saga": "^1.1.3",
-        "sass": "^1.49.7",
         "spark-md5": "^3.0.2",
         "ts-jest": "^27.1.3",
         "typescript": "^4.5.5"
@@ -68,6 +66,8 @@
         "@types/react-router": "^5.1.18",
         "@types/react-router-dom": "^5.3.3",
         "@types/sass": "^1.43.1",
-        "@types/spark-md5": "^3.0.2"
+        "@types/spark-md5": "^3.0.2",
+        "autoprefixer": "^10.4.2",
+        "postcss": "^8.4.6"
     }
 }

frontend/src/Account/Account.tsx

@@ -2,8 +2,8 @@ import { Button, Card, FormGroup, H2, InputGroup } from "@blueprintjs/core";
 import * as React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
-import { IAppState } from "~redux/reducers";
-import { userPassChange } from "~redux/user/actions";
+import { IAppState } from "../redux/reducers";
+import { userPassChange } from "../redux/user/actions";
 
 export interface IAccountComponentProps {
     username: string | undefined;

frontend/src/App.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Route, RouteComponentProps, Switch, withRouter } from "react-router";
-import { AuthScreen } from "~Auth/AuthScreen";
-import { requireAuth } from "~Auth/AuthWrapper";
-import { Home } from "~Home/Home";
+import { AuthScreen } from "./Auth/AuthScreen";
+import { requireAuth } from "./Auth/AuthWrapper";
+import { Home } from "./Home/Home";
 
 // Somehow, if we do it like this then App doesn't rerender every time
 // the route changes, and animations work

frontend/src/AppToaster.tsx

@@ -1,6 +1,6 @@
 import { Position, Toaster } from "@blueprintjs/core";
 import { isNumber } from "class-validator";
-import { IPhotoReqJSON } from "~../../src/entity/Photo";
+import { IPhotoReqJSON } from "../../src/entity/Photo";
 
 export const AppToaster = Toaster.create({
     className: "recipe-toaster",

frontend/src/Auth/AuthScreen.tsx

@@ -8,7 +8,7 @@ import {
     withRouter,
 } from "react-router";
 import { animated, Transition } from "react-spring/renderprops";
-import { IAppState } from "~redux/reducers";
+import { IAppState } from "../redux/reducers";
 
 import { Login } from "./Login";
 import { Signup } from "./Signup";

frontend/src/Auth/AuthWrapper.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { connect } from "react-redux";
 import { Redirect } from "react-router";
-import { webRoot } from "~env";
-import { IAppState } from "~redux/reducers";
+import { webRoot } from "../env";
+import { IAppState } from "../redux/reducers";
 
 interface IAuthWrapperComponentProps {
     loggedIn: boolean;

frontend/src/Auth/Login.tsx

@@ -5,8 +5,8 @@ import * as React from "react";
 import { connect } from "react-redux";
 import { RouteComponentProps, withRouter } from "react-router-dom";
 import { Dispatch } from "redux";
-import { authStart } from "~redux/auth/actions";
-import { IAppState } from "~redux/reducers";
+import { authStart } from "../redux/auth/actions";
+import { IAppState } from "../redux/reducers";
 
 interface ILoginComponentProps extends RouteComponentProps {
     inProgress: boolean;

frontend/src/Auth/Signup.tsx

@@ -5,8 +5,8 @@ import * as React from "react";
 import { connect } from "react-redux";
 import { RouteComponentProps, withRouter } from "react-router";
 import { Dispatch } from "redux";
-import { signupStart } from "~redux/auth/actions";
-import { IAppState } from "~redux/reducers";
+import { signupStart } from "../redux/auth/actions";
+import { IAppState } from "../redux/reducers";
 
 interface ISignupComponentProps extends RouteComponentProps {
     inProgress: boolean;

frontend/src/Home/Home.tsx

@@ -17,14 +17,14 @@ import { connect } from "react-redux";
 import { Route, RouteComponentProps, Switch, withRouter } from "react-router";
 import { animated, config, Transition } from "react-spring/renderprops";
 import { Dispatch } from "redux";
-import { IUserJSON } from "~../../src/entity/User";
-import { Account } from "~Account/Account";
-import { Overview } from "~Photos/Overview";
-import { toggleDarkMode } from "~redux/localSettings/actions";
-import { IAppState } from "~redux/reducers";
-import { logoutUser } from "~redux/user/actions";
-import { Photo } from "~Photos/Photo";
-import { PhotoRoute } from "~Photos/PhotoRoute";
+import { IUserJSON } from "../../../src/entity/User";
+import { Account } from "../Account/Account";
+import { Overview } from "../Photos/Overview";
+import { toggleDarkMode } from "../redux/localSettings/actions";
+import { IAppState } from "../redux/reducers";
+import { logoutUser } from "../redux/user/actions";
+import { Photo } from "../Photos/Photo";
+import { PhotoRoute } from "../Photos/PhotoRoute";
 import { UploadStatus } from "./UploadStatus";
 
 export interface IHomeProps extends RouteComponentProps {

frontend/src/Home/UploadStatus.tsx

@@ -1,7 +1,7 @@
 import { Button, Icon, Popover, Spinner } from "@blueprintjs/core";
 import * as React from "react";
 import { connect } from "react-redux";
-import { IAppState } from "~redux/reducers";
+import { IAppState } from "../redux/reducers";
 import pluralize from "pluralize";
 
 export interface IUploadStatusComponentProps {

frontend/src/Photos/Overview.tsx

@@ -2,10 +2,10 @@ import "./Overview.scss";
 import * as React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
-import { IAppState } from "~redux/reducers";
-import { photosLoadStart } from "~redux/photos/actions";
-import { IPhotoReqJSON } from "~../../src/entity/Photo";
-import { LoadingStub } from "~LoadingStub";
+import { IAppState } from "../redux/reducers";
+import { photosLoadStart } from "../redux/photos/actions";
+import { IPhotoReqJSON } from "../../../src/entity/Photo";
+import { LoadingStub } from "../LoadingStub";
 import { PhotoCard } from "./PhotoCard";
 import {
     Button,
@@ -18,7 +18,7 @@ import {
 } from "@blueprintjs/core";
 import { UploadButton } from "./UploadButton";
 import { Photo } from "./Photo";
-import { getPhotoThumbPath } from "~redux/api/photos";
+import { getPhotoThumbPath } from "../redux/api/photos";
 
 export interface IOverviewComponentProps {
     photos: IPhotoReqJSON[];

frontend/src/Photos/Photo.tsx

@@ -2,16 +2,16 @@ import "./Photo.scss";
 import * as React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
-import { IPhotoReqJSON } from "~../../src/entity/Photo";
-import { LoadingStub } from "~LoadingStub";
+import { IPhotoReqJSON } from "../../../src/entity/Photo";
+import { LoadingStub } from "../LoadingStub";
 import {
     fetchPhoto,
     getPhotoImgPath,
     getPhotoThumbPath,
-} from "~redux/api/photos";
-import { photoLoadStart } from "~redux/photos/actions";
-import { IPhotoState } from "~redux/photos/reducer";
-import { IAppState } from "~redux/reducers";
+} from "../redux/api/photos";
+import { photoLoadStart } from "../redux/photos/actions";
+import { IPhotoState } from "../redux/photos/reducer";
+import { IAppState } from "../redux/reducers";
 import { LargeSize, PreviewSize } from "./helper";
 
 export interface IPhotoComponentProps {

frontend/src/Photos/PhotoCard.tsx

@@ -8,13 +8,13 @@ import {
     Spinner,
 } from "@blueprintjs/core";
 import * as React from "react";
-import { IPhotoReqJSON } from "~../../src/entity/Photo";
-import { getPhotoImgPath, getPhotoThumbPath } from "~redux/api/photos";
-import { showDeletionToast } from "~AppToaster";
+import { IPhotoReqJSON } from "../../../src/entity/Photo";
+import { getPhotoImgPath, getPhotoThumbPath } from "../redux/api/photos";
+import { showDeletionToast } from "../AppToaster";
 import { Dispatch } from "redux";
-import { photoDeleteCancel, photoDeleteStart } from "~redux/photos/actions";
+import { photoDeleteCancel, photoDeleteStart } from "../redux/photos/actions";
 import { connect } from "react-redux";
-import { LoadingStub } from "~LoadingStub";
+import { LoadingStub } from "../LoadingStub";
 import { RouteComponentProps, withRouter } from "react-router";
 import { LargeSize, PreviewSize } from "./helper";
 

frontend/src/Photos/UploadButton.tsx

@@ -2,7 +2,7 @@ import { Button } from "@blueprintjs/core";
 import * as React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
-import { photosUploadStart } from "~redux/photos/actions";
+import { photosUploadStart } from "../redux/photos/actions";
 
 export interface IUploadButtonComponentProps {
     startUpload: (files: FileList) => void;

frontend/src/index.html

@@ -15,7 +15,7 @@
 
 <body>
     <div id="body"></div>
-    <script src="./index.tsx"></script>
+    <script src="./index.tsx" type="module"></script>
 </body>
 
 </html>

frontend/src/index.tsx

@@ -1,15 +1,15 @@
 import "@blueprintjs/core/lib/css/blueprint.css";
 import "@blueprintjs/icons/lib/css/blueprint-icons.css";
 import "normalize.css/normalize.css";
-import "~App.scss";
+import "./App.scss";
 
 import * as React from "react";
 import { render } from "react-dom";
 import { Provider } from "react-redux";
 import { BrowserRouter } from "react-router-dom";
 import { PersistGate } from "redux-persist/integration/react";
-import { App } from "~App";
-import { persistor, store } from "~redux/store";
+import { App } from "./App";
+import { persistor, store } from "./redux/store";
 
 render(
     <Provider store={store}>

frontend/src/redux/api/auth/index.ts

@@ -1,7 +1,7 @@
 import {
     IUserLoginRespBody,
     IUserSignupRespBody,
-} from "~../../src/routes/users";
+} from "../../../../../src/routes/users";
 import { fetchJSON } from "../utils";
 
 export async function login(

frontend/src/redux/api/photos.ts

@@ -1,12 +1,12 @@
-import { IPhotoReqJSON } from "~../../src/entity/Photo";
+import { IPhotoReqJSON } from "../../../../src/entity/Photo";
 import {
     IPhotosByIDDeleteRespBody,
     IPhotosByIDGetRespBody,
     IPhotosListRespBody,
     IPhotosNewRespBody,
     IPhotosUploadRespBody,
-} from "~../../src/routes/photos";
-import { apiRoot } from "~env";
+} from "../../../../src/routes/photos";
+import { apiRoot } from "../../env";
 import { fetchJSONAuth } from "./utils";
 
 export function getPhotoImgPath(photo: IPhotoReqJSON): string {

frontend/src/redux/api/user/index.ts

@@ -1,5 +1,5 @@
 import { fetchJSONAuth } from "../utils";
-import { IUserEditRespBody, IUserGetRespBody } from "~../../src/routes/users";
+import { IUserEditRespBody, IUserGetRespBody } from "../../../../../src/routes/users";
 
 export async function fetchUser(): Promise<IUserGetRespBody> {
     return (fetchJSONAuth("/users/user", "GET") as unknown) as Promise<

frontend/src/redux/api/utils.ts

@@ -1,4 +1,4 @@
-import { apiRoot } from "~env";
+import { apiRoot } from "../../env";
 
 let token: string | null;
 

frontend/src/redux/auth/actions.ts

@@ -1,5 +1,5 @@
 import { Action } from "redux";
-import { IUserAuthJSON } from "~../../src/entity/User";
+import { IUserAuthJSON } from "../../../../src/entity/User";
 
 export enum AuthTypes {
     AUTH_START = "AUTH_START",

frontend/src/redux/auth/reducer.ts

@@ -1,7 +1,7 @@
 import { Reducer } from "react";
 
-import { setToken } from "~redux/api/utils";
-import { UserAction, UserTypes } from "~redux/user/actions";
+import { setToken } from "../../redux/api/utils";
+import { UserAction, UserTypes } from "../../redux/user/actions";
 import { AuthAction, AuthTypes } from "./actions";
 
 export interface IAuthState {

frontend/src/redux/auth/sagas.ts

@@ -8,7 +8,7 @@ import {
     race,
     takeLatest,
 } from "redux-saga/effects";
-import { login, signup } from "~redux/api/auth";
+import { login, signup } from "../../redux/api/auth";
 
 import {
     authFail,

frontend/src/redux/localSettings/reducer.ts

@@ -1,5 +1,5 @@
 import { Reducer } from "react";
-import { UserAction, UserTypes } from "~redux/user/actions";
+import { UserAction, UserTypes } from "../../redux/user/actions";
 
 import { LocalSettingsAction, LocalSettingsTypes } from "./actions";
 

frontend/src/redux/photos/actions.ts

@@ -1,10 +1,10 @@
 import { Action } from "redux";
-import { IPhotoReqJSON, Photo } from "~../../src/entity/Photo";
+import { IPhotoReqJSON, Photo } from "../../../../src/entity/Photo";
 import {
     showPhotoCreateFailToast,
     showPhotoUploadFileFailToast,
     showPhotoUploadJSONFailToast,
-} from "~AppToaster";
+} from "../../AppToaster";
 
 export enum PhotoTypes {
     PHOTOS_LOAD_START = "PHOTOS_LOAD",

frontend/src/redux/photos/reducer.ts

@@ -1,6 +1,6 @@
 import { Reducer } from "redux";
-import { IPhotoJSON, IPhotoReqJSON } from "~../../src/entity/Photo";
-import { UserAction, UserTypes } from "~redux/user/actions";
+import { IPhotoJSON, IPhotoReqJSON } from "../../../../src/entity/Photo";
+import { UserAction, UserTypes } from "../../redux/user/actions";
 import { PhotoAction, PhotoTypes } from "./actions";
 
 export interface IPhotoState {

frontend/src/redux/photos/sagas.ts

@@ -18,7 +18,7 @@ import {
     fetchPhoto,
     fetchPhotosList,
     uploadPhoto,
-} from "~redux/api/photos";
+} from "../../redux/api/photos";
 import {
     IPhotoDeleteStartAction,
     IPhotoLoadStartAction,
@@ -41,8 +41,8 @@ import {
     photoUploadStart,
     photoUploadSuccess,
 } from "./actions";
-import { IPhotosNewRespBody } from "~../../src/routes/photos";
-import { IPhotosListPagination } from "~../../src/types";
+import { IPhotosNewRespBody } from "../../../../src/routes/photos";
+import { IPhotosListPagination } from "../../../../src/types";
 
 // Thanks, https://dev.to/qortex/compute-md5-checksum-for-a-file-in-typescript-59a4
 function computeChecksumMd5(file: File): Promise<string> {

frontend/src/redux/reducers.ts

@@ -2,7 +2,7 @@ import { combineReducers } from "redux";
 import { persistReducer } from "redux-persist";
 import { PersistPartial } from "redux-persist/es/persistReducer";
 import storage from "redux-persist/lib/storage";
-import { authReducer, IAuthState } from "~redux/auth/reducer";
+import { authReducer, IAuthState } from "../redux/auth/reducer";
 import {
     ILocalSettingsState,
     localSettingsReducer,

frontend/src/redux/store.ts

@@ -2,7 +2,7 @@ import { applyMiddleware, createStore } from "redux";
 import { composeWithDevTools } from "redux-devtools-extension";
 import { persistStore } from "redux-persist";
 import createSagaMiddlware from "redux-saga";
-import { rootReducer } from "~redux/reducers";
+import { rootReducer } from "../redux/reducers";
 
 import { setToken } from "./api/utils";
 import { authSaga } from "./auth/sagas";

frontend/src/redux/user/actions.ts

@@ -1,6 +1,6 @@
 import { Action } from "redux";
-import { IUserAuthJSON, IUserJSON } from "~../../src/entity/User";
-import { showPasswordNotSavedToast, showPasswordSavedToast } from "~AppToaster";
+import { IUserAuthJSON, IUserJSON } from "../../../../src/entity/User";
+import { showPasswordNotSavedToast, showPasswordSavedToast } from "../../AppToaster";
 
 export enum UserTypes {
     USER_GET = "USER_GET",

frontend/src/redux/user/reducer.ts

@@ -1,6 +1,6 @@
 import { Reducer } from "react";
-import { IUserJSON } from "~../../src/entity/User";
-import { AuthAction, AuthTypes } from "~redux/auth/actions";
+import { IUserJSON } from "../../../../src/entity/User";
+import { AuthAction, AuthTypes } from "../../redux/auth/actions";
 import { UserAction, UserTypes } from "./actions";
 
 export interface IUserState {

frontend/src/redux/user/sagas.ts

@@ -1,5 +1,5 @@
 import { all, call, delay, put, race, takeLatest } from "redux-saga/effects";
-import { changeUserPassword, fetchUser } from "~redux/api/user";
+import { changeUserPassword, fetchUser } from "../../redux/api/user";
 
 import {
     getUserFail,

frontend/tsconfig.json

@@ -17,12 +17,7 @@
         "strictFunctionTypes": true,
         "strictNullChecks": true,
         "skipLibCheck": true,
-        "baseUrl": "./src",
-        "paths": {
-            "~*": [
-                "./*"
-            ]
-        }
+        "isolatedModules": true,
     },
     "include": [
         "./src/**/*.ts",