feat: add redis (#242)

* feat: add refis

* feat: add redis package

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

* feat: add example docker compose, add redis connection in package

* fix: usage of client after subscribe

* feat: add logger for redis

* refactor: format files

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

apps/nextjs/src/app/[locale]/manage/test.tsx

@@ -1,23 +1,38 @@
 "use client";
 
-import { useState } from "react";
+import { useCallback, useState } from "react";
+import type { ChangeEvent } from "react";
 
 import { clientApi } from "@homarr/api/client";
-import { Stack, Text } from "@homarr/ui";
+import { Button, Stack, Text, TextInput } from "@homarr/ui";
 
 export const Test = () => {
-  const [value, setValue] = useState<number>(0);
+  const [value, setValue] = useState("");
+  const [message, setMessage] = useState<string>("Hello, world!");
+  const { mutate } = clientApi.user.setMessage.useMutation();
   clientApi.user.test.useSubscription(undefined, {
-    onData(data) {
-      setValue(data);
+    onData({ message }) {
+      setMessage(message);
     },
     onError(err) {
       alert(err);
     },
   });
+
+  const onChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => setValue(event.target.value),
+    [setValue],
+  );
+  const onClick = useCallback(() => {
+    mutate(value);
+    setValue("");
+  }, [mutate, value]);
+
   return (
     <Stack>
-      <Text>This will change after one second: {value}</Text>
+      <TextInput label="Update message" value={value} onChange={onChange} />
+      <Button onClick={onClick}>Update message</Button>
+      <Text>This message gets through subscription: {message}</Text>
     </Stack>
   );
 };