Add lint:fix script

.husky/pre-commit

@@ -3,4 +3,4 @@
 
 pnpm test
 pnpm -r test
-pnpm -r lint
+pnpm -r lint:fix

Dockerfile

@@ -19,12 +19,12 @@ COPY ./packages/dashboard /dashboard
 RUN npm run build
 
 
-FROM alpine:latest as app
+FROM alpine:3.16.0 as app
 
 WORKDIR /
 
 # Install docker
-RUN apk --no-cache --virtual build-dependencies add docker docker-compose curl nodejs npm bash
+RUN apk --no-cache --virtual build-dependencies add docker docker-compose curl nodejs npm bash g++ make
 
 RUN npm install node-gyp -g
 
@@ -42,4 +42,6 @@ COPY ./packages/system-api /api
 COPY --from=build /dashboard/.next /dashboard/.next
 COPY ./packages/dashboard /dashboard
 
+RUN apk del build-dependencies
+
 WORKDIR /

Dockerfile.dev

@@ -1,4 +1,4 @@
-FROM alpine:latest as app
+FROM alpine:3.16.0 as app
 
 WORKDIR /
 

packages/dashboard/package.json

@@ -8,6 +8,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "lint:fix": "next lint --fix",
     "gen": "graphql-codegen --config codegen.yml"
   },
   "dependencies": {

packages/dashboard/src/generated/graphql.tsx

@@ -57,7 +57,7 @@ export type AppInfo = {
   installed: Scalars['Boolean'];
   name: Scalars['String'];
   port: Scalars['Float'];
-  requirements?: Maybe<Requirements>;
+  requirements?: Maybe<Scalars['JSONObject']>;
   short_desc: Scalars['String'];
   source: Scalars['String'];
   url_suffix?: Maybe<Scalars['String']>;
@@ -167,18 +167,13 @@ export type Query = {
   listAppsInfo: ListAppsResonse;
   me?: Maybe<User>;
   systemInfo?: Maybe<SystemInfoResponse>;
-  version: Scalars['String'];
+  version: VersionResponse;
 };
 
 export type QueryGetAppArgs = {
   id: Scalars['String'];
 };
 
-export type Requirements = {
-  __typename?: 'Requirements';
-  ports?: Maybe<Array<Scalars['Float']>>;
-};
-
 export type SystemInfoResponse = {
   __typename?: 'SystemInfoResponse';
   cpu: Cpu;
@@ -204,6 +199,12 @@ export type UsernamePasswordInput = {
   username: Scalars['String'];
 };
 
+export type VersionResponse = {
+  __typename?: 'VersionResponse';
+  current: Scalars['String'];
+  latest?: Maybe<Scalars['String']>;
+};
+
 export type InstallAppMutationVariables = Exact<{
   input: AppInputType;
 }>;
@@ -346,6 +347,10 @@ export type SystemInfoQuery = {
   } | null;
 };
 
+export type VersionQueryVariables = Exact<{ [key: string]: never }>;
+
+export type VersionQuery = { __typename?: 'Query'; version: { __typename?: 'VersionResponse'; current: string; latest?: string | null } };
+
 export const InstallAppDocument = gql`
   mutation InstallApp($input: AppInputType!) {
     installApp(input: $input) {
@@ -883,3 +888,38 @@ export function useSystemInfoLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions
 export type SystemInfoQueryHookResult = ReturnType<typeof useSystemInfoQuery>;
 export type SystemInfoLazyQueryHookResult = ReturnType<typeof useSystemInfoLazyQuery>;
 export type SystemInfoQueryResult = Apollo.QueryResult<SystemInfoQuery, SystemInfoQueryVariables>;
+export const VersionDocument = gql`
+  query Version {
+    version {
+      current
+      latest
+    }
+  }
+`;
+
+/**
+ * __useVersionQuery__
+ *
+ * To run a query within a React component, call `useVersionQuery` and pass it any options that fit your needs.
+ * When your component renders, `useVersionQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useVersionQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useVersionQuery(baseOptions?: Apollo.QueryHookOptions<VersionQuery, VersionQueryVariables>) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useQuery<VersionQuery, VersionQueryVariables>(VersionDocument, options);
+}
+export function useVersionLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<VersionQuery, VersionQueryVariables>) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useLazyQuery<VersionQuery, VersionQueryVariables>(VersionDocument, options);
+}
+export type VersionQueryHookResult = ReturnType<typeof useVersionQuery>;
+export type VersionLazyQueryHookResult = ReturnType<typeof useVersionLazyQuery>;
+export type VersionQueryResult = Apollo.QueryResult<VersionQuery, VersionQueryVariables>;

