Merge pull request #63 from ajnart/dev

Adding persistent storage

.dockerignore

@@ -0,0 +1,6 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.git

.github/workflows/docker.yml

@@ -41,12 +41,18 @@ jobs:
           # If source files changed but packages didn't, rebuild from a prior cache.
           restore-keys: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
       - run: yarn install --frozen-lockfile
-      - run: yarn export
+      - run: yarn build
       - name: Cache build output
         uses: actions/cache@v2
         id: restore-build
         with:
-          path: ./out/
+          path: |
+             ./next.config.js
+             ./pages/
+             ./public/
+             ./.next/static/
+             ./.next/standalone/
+             ./packages.jsan
           key: ${{ github.sha }}
 
   docker:
@@ -61,30 +67,28 @@ jobs:
       - uses: actions/cache@v2
         id: restore-build
         with:
-          path: ./out/
+          path: |
+             ./next.config.js
+             ./pages/
+             ./public/
+             ./.next/static/
+             ./.next/standalone/
+             ./packages.jsan
           key: ${{ github.sha }}
       - name: Docker meta
         id: meta
         uses: docker/metadata-action@v4
         with:
           # list of Docker images to use as base name for tags
-          images: |
-            ajnart/homarr
-            ghcr.io/ajnart/homarr
+          images: ghcr.io/${{ github.repository }}
           # generate Docker tags based on the following events/attributes
           tags: |
-            type=raw,value=latest,enable={{is_default_branch}}
+            type=raw,value=latest
             type=pep440,pattern={{version}}
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v2
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
-      - name: Login to DockerHub
-        if: github.event_name != 'pull_request'
-        uses: docker/login-action@v2
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
       - name: Login to GHCR
         if: github.event_name != 'pull_request'
         uses: docker/login-action@v2

Dockerfile

@@ -1,2 +1,20 @@
-FROM nginx:alpine
-COPY ./out /usr/share/nginx/html
+FROM node:16-alpine
+WORKDIR /app
+ENV NODE_ENV production
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY /next.config.js ./
+COPY  /public ./public
+COPY /package.json ./package.json
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --chown=nextjs:nodejs /.next/standalone ./
+COPY --chown=nextjs:nodejs /.next/static ./.next/static
+
+USER nextjs
+EXPOSE 7575
+ENV PORT 7575
+VOLUME /app/data/configs
+CMD ["node", "server.js"]

README.md

@@ -39,7 +39,7 @@ _Requirements_:
 
 **Standard Docker Install**
 ```sh
-docker run --name homarr -p 7575:80 -d ghcr.io/ajnart/homarr
+docker run --name homarr -p 7575:7575 -d ghcr.io/ajnart/homarr
 ```
 
 **Docker Compose**
@@ -55,7 +55,7 @@ services:
     image: ghcr.io/ajnart/homarr
     restart: unless-stopped
     ports:
