Merge pull request 'dockerfile-envs fixe, three bugs in select.tsx,typography/Link.tsx, and typography/RouterLink.tsx fixed' (#174) from bugfix/dockerfile-envs into develop

Reviewed-on: http://85.143.176.51:3000/free-land/front-end/pulls/174

.dockerignore

@@ -1,5 +1,5 @@
 .env*
-!.env.production
+.env.production
 node_modules
 build
 .vscode

Dockerfile

@@ -1,41 +1,30 @@
 # Install dependencies only when needed
-FROM node:16-alpine AS deps
+FROM node:fermium-alpine AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat
-WORKDIR /app
+WORKDIR /home/app/
 COPY package.json package-lock.json ./ 
 RUN npm ci
 
-# Rebuild the source code only when needed
-FROM node:16-alpine AS builder
-ENV NODE_ENV production
-WORKDIR /app
-# Copy dependencies from deps stage
-COPY --from=deps /app/node_modules ./node_modules
-COPY . .
-
-RUN npm run build
 
 # Bundle static assets with nginx
-FROM node:16-alpine as production
+FROM node:fermium-alpine as production
+
 # Copy built assets from builder
-WORKDIR /app
+WORKDIR /home/app/
-COPY --from=builder /app/build .
+COPY --from=deps ./home/app/node_modules ./node_modules
+COPY . .
 
 # Expose ports
 EXPOSE 3000
 
-COPY .env.production .
-
 ENV NODE_ENV production
 ENV USER_NAME=node_user USER_UID=2000 GROUP_NAME=node_group GROUP_UID=2000
 
-RUN npm i -g serve \
+RUN deluser --remove-home node \
-    && deluser --remove-home node \
     && addgroup --g ${GROUP_UID} -S ${GROUP_NAME} \ 
-    && adduser -D -S -s /sbin/nologin -u ${USER_UID} -G ${GROUP_NAME} ${USER_NAME}\
+    && adduser -D -S -s /sbin/nologin -u ${USER_UID} -G ${GROUP_NAME} ${USER_NAME}
-    && chown -R ${USER_NAME}:${GROUP_NAME} "/app/"
-
-
 USER "${USER_NAME}"
-CMD serve -s .
+
+
+ENTRYPOINT [ "npm","start"]

package.json

@@ -7,7 +7,7 @@
     "@fortawesome/free-brands-svg-icons": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@headlessui/react": "^1.6.6",
+    "@headlessui/react": "^1.7.3",
     "@reduxjs/toolkit": "^1.8.3",
     "@types/node": "^16.11.47",
     "@types/react": "^18.0.15",
@@ -24,9 +24,9 @@
     "i18next-http-backend": "^1.4.1",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
-    "react": "^18.2.0",
+    "react": "^18.1.0",
     "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.1.0",
     "react-hotkeys": "^2.0.0",
     "react-i18next": "^11.18.3",
     "react-loading-skeleton": "^3.1.0",

src/components/Select.tsx

@@ -3,7 +3,7 @@
 /* -------------------------------------------------------------------------- */
 import React from "react";
 import { Fragment } from "react";
-import { Listbox, Transition } from "@headlessui/react";
+import {  Listbox, Transition } from "@headlessui/react";
 import classNames from "classnames";
 import "../index.css";
 import { ReactComponent as SelectIcon } from "../assets/svg/caret-down.svg";
@@ -83,7 +83,7 @@ function Select<T>({
 }: Props<T>): JSX.Element {
   return (
     <div className={classNames("top-16 w-60", className)}>
-      <Listbox value={value} {...props} onChange={onChange}>
+      <Listbox value={value as any } {...props} onChange={onChange}>
         <div className="relative">
           <Listbox.Button
             className={classNames([

src/components/typography/Link.tsx

@@ -46,8 +46,9 @@ export default function Link({
         style={
           typeof style === "function"
             ? style({
-                isActive: true,
+              isActive: true,
-              })
+              isPending: false
+            })
             : style
         }
         aria-disabled={disabled}

src/components/typography/RouterLink.tsx

@@ -15,7 +15,7 @@ export function RouterLink({
   return (
     <NavLink
       to={to}
-      className={classNames({ "pointer-events-none": disabled }, className)}
+      className={classNames({ "pointer-events-none": disabled }, className as string)}
     >
       {children}
     </NavLink>