Just catching up

.gitignore

@@ -27,3 +27,7 @@ set-pnpmrc.sh
 *.njsproj
 *.sln
 *.sw?
+*.pfx
+*.pem
+*.cer
+*.key

Dockerfile

@@ -11,10 +11,7 @@ COPY tsconfig.json .
 COPY src ./src
 COPY scripts ./scripts
 COPY public ./public
-
-RUN echo "registry=https://registry.npmjs.org/" > .npmrc
-RUN echo "@collinlucke:registry=https://npm.pkg.github.com" >> .npmrc
-RUN echo "//npm.pkg.github.com/:_authToken=${GIT_REGISTRY_TOKEN}" >> .npmrc
+COPY .npmrc .
 
 RUN npm install -g pnpm typescript
 RUN pnpm install
@@ -23,6 +20,12 @@ RUN pnpm build
 FROM nginx:stable-alpine
 WORKDIR /usr/share/nginx/html
 RUN rm -rf *
+
+RUN apk update \
+    && apk add openssl
+COPY fullchain.pem /etc/ssl/certs
+COPY privkey.pem /etc/ssl/private
+RUN openssl rsa -in /etc/ssl/private/privkey.pem -out /etc/ssl/private/privkey.pem -passin pass:ExportSSL4me!
 COPY --from=build /app/dist .
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 EXPOSE 80

docker-compose.yml

@@ -6,9 +6,6 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-    ports:
-      - '80:80'
-      - '443:443'
     environment:
       - NODE_ENV=${NODE_ENV}
       - SERVER_BASE_URL=${SERVER_BASE_URL}

nginx.conf

@@ -1,7 +1,12 @@
 server {
-    listen       80;
-    listen  [::]:80;
-    server_name  localhost;
+    listen 80 ssl;
+    listen 443 ssl;
+    listen [::]:80;
+    listen [::]:443;
+    server_name  collinlucke.com;
+
+    ssl_certificate /etc/ssl/certs/fullchain.pem;
+    ssl_certificate_key /etc/ssl/private/privkey.pem;
 
     location / {
         root   /usr/share/nginx/html;

src/components/MovieEditor/MovieEditorForm.tsx

@@ -20,7 +20,6 @@ type MovieEditorFormProps = {
     title?: string;
     fullplot?: string;
   };
-  clean?: boolean;
   readonly?: boolean;
 
   onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
@@ -31,12 +30,10 @@ type MovieEditorFormProps = {
 export const MovieEditorForm: React.FC<MovieEditorFormProps> = ({
   movie,
   readonly,
-  clean,
   onSubmit,
   onChange,
   onChangeTextArea
 }) => {
-  console.log('is clean ', clean);
   const navigate = useNavigate();
   const onSubmitHandler = (e: React.FormEvent<HTMLFormElement>) => {
     onSubmit?.(e);

src/components/MovieEditor/MovieEditorPage.tsx

@@ -48,12 +48,12 @@ export const MovieEditorPage: React.FC<EditMoviePage> = ({
     }
     setShowHeading(true);
   }, [clean]);
-  console.log('isViewReady ', isViewReady);
 
   const { loading, data } = useQuery(GET_MOVIE, {
     variables: {
       id
     },
+    skip: clean,
     onCompleted: data => {
       setMovie(data.movie);
     }

src/components/shared/ProtectedRoute.tsx

@@ -1,5 +1,4 @@
 import { ComponentType, useEffect } from 'react';
-import { useLocation, Navigate } from 'react-router-dom';
 import { useError } from '../../contexts';
 import { useShowHeading } from '../../contexts';
 import { useIsAuthenticated } from '../../hooks/useIsAuthenticated';
@@ -13,13 +12,8 @@ export const ProtectedRoute: React.FC<ProtectedRouteTypes> = ({
   props
 }) => {
   const isAuthenticated = useIsAuthenticated({ protectedRoute: true });
-  const location = useLocation();
   const { error } = useError();
   const { setShowHeading } = useShowHeading();
-  const baphToken = localStorage.getItem('baphomet-token');
-  if (!baphToken) {
-    return <Navigate to="/login" state={{ from: location }} replace />;
-  }
 
   useEffect(() => {
     if (error) {

src/hooks/useIsAuthenticated.ts

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import { useQuery } from '@apollo/client';
-import { useNavigate } from 'react-router-dom';
 import { useError } from '../contexts';
 import {
   CustomErrorTypes,
@@ -15,26 +14,18 @@ type UseIsAuthenticatedTypes = {
 export const useIsAuthenticated: React.FC<UseIsAuthenticatedTypes> = ({
   protectedRoute = false
 } = {}) => {
-  const navigate = useNavigate();
   const [isAuthenticated, setIsAuthenticated] = useState(false);
   const { setError } = useError();
   const baphToken = localStorage.getItem('baphomet-token');
 
-  if (!baphToken) {
-    navigate('/login');
-  }
-
   useQuery(CHECK_AUTH, {
     variables: {
       token: baphToken
     },
     onCompleted: data => {
-      if (data.checkAuth.isValid) {
-        setIsAuthenticated(true);
-      }
+      setIsAuthenticated(data.checkAuth.isValid);
     },
     onError: error => {
-      console.log(protectedRoute);
       if (protectedRoute) {
         const titledError = {
           ...error,

src/main.tsx

@@ -11,21 +11,21 @@ import { setContext } from '@apollo/client/link/context';
 import routes from './routes';
 import 'dotenv';
 
-const baseURL =
-  location.hostname === 'localhost'
-    ? location.origin
-    : `${process.env.PROD_URL}`;
+const protocol = process.env.NODE_ENV === 'development' ? 'http' : 'https';
 const router = createBrowserRouter(routes);
 const httpLink = createHttpLink({
-  uri: `${baseURL}:5050/graphql/`
+  uri: `${protocol}://${location.hostname}:${
+    protocol === 'https' ? '443' : '5050'
+  }/graphql`
 });
 
 const authLink = setContext((_, { headers }) => {
   const token = localStorage.getItem('baphomet-token');
   return {
     headers: {
       ...headers,
-      authorization: token ? `Bearer ${token}` : ''
+      authorization: token ? `Bearer ${token}` : '',
+      'x-apollo-operation-name': 'GraphQLOperation'
     }
   };
 });