prototype thingy

.gitignore

@@ -0,0 +1,42 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+app-example
+
+.env
+
+.idea

README.md

@@ -1 +1,50 @@
-# matrix-frontend
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+    npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

app.json

@@ -0,0 +1,50 @@
+{
+  "expo": {
+    "name": "matrix-frontend",
+    "slug": "matrix-frontend",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "myapp",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "de.starappeal.ledmatrix"
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/images/splash-icon.png",
+          "imageWidth": 200,
+          "resizeMode": "contain",
+          "backgroundColor": "#ffffff"
+        }
+      ]
+    ],
+    "experiments": {
+      "typedRoutes": true
+    },
+    "extra": {
+      "router": {
+        "origin": false
+      },
+      "eas": {
+        "projectId": "6c7ada5a-fcc7-4d36-a056-c542c6d13dac"
+      }
+    }
+  }
+}

app/(tabs)/_layout.tsx

@@ -0,0 +1,42 @@
+import {Tabs} from 'expo-router';
+
+import Ionicons from '@expo/vector-icons/Ionicons';
+
+
+export default function TabLayout() {
+  return (
+      <Tabs
+          screenOptions={{
+            tabBarActiveTintColor: '#ffd33d',
+            headerStyle: {
+              backgroundColor: '#25292e',
+            },
+            headerShadowVisible: false,
+            headerTintColor: '#fff',
+            tabBarStyle: {
+              backgroundColor: '#25292e',
+            },
+          }}
+      >
+        <Tabs.Screen
+            name="index"
+            options={{
+              title: 'Home',
+              tabBarIcon: ({color, focused}) => (
+                  <Ionicons name={focused ? 'home-sharp' : 'home-outline'} color={color} size={24}/>
+              ),
+            }}
+        />
+        <Tabs.Screen
+            name="about"
+            options={{
+              title: 'About',
+              tabBarIcon: ({color, focused}) => (
+                  <Ionicons name={focused ? 'information-circle' : 'information-circle-outline'} color={color}
+                            size={24}/>
+              ),
+            }}
+        />
+      </Tabs>
+  );
+}

app/(tabs)/about.tsx

@@ -0,0 +1,21 @@
+import { Text, View, StyleSheet } from 'react-native';
+
+export default function AboutScreen() {
+  return (
+      <View style={styles.container}>
+        <Text style={styles.text}>About screen</Text>
+      </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    color: '#fff',
+  },
+});

app/(tabs)/index.tsx

@@ -0,0 +1,62 @@
+import {ActivityIndicator, StyleSheet, Text, View} from 'react-native';
+import Button from '@/components/Button';
+import ImageViewer from '@/components/ImageViewer';
+
+const PlaceholderImage = require('@/assets/images/GarfieldCharakter.webp');
+
+import * as ImagePicker from 'expo-image-picker';
+import {RestService} from '@/services/RestService';
+import useService from '@/hooks/useService';
+
+export default function Index() {
+  const {data, loading, error} = useService(RestService.fetchAllUser);
+
+  const pickImageAsync = async () => {
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ['images'],
+      allowsEditing: true,
+      quality: 1,
+    });
+
+    if (!result.canceled) {
+      console.log(result);
+    } else {
+      alert('You did not select any image.');
+    }
+  };
+
+  console.log(data);
+  return (
+      <View style={styles.container}>
+        <View style={styles.imageContainer}>
+          <ImageViewer imgSource={PlaceholderImage}/>
+        </View>
+        <View style={styles.footerContainer}>
+          {loading && <ActivityIndicator/>}
+          {error && <Text>Error: {error.message}</Text>}
+          {data && (
+              <Text>
+                {data.users.map((item) => item.name).join('; ')}
+              </Text>
+          )}
+          <Button label="Choose a photo" theme="primary" onPress={pickImageAsync}/>
+          <Button label="Use this photo"/>
+        </View>
+      </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    alignItems: 'center',
+  },
+  imageContainer: {
+    flex: 1,
+  },
+  footerContainer: {
+    flex: 1 / 3,
+    alignItems: 'center',
+  },
+});

