Merge branch 'master' into develop

README.md

@@ -173,6 +173,8 @@ sudo rm -rf runtipi
 
 ## 📚 Documentation
 
+For a detailed guide on how to install Tipi. This amazing article by @kycfree1 [Running a Home Server with Tipi](https://kyc3.life/running-a-home-server-with-tipi/)
+
 You can find more documentation and tutorials / FAQ in the [Wiki](https://github.com/meienberger/runtipi/wiki).
 
 ## ❤️ Contributing

docker-compose.dev.yml

@@ -43,6 +43,8 @@ services:
     container_name: tipi-redis
     image: redis:alpine
     restart: unless-stopped
+    ports:
+      - 6379:6379
     volumes:
       - ./data/redis:/data
     networks:

packages/dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dashboard",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "private": true,
   "scripts": {
     "test": "jest --colors",

packages/dashboard/src/components/AppLogo/AppLogo.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
-import { useSystemStore } from '../../state/systemStore';
 
 const AppLogo: React.FC<{ id: string; size?: number; className?: string; alt?: string }> = ({ id, size = 80, className = '', alt = '' }) => {
-  const { baseUrl } = useSystemStore();
-  const logoUrl = `${baseUrl}/apps/${id}/metadata/logo.jpg`;
+  const logoUrl = `/api/apps/${id}/metadata/logo.jpg`;
 
   return (
     <div aria-label={alt} className={`drop-shadow ${className}`} style={{ width: size, height: size }}>

packages/dashboard/src/components/Layout/SideMenu.tsx

@@ -11,6 +11,7 @@ import { IconType } from 'react-icons';
 import { useLogoutMutation, useVersionQuery } from '../../generated/graphql';
 import { getUrl } from '../../core/helpers/url-helpers';
 import { BsHeart } from 'react-icons/bs';
+import semver from 'semver';
 
 const SideMenu: React.FC = () => {
   const router = useRouter();
@@ -19,7 +20,8 @@ const SideMenu: React.FC = () => {
   const versionQuery = useVersionQuery();
   const path = router.pathname.split('/')[1];
 
-  const isLatest = versionQuery.data?.version.latest === versionQuery.data?.version.current;
+  const defaultVersion = '0.0.0';
+  const isLatest = semver.gte(versionQuery.data?.version.current || defaultVersion, versionQuery.data?.version.latest || defaultVersion);
 
   const renderMenuItem = (title: string, name: string, Icon: IconType) => {
     const selected = path === name;

packages/dashboard/src/components/Layout/UpdateBanner.tsx

@@ -22,7 +22,7 @@ const UpdateBanner = () => {
           <AlertDescription>
             There is a new version of Tipi available ({data?.version.latest}). Visit{' '}
             <a className="text-blue-600" target="_blank" rel="noreferrer" href={'https://github.com/meienberger/runtipi/releases/latest'}>
-              Github
+              GitHub
             </a>{' '}
             for update instructions.
           </AlertDescription>

packages/dashboard/src/components/StatusScreens/StatusWrapper.tsx

@@ -1,7 +1,7 @@
 import { SlideFade } from '@chakra-ui/react';
 import React, { useEffect, useState } from 'react';
 import useSWR from 'swr';
-import { SystemStatus, useSystemStore } from '../../state/systemStore';
+import { SystemStatus } from '../../state/systemStore';
 import RestartingScreen from './RestartingScreen';
 import UpdatingScreen from './UpdatingScreen';
 
@@ -13,8 +13,7 @@ const fetcher = (url: string) => fetch(url).then((res) => res.json());
 
 const StatusWrapper: React.FC<IProps> = ({ children }) => {
   const [s, setS] = useState<SystemStatus>(SystemStatus.RUNNING);
-  const { baseUrl } = useSystemStore();
-  const { data } = useSWR(`${baseUrl}/status`, fetcher, { refreshInterval: 1000 });
+  const { data } = useSWR('/api/status', fetcher, { refreshInterval: 1000 });
 
   useEffect(() => {
     if (data?.status === SystemStatus.RUNNING) {

packages/dashboard/src/core/apollo/client.ts

@@ -1,8 +1,8 @@
 import { ApolloClient, from, InMemoryCache } from '@apollo/client';
 import links from './links';
 
-export const createApolloClient = async (url: string): Promise<ApolloClient<any>> => {
-  const additiveLink = from([links.errorLink, links.authLink, links.httpLink(url)]);
+export const createApolloClient = async (): Promise<ApolloClient<any>> => {
+  const additiveLink = from([links.errorLink, links.authLink, links.httpLink]);
 
   return new ApolloClient({
     link: additiveLink,

packages/dashboard/src/core/apollo/links/httpLink.ts

@@ -1,9 +1,7 @@
 import { HttpLink } from '@apollo/client';
 
-const httpLink = (url: string) => {
-  return new HttpLink({
-    uri: `${url}/graphql`,
-  });
-};
+const httpLink = new HttpLink({
+  uri: '/api/graphql',
+});
 
 export default httpLink;

packages/dashboard/src/hooks/useCachedRessources.ts

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { ApolloClient } from '@apollo/client';
 import { createApolloClient } from '../core/apollo/client';
-import { useSystemStore } from '../state/systemStore';
 
 interface IReturnProps {
   client?: ApolloClient<unknown>;
@@ -9,13 +8,12 @@ interface IReturnProps {
 }
 
 export default function useCachedResources(): IReturnProps {
-  const { baseUrl, setBaseUrl } = useSystemStore();
   const [isLoadingComplete, setLoadingComplete] = useState(false);
   const [client, setClient] = useState<ApolloClient<unknown>>();
 
-  async function loadResourcesAndDataAsync(url: string) {
+  async function loadResourcesAndDataAsync() {
     try {
-      const restoredClient = await createApolloClient(url);
+      const restoredClient = await createApolloClient();
 
       setClient(restoredClient);
     } catch (error) {
@@ -27,21 +25,8 @@ export default function useCachedResources(): IReturnProps {
   }
 
   useEffect(() => {
-    const hostname = window.location.hostname;
-    const port = window.location.port;
-
-    if (!port) {
-      setBaseUrl(`http://${hostname}/api`);
-    } else {
-      setBaseUrl(`http://${hostname}:${port}/api`);
-    }
-  }, [setBaseUrl]);
-
-  useEffect(() => {
-    if (baseUrl) {
-      loadResourcesAndDataAsync(baseUrl);
-    }
-  }, [baseUrl]);
+    loadResourcesAndDataAsync();
+  }, []);
 
   return { client, isLoadingComplete };
 }

packages/dashboard/src/pages/settings.tsx

@@ -18,7 +18,7 @@ const Settings: NextPage = () => {
   const [logout] = useLogoutMutation({ refetchQueries: ['Me'] });
 
   const defaultVersion = '0.0.0';
-  const isLatest = semver.gte(data?.version.latest || defaultVersion, data?.version.current || defaultVersion);
+  const isLatest = semver.gte(data?.version.current || defaultVersion, data?.version.latest || defaultVersion);
 
   const handleError = (error: unknown) => {
     if (error instanceof Error) {

packages/dashboard/src/state/systemStore.ts

@@ -7,15 +7,11 @@ export enum SystemStatus {
 }
 
 type Store = {
-  baseUrl: string;
   status: SystemStatus;
-  setBaseUrl: (url: string) => void;
   setStatus: (status: SystemStatus) => void;
 };
 
 export const useSystemStore = create<Store>((set) => ({
-  baseUrl: '',
   status: SystemStatus.RUNNING,
-  setBaseUrl: (url: string) => set((state) => ({ ...state, baseUrl: url })),
   setStatus: (status: SystemStatus) => set((state) => ({ ...state, status })),
 }));

packages/system-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "system-api",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "",
   "exports": "./dist/server.js",
   "type": "module",

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

@@ -43,10 +43,9 @@ const getVersion = async (): Promise<{ current: string; latest?: string }> => {
       const { data } = await axios.get('https://api.github.com/repos/meienberger/runtipi/releases/latest');
 
       version = data.name.replace('v', '');
+      await TipiCache.set('latestVersion', version?.replace('v', '') || '', 60 * 60);
     }
 
-    await TipiCache.set('latestVersion', version?.replace('v', '') || '', 60 * 60);
-
     return { current: getConfig().version, latest: version?.replace('v', '') };
   } catch (e) {
     logger.error(e);