StarAppeal/matrix-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactoring ig

Browse Source
This commit is contained in:
StarAppeal
2025-09-03 01:43:26 +02:00
parent 0a80220e62
commit a9eaef3a00
9 changed files with 38 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(tabs)/modes/text.tsx
+2 -4
View File
@@ -13,7 +13,7 @@ export default function TextScreen() {
return (
<ThemedBackground>
<View style={{ padding: 20, gap: 10 }}> {/* Container für Input + Picker */}
<View style={{ padding: 20, gap: 10 }}>
<ThemedTextInput
label="Text"
returnKeyType="next"
@@ -34,9 +34,7 @@ export default function TextScreen() {
</View>
<View style={{ paddingHorizontal: 20, marginTop: 20 }}>
<ThemedButton mode="contained" onPress={() => console.log(textProps)}>
Cooler Knopf
</ThemedButton>
<ThemedButton mode="contained" onPress={() => console.log(textProps)} title={"Cooler Knopf"} />
</View>
</ThemedBackground>
);
app/(tabs)/settings.tsx
+4 -8
View File
@@ -42,27 +42,23 @@ export default function SettingsScreen() {
jwtToken={jwtToken!}
disabled={!!authenticatedUser?.spotifyConfig}
/>
{!!authenticatedUser?.spotifyConfig && ( <ThemedButton mode={"outlined"} onPress={() => {
{!!authenticatedUser?.spotifyConfig && ( <ThemedButton mode={"outlined"} title={"Remove Spotify"} onPress={() => {
const rest = new RestService(jwtToken);
rest.updateSelfSpotifyConfig().then((result) => {
console.log("Spotify Login entfernt");
console.log(result);
refreshUser()
})
}}>
Remove Spotify
</ThemedButton>)}
}}/>)}
</View>
<ThemedButton mode={"outlined"} onPress={() => {
<ThemedButton mode={"outlined"} title={"Logout"} onPress={() => {
console.log("Button pressed");
logout().then(() => {
router.replace("/login");
});
}
}>
Logout
</ThemedButton>
}/>
</ThemedBackground>
);
}
app/login.tsx
+3 -9
View File
@@ -39,12 +39,8 @@ export default function LoginScreen() {
<ThemedBackground>
<Logo/>
<ThemedHeader>Du bist bereits eingeloggt. Was machst'n hier?</ThemedHeader>
<ThemedButton mode="contained" onPress={logout}>
Logout
</ThemedButton>
<ThemedButton mode="outlined" onPress={() => router.push("/")}>
Zurück
</ThemedButton>
<ThemedButton mode="contained" onPress={logout} title={"Logout"} />
<ThemedButton mode="outlined" onPress={() => router.push("/")} title={"Zurück"} />
</ThemedBackground>
)
}
@@ -72,9 +68,7 @@ export default function LoginScreen() {
errorText={error?.message}
autoComplete="password"
/>
<ThemedButton mode="outlined" onPress={onLoginPressed}>
Log in
</ThemedButton>
<ThemedButton mode="outlined" onPress={onLoginPressed} title={"Login"} />
<ThemeToggleButton />
</ThemedBackground>
);
src/components/ChangePasswordModal.tsx
+3 -7
View File
@@ -1,11 +1,12 @@
import React, {useState} from "react";
import {Button, Paragraph} from "react-native-paper";
import { Paragraph} from "react-native-paper";
import {useTheme} from "@/src/context/ThemeProvider";
import {StyleSheet, View} from "react-native";
import {RestService} from "@/src/services/RestService";
import {useAuth} from "@/src/context/AuthProvider";
import CustomModal from "@/src/components/themed/CustomModal";
import PasswordInput from "@/src/components/PasswordInput";
import ThemedButton from "@/src/components/themed/ThemedButton";
export default function ChangePasswordModal() {
@@ -73,12 +74,7 @@ export default function ChangePasswordModal() {
/>
<View style={styles.buttonGroup}>
<Button mode="contained" onPress={handleConfirm}>
Bestätigen
</Button>
<Button mode="elevated" onPress={resetModal}>
Abbrechen
</Button>
<ThemedButton mode="contained" onPress={handleConfirm} title={"Bestätigen"} />
</View>
</View>
</CustomModal>
src/components/NotAuthenticated.tsx
+1 -3
View File
@@ -20,9 +20,7 @@ export default function NotAuthenticated() {
<ThemedParagraph>
You are not authenticated. Please log in to view this content.
</ThemedParagraph>
<ThemedButton mode="outlined" onPress={() => router.push("/login")}>
Login
</ThemedButton>
<ThemedButton mode="outlined" onPress={() => router.push("/login")} title={"Login"} />
</ThemedBackground>
);
}
src/components/SpotifyAuthButton.tsx
+1 -3
View File
@@ -21,9 +21,7 @@ const SpotifyAuthButton = ({onAuthSuccess, jwtToken, disabled}: SpotifyAuthButto
onPress={promptAuth}
mode={"outlined"}
disabled={disabled}
>
{isReady ? 'Sign in with Spotify' : 'Loading...'}
</ThemedButton>
title={isReady ? 'Sign in with Spotify' : 'Loading...'} />
);
};
src/components/themed/CustomColorPicker.tsx
+11 -12
View File
@@ -1,6 +1,8 @@
import React, {useEffect, useState} from 'react';
import {Button, Modal, StyleSheet, View, TouchableWithoutFeedback, Dimensions} from 'react-native';
import {StyleSheet, View, Dimensions} from 'react-native';
import ColorPicker, {Panel1, Swatches, Preview, HueSlider, ColorFormatsObject} from 'reanimated-color-picker';
import CustomModal from "@/src/components/themed/CustomModal";
import ThemedButton from "@/src/components/themed/ThemedButton";
interface CustomColorPickerProps {
defaultColor?: [number, number, number];
@@ -8,7 +10,6 @@ interface CustomColorPickerProps {
}
export default function CustomColorPicker({defaultColor = [255, 255, 255], onSelect}: CustomColorPickerProps) {
const [showModal, setShowModal] = useState(false);
const [currentColor, setCurrentColor] = useState(defaultColor);
const rgbToHex = ([r, g, b]: [number, number, number]) =>
@@ -36,18 +37,16 @@ export default function CustomColorPicker({defaultColor = [255, 255, 255], onSel
const rgb = hexToRgbArray(pickerHex);
setCurrentColor(rgb);
onSelect(rgb);
setShowModal(false);
console.log(rgb)
};
const resetModal = () => {
setCurrentColor(defaultColor);
}
return (
<View style={styles.container}>
<Button title="Color Picker" onPress={() => setShowModal(true)}/>
<Modal visible={showModal} transparent animationType="fade" onRequestClose={() => setShowModal(false)}>
<TouchableWithoutFeedback onPress={() => setShowModal(false)}>
<View style={styles.overlay}/>
</TouchableWithoutFeedback>
<CustomModal resetCallback={resetModal} buttonTitle={"Color Picker"} buttonMode={"outlined"}>
<View style={styles.modalWrapper}>
<View style={[styles.modalContent, {width: pickerWidth}]}>
<ColorPicker
@@ -62,11 +61,11 @@ export default function CustomColorPicker({defaultColor = [255, 255, 255], onSel
</ColorPicker>
<View style={styles.buttonContainer}>
<Button title="Ok" onPress={handleOk}/>
<ThemedButton mode="contained" onPress={handleOk} title={"Bestätigen"} />
</View>
</View>
</View>
</Modal>
</CustomModal>
</View>
);
}
src/components/themed/CustomModal.tsx
+5 -6
View File
@@ -1,15 +1,16 @@
import React, {useState} from "react";
import {Button} from "react-native-paper";
import {StyleSheet, View} from "react-native";
import {StyleSheet, TouchableWithoutFeedback, View} from "react-native";
import Modal from "react-native-modal";
import ThemedButton from "@/src/components/themed/ThemedButton";
export interface Props {
resetCallback: () => void;
children: React.ReactNode;
buttonTitle: string;
buttonMode?: 'text' | 'outlined' | 'contained';
}
export default function CustomModal({resetCallback, children, buttonTitle}: Props) {
export default function CustomModal({resetCallback, children, buttonTitle, buttonMode = "outlined"}: Props) {
const [isVisible, setIsVisible] = useState(false);
const resetModal = () => {
@@ -19,9 +20,7 @@ export default function CustomModal({resetCallback, children, buttonTitle}: Prop
return (
<>
<Button mode="outlined" onPress={() => setIsVisible(true)}>
{buttonTitle}
</Button>
<ThemedButton mode={buttonMode} onPress={() => setIsVisible(true)} title={buttonTitle} />
<Modal isVisible={isVisible} onModalHide={resetModal} onBackdropPress={resetModal} onBackButtonPress={resetModal}>
<View style={styles.modalContent}>
{children}
src/components/themed/ThemedButton.tsx
+8 -6
View File
@@ -1,17 +1,18 @@
import React from "react";
import {StyleSheet} from "react-native";
import {StyleSheet, Text} from "react-native";
import {Button as PaperButton} from "react-native-paper";
import {useTheme} from "@/src/context/ThemeProvider";
type Props = {
mode: "text" | "outlined" | "contained";
mode: "text" | "outlined" | "contained" | "elevated" | "contained-tonal"
style?: any;
children: React.ReactNode;
children?: React.ReactNode;
onPress: () => void;
disabled?: boolean;
title: string;
}
export default function ThemedButton({mode, style, ...props}: Props) {
export default function ThemedButton({mode, style, title, ...props}: Props) {
const {theme} = useTheme();
return (
<PaperButton
@@ -23,14 +24,15 @@ export default function ThemedButton({mode, style, ...props}: Props) {
labelStyle={styles.text}
mode={mode}
{...props}
/>
>
<Text>{title}</Text>
</PaperButton>
);
}
const styles =
StyleSheet.create({
button: {
width: "100%",
marginVertical: 10,
paddingVertical: 2,
},