app/+not-found.tsx

@@ -0,0 +1,30 @@
+import { View, StyleSheet } from 'react-native';
+import { Link, Stack } from 'expo-router';
+
+export default function NotFoundScreen() {
+  return (
+      <>
+        <Stack.Screen options={{ title: 'Oops! Not Found' }} />
+        <View style={styles.container}>
+          <Link href="/" style={styles.button}>
+            Go back to Home screen!
+          </Link>
+        </View>
+      </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  button: {
+    fontSize: 20,
+    textDecorationLine: 'underline',
+    color: '#fff',
+  },
+});

app/_layout.tsx

@@ -0,0 +1,10 @@
+import { Stack } from "expo-router";
+
+export default function RootLayout() {
+  return (
+      <Stack>
+        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack.Screen name="+not-found" />
+      </Stack>
+  );
+}

components/Button.tsx

@@ -0,0 +1,61 @@
+import { StyleSheet, View, Pressable, Text } from 'react-native';
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+
+type Props = {
+  label: string;
+  theme?: 'primary';
+  onPress?: () => void;
+};
+
+export default function Button({ label, theme, onPress }: Props) {
+  if (theme === 'primary') {
+    return (
+        <View
+            style={[
+              styles.buttonContainer,
+              { borderWidth: 4, borderColor: '#ffd33d', borderRadius: 18 },
+            ]}>
+          <Pressable
+              style={[styles.button, { backgroundColor: '#fff' }]}
+              onPress={onPress}>
+            <FontAwesome name="picture-o" size={18} color="#25292e" style={styles.buttonIcon} />
+            <Text style={[styles.buttonLabel, { color: '#25292e' }]}>{label}</Text>
+          </Pressable>
+        </View>
+    );
+  }
+
+  return (
+      <View style={styles.buttonContainer}>
+        <Pressable style={styles.button} onPress={() => alert('You pressed a button.')}>
+          <Text style={styles.buttonLabel}>{label}</Text>
+        </Pressable>
+      </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    width: 320,
+    height: 68,
+    marginHorizontal: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 3,
+  },
+  button: {
+    borderRadius: 10,
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  buttonIcon: {
+    paddingRight: 8,
+  },
+  buttonLabel: {
+    color: '#fff',
+    fontSize: 16,
+  },
+});

components/ImageViewer.tsx

@@ -0,0 +1,18 @@
+import { StyleSheet } from "react-native";
+import { Image, type ImageSource } from "expo-image";
+
+type Props = {
+  imgSource: ImageSource;
+};
+
+export default function ImageViewer({ imgSource }: Props) {
+  return <Image source={imgSource} style={styles.image} />;
+}
+
+const styles = StyleSheet.create({
+  image: {
+    width: 320,
+    height: 440,
+    borderRadius: 18,
+  },
+});

eas.json

@@ -0,0 +1,27 @@
+{
+  "cli": {
+    "version": ">= 13.3.0",
+    "appVersionSource": "remote"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal",
+      "env": {
+        "EXPO_PUBLIC_API_URL": "https://led-matrix.onrender.com/api"
+      }
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {
+      "autoIncrement": true,
+      "env": {
+        "EXPO_PUBLIC_API_URL": "https://led-matrix.onrender.com/api"
+      }
+    }
+  },
+  "submit": {
+    "production": {}
+  }
+}

hooks/useService.ts