-      - '7575:80'
+      - '7575:7575'
 ```
 
 ### Building from Source 🛠️

components/AppShelf/AddAppShelfItem.tsx

@@ -1,5 +1,4 @@
 import {
-  useMantineTheme,
   Modal,
   Center,
   Group,
@@ -21,9 +20,7 @@ import { ServiceTypeList } from '../../tools/types';
 import { AppShelfItemWrapper } from './AppShelfItemWrapper';
 
 export default function AddItemShelfItem(props: any) {
-  const { addService } = useConfig();
   const [opened, setOpened] = useState(false);
-  const theme = useMantineTheme();
   return (
     <>
       <Modal
@@ -83,7 +80,7 @@ function MatchIcon(name: string, form: any) {
         form.setFieldValue('icon', res.url);
       }
     })
-    .catch((e) => {
+    .catch(() => {
       // Do nothing
     });
 
@@ -92,7 +89,7 @@ function MatchIcon(name: string, form: any) {
 
 export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & any) {
   const { setOpened } = props;
-  const { addService, config, setConfig } = useConfig();
+  const { config, setConfig } = useConfig();
   const [isLoading, setLoading] = useState(false);
 
   const form = useForm({
@@ -104,7 +101,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
       apiKey: props.apiKey ?? (undefined as unknown as string),
     },
     validate: {
-      apiKey: (value: string) => null,
+      apiKey: () => null,
       // Validate icon with a regex
       icon: (value: string) => {
         if (!value.match(/^https?:\/\/.+\.(png|jpg|jpeg|gif)$/)) {
@@ -143,7 +140,10 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
               }),
             });
           } else {
-            addService(form.values);
+            setConfig({
+              ...config,
+              services: [...config.services, form.values],
+            });
           }
           setOpened(false);
           form.reset();

components/AppShelf/AppShelf.tsx

@@ -1,35 +1,18 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { motion } from 'framer-motion';
-import {
-  Text,
-  AspectRatio,
-  SimpleGrid,
-  Card,
-  useMantineTheme,
-  Image,
-  Group,
-  Space,
-} from '@mantine/core';
+import { Text, AspectRatio, SimpleGrid, Card, Image, Group, Space } from '@mantine/core';
 import { useConfig } from '../../tools/state';
 import { serviceItem } from '../../tools/types';
 import AddItemShelfItem from './AddAppShelfItem';
 import { AppShelfItemWrapper } from './AppShelfItemWrapper';
 import AppShelfMenu from './AppShelfMenu';
 
-const AppShelf = (props: any) => {
-  const { config, addService, removeService, setConfig } = useConfig();
-
-  /* A hook that is used to load the config from local storage. */
-  useEffect(() => {
-    const localConfig = localStorage.getItem('config');
-    if (localConfig) {
-      setConfig(JSON.parse(localConfig));
-    }
-  }, []);
+const AppShelf = () => {
+  const { config } = useConfig();
 
   return (
     <SimpleGrid m="xl" cols={5} spacing="xl">
-      {config.services.map((service, i) => (
+      {config.services.map((service) => (
         <AppShelfItem key={service.name} service={service} />
       ))}
       <AddItemShelfItem />
@@ -39,16 +22,14 @@ const AppShelf = (props: any) => {
 
 export function AppShelfItem(props: any) {
   const { service }: { service: serviceItem } = props;
-  const theme = useMantineTheme();
-  const { removeService } = useConfig();
   const [hovering, setHovering] = useState(false);
   return (
     <motion.div
       key={service.name}
-      onHoverStart={(e) => {
+      onHoverStart={() => {
         setHovering(true);
       }}
-      onHoverEnd={(e) => {
+      onHoverEnd={() => {
         setHovering(false);
       }}
     >
@@ -79,7 +60,7 @@ export function AppShelfItem(props: any) {
                 opacity: hovering ? 1 : 0,
               }}
             >
-              <AppShelfMenu service={service} removeitem={removeService} />
+              <AppShelfMenu service={service} />
             </motion.div>
           </Group>
         </Card.Section>

components/AppShelf/AppShelfMenu.tsx

@@ -2,10 +2,12 @@ import { Menu, Modal, Text } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { useState } from 'react';
 import { Check, Edit, Trash } from 'tabler-icons-react';
+import { useConfig } from '../../tools/state';
 import { AddAppShelfItemForm } from './AddAppShelfItem';
 
 export default function AppShelfMenu(props: any) {
-  const { service, removeitem: removeItem } = props;
+  const { service } = props;
+  const { config, setConfig } = useConfig();
   const [opened, setOpened] = useState(false);
   return (
     <>
@@ -40,7 +42,10 @@ export default function AppShelfMenu(props: any) {
         <Menu.Item
           color="red"
           onClick={(e: any) => {
-            removeItem(service.name);
+            setConfig({
+              ...config,
+              services: config.services.filter((s) => s.name !== service.name),
+            });
             showNotification({
               autoClose: 5000,
               title: (

components/Config/ConfigChanger.tsx

@@ -0,0 +1,37 @@
+import { Center, Loader, Select, Tooltip } from '@mantine/core';
+import { setCookies } from 'cookies-next';
+import { useEffect, useState } from 'react';
+import { useConfig } from '../../tools/state';
+
+export default function ConfigChanger() {
+  const { config, loadConfig, setConfig, getConfigs } = useConfig();
+  const [configList, setConfigList] = useState([] as string[]);
+  useEffect(() => {
+    getConfigs().then((configs) => setConfigList(configs));
+    // setConfig(initialConfig);
+  }, [config]);
+  // If configlist is empty, return a loading indicator
+  if (configList.length === 0) {
+    return (
+      <Center>
+        <Tooltip label={"Loading your configs. This doesn't load in vercel."}>
+          <Loader />
+        </Tooltip>
+      </Center>
+    );
+  }
+  return (
+    <Select
+      defaultValue={config.name}
+      label="Config loader"
+      onChange={(e) => {
+        loadConfig(e ?? 'default');
+        setCookies('config-name', e ?? 'default', { maxAge: 60 * 60 * 24 * 30 });
+      }}
+      data={
+        // If config list is empty, return the current config
+        configList.length === 0 ? [config.name] : configList
+      }
+    />
+  );
+}

components/Config/LoadConfig.tsx

@@ -4,6 +4,7 @@ import { DropzoneStatus, FullScreenDropzone } from '@mantine/dropzone';
 import { showNotification } from '@mantine/notifications';
 import { useRef } from 'react';
 import { useRouter } from 'next/router';
+import { setCookies } from 'cookies-next';
 import { useConfig } from '../../tools/state';
 import { Config } from '../../tools/types';
 
@@ -48,7 +49,7 @@ export const dropzoneChildren = (status: DropzoneStatus, theme: MantineTheme) =>
 );
 
 export default function LoadConfigComponent(props: any) {
-  const { saveConfig, setConfig } = useConfig();
+  const { setConfig } = useConfig();
   const theme = useMantineTheme();
   const router = useRouter();
   const openRef = useRef<() => void>();
@@ -69,15 +70,21 @@ export default function LoadConfigComponent(props: any) {
             });
             return;
           }
+          const newConfig: Config = JSON.parse(e);
           showNotification({
             autoClose: 5000,
             radius: 'md',
-            title: <Text>Config loaded successfully</Text>,
+            title: (
+              <Text>
+                Config <b>{newConfig.name}</b> loaded successfully
+              </Text>
+            ),
             color: 'green',
             icon: <Check />,
             message: undefined,
           });
-          setConfig(JSON.parse(e));
+          setCookies('config-name', newConfig.name, { maxAge: 60 * 60 * 24 * 30 });
+          setConfig(newConfig);
         });
       }}
       accept={['application/json']}

components/Config/SaveConfig.tsx

@@ -7,7 +7,7 @@ export default function SaveConfigComponent(props: any) {
   const { config } = useConfig();
   function onClick(e: any) {
     if (config) {
-      fileDownload(JSON.stringify(config, null, '\t'), 'config.json');
+      fileDownload(JSON.stringify(config, null, '\t'), `${config.name}.json`);
     }
   }
   return (

components/Config/SelectConfig.tsx

@@ -0,0 +1,16 @@
+import { Select } from '@mantine/core';
+import { useState } from 'react';
+
+export default function SelectConfig(props: any) {
+  const [value, setValue] = useState<string | null>('');
+  return (
+    <Select
+      value={value}
+      onChange={setValue}
+      data={[
+        { value: 'default', label: 'Default' },
+        { value: 'yourmom', label: 'Your mom' },
+      ]}
+    />
+  );
+}

components/SearchBar/SearchBar.tsx

@@ -48,7 +48,7 @@ export default function SearchBar(props: any) {
           if (isYoutube) {
             window.open(`https://www.youtube.com/results?search_query=${querry.substring(3)}`);
           } else if (isTorrent) {
-            window.open(`https://thepiratebay.org/search.php?q=${querry.substring(3)}`);
+            window.open(`https://bitsearch.to/search?q=${querry.substring(3)}`);
           } else {
             window.open(`${querryUrl}${values.querry}`);
           }