packages/dashboard/src/graphql/queries/version.graphql

@@ -0,0 +1,6 @@
+query Version {
+  version {
+    current
+    latest
+  }
+}

packages/dashboard/src/hooks/useCachedRessources.ts

@@ -1,6 +1,6 @@
+import { useEffect, useState } from 'react';
 import { ApolloClient } from '@apollo/client';
 import axios from 'axios';
-import * as React from 'react';
 import useSWR, { BareFetcher } from 'swr';
 import { createApolloClient } from '../core/apollo/client';
 import { useSytemStore } from '../state/systemStore';
@@ -17,8 +17,8 @@ const fetcher: BareFetcher<any> = (url: string) => {
 export default function useCachedResources(): IReturnProps {
   const { data } = useSWR('/api/ip', fetcher);
   const { internalIp, setInternalIp } = useSytemStore();
-  const [isLoadingComplete, setLoadingComplete] = React.useState(false);
-  const [client, setClient] = React.useState<ApolloClient<unknown>>();
+  const [isLoadingComplete, setLoadingComplete] = useState(false);
+  const [client, setClient] = useState<ApolloClient<unknown>>();
 
   async function loadResourcesAndDataAsync(ip: string) {
     try {
@@ -33,13 +33,13 @@ export default function useCachedResources(): IReturnProps {
     }
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (data?.ip && !internalIp) {
       setInternalIp(data.ip);
     }
   }, [data?.ip, internalIp, setInternalIp]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (internalIp) {
       loadResourcesAndDataAsync(internalIp);
     }

packages/dashboard/src/pages/settings.tsx

@@ -1,27 +1,26 @@
 import type { NextPage } from 'next';
 import { Text } from '@chakra-ui/react';
-import useSWR from 'swr';
 import Layout from '../components/Layout';
-import fetcher from '../core/fetcher';
+import { useVersionQuery } from '../generated/graphql';
 
 const Settings: NextPage = () => {
-  const { data } = useSWR<{ current: string; latest: string }>('/system/version', fetcher);
+  const { data, loading } = useVersionQuery();
 
-  const isLatest = data?.latest === data?.current;
+  const isLatest = data?.version.latest === data?.version.current;
 
   const renderUpdate = () => {
     if (isLatest) {
       return (
         <Text fontSize="md" color="green.500">
-          Your Tipi install is up to date. Version {data?.current}
+          Your Tipi install is up to date. Version {data?.version.current}
         </Text>
       );
     }
 
     return (
       <Text fontSize="md">
-        You are not using the latest version of Tipi. There is a new version ({data?.latest}) available. Visit{' '}
-        <a className="text-blue-600" target="_blank" rel="noreferrer" href={`https://github.com/meienberger/runtipi/releases/v${data?.latest}`}>
+        You are not using the latest version of Tipi. There is a new version ({data?.version.latest}) available. Visit{' '}
+        <a className="text-blue-600" target="_blank" rel="noreferrer" href={`https://github.com/meienberger/runtipi/releases/v${data?.version.latest}`}>
           Github
         </a>{' '}
         for update instructions.
@@ -30,7 +29,7 @@ const Settings: NextPage = () => {
   };
 
   return (
-    <Layout loading={!data}>
+    <Layout loading={!data?.version && loading}>
       <Text fontSize="3xl" className="font-bold">
         Settings
       </Text>

packages/system-api/package.json

@@ -10,6 +10,7 @@
   "scripts": {
     "clean": "rimraf dist",
     "lint": "eslint . --ext .ts",
+    "lint:fix": "eslint . --ext .ts --fix",
     "test": "jest --colors",
     "test:watch": "jest --watch",
     "build": "esbuild --bundle src/server.ts --outdir=dist --allow-overwrite --sourcemap --platform=node --analyze=verbose --external:./node_modules/* --format=esm",

packages/system-api/src/modules/system/system.resolver.ts

@@ -9,7 +9,7 @@ export default class AuthResolver {
     return SystemService.systemInfo();
   }
 
-  @Query(() => String)
+  @Query(() => VersionResponse)
   async version(): Promise<VersionResponse> {
     return SystemService.getVersion();
   }