@@ -0,0 +1,36 @@
+import {useState, useEffect} from 'react';
+
+type AsyncCallback<T> = () => Promise<T>;
+
+
+interface ServiceResult<T> {
+  data: T | null,
+  error: Error | null,
+  loading: boolean,
+}
+
+const useService = <T>(callback: AsyncCallback<T>): ServiceResult<T> => {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    const executeCallback = async () => {
+      setLoading(true);
+      try {
+        const result = await callback(); // Führe den übergebenen Callback aus
+        setData(result);
+      } catch (err) {
+        setError(err as Error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    executeCallback();
+  }, [callback]);
+
+  return {data, loading, error};
+}
+
+export default useService;

model/User.ts

@@ -0,0 +1,16 @@
+export default class User {
+  constructor(
+      public name: string,
+      public uuid: string,
+      public id: string,
+      public config : UserConfig
+  ) {}
+}
+
+export class UserConfig {
+  constructor(
+      public isVisible: boolean ,
+      public canBeModified: boolean,
+      public isAdmin: boolean
+  ) {}
+}

package.json

@@ -0,0 +1,60 @@
+{
+  "name": "matrix-frontend",
+  "main": "expo-router/entry",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "expo start",
+    "reset-project": "node ./scripts/reset-project.js",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "test": "jest --watchAll",
+    "lint": "expo lint"
+  },
+  "jest": {
+    "preset": "jest-expo"
+  },
+  "dependencies": {
+    "@expo/ngrok": "^4.1.3",
+    "@expo/vector-icons": "^14.0.2",
+    "@react-navigation/bottom-tabs": "^7.0.0",
+    "@react-navigation/native": "^7.0.0",
+    "axios": "^1.7.7",
+    "expo": "^52.0.10",
+    "expo-blur": "~14.0.1",
+    "expo-constants": "~17.0.3",
+    "expo-dev-client": "~5.0.4",
+    "expo-font": "~13.0.1",
+    "expo-haptics": "~14.0.0",
+    "expo-image": "~2.0.2",
+    "expo-image-picker": "~16.0.3",
+    "expo-linking": "~7.0.3",
+    "expo-router": "~4.0.8",
+    "expo-splash-screen": "~0.29.13",
+    "expo-status-bar": "~2.0.0",
+    "expo-symbols": "~0.2.0",
+    "expo-system-ui": "~4.0.3",
+    "expo-web-browser": "~14.0.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.2",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-reanimated": "~3.16.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "^4.0.0",
+    "react-native-web": "~0.19.13",
+    "react-native-webview": "13.12.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@types/jest": "^29.5.12",
+    "@types/react": "~18.3.12",
+    "@types/react-test-renderer": "^18.3.0",
+    "jest": "^29.2.1",
+    "jest-expo": "~52.0.2",
+    "react-test-renderer": "18.3.1",
+    "typescript": "^5.3.3"
+  },
+  "private": true,
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+}

services/RestService.ts

@@ -0,0 +1,72 @@
+import axios from 'axios';
+import User from "@/model/User";
+
+const API_URL = process.env.EXPO_PUBLIC_API_URL;
+const JWT_TOKEN = process.env.EXPO_PUBLIC_JWT_TOKEN;
+
+const RestService = {
+  fetchAllUser: async () => {
+    try {
+      const response = await axios.get<{ users: User[] }>(`${API_URL}/user`, {
+        headers: {
+          Authorization: `Bearer ${JWT_TOKEN}`,
+        },
+      });
+      return response.data;
+    } catch (error) {
+      throw error;
+    }
+  },
+
+  getCurrentlyPlayingSong: async (accessToken: string) => {
+    try {
+      const response = await axios.get('https://api.spotify.com/v1/me/player/currently-playing', {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      });
+      return response.data;
+    } catch (error) {
+      throw error;
+    }
+  },
+
+  sendPayloadToSocket: async (userId: string, payload: Object) => {
+    try {
+      const response = await axios.post(
+          `${API_URL}/websocket/send-message`,
+          {users: [userId], payload},
+          {
+            headers: {
+              Authorization: `Bearer ${JWT_TOKEN}`,
+              'Content-Type': 'application/json',
+            },
+          }
+      );
+      return response.data;
+    } catch (error) {
+      throw error;
+    }
+  },
+
+  broadcast: async (payload: Object) => {
+    try {
+      const response = await axios.post(
+          `${API_URL}/websocket/broadcast`,
+          {payload},
+          {
+            headers: {
+              Authorization: `Bearer ${JWT_TOKEN}`,
+              'Content-Type': 'application/json',
+            },
+          }
+      );
+      return response.data;
+    } catch (error) {
+      throw error;
+    }
+  },
+};
+
+
+export {RestService};

tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts"
+  ]
+}