Add delete button for the avatar

This commit is contained in:
Zoe Roux 2024-02-04 23:32:49 +01:00
parent 666477e448
commit eb4f88bc60
2 changed files with 33 additions and 22 deletions

View File

@ -18,7 +18,7 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>. * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/ */
import { View, ViewStyle, Image } from "react-native"; import { View, ViewStyle, Image, ImageProps } from "react-native";
import { useYoshiki, px, Stylable } from "yoshiki/native"; import { useYoshiki, px, Stylable } from "yoshiki/native";
import { Icon } from "./icons"; import { Icon } from "./icons";
import { P } from "./text"; import { P } from "./text";
@ -102,7 +102,7 @@ export const Avatar = forwardRef<
alt={alt} alt={alt}
width={size} width={size}
height={size} height={size}
{...css({ position: "absolute" })} {...css({ position: "absolute" }) as ImageProps}
/> />
</Container> </Container>
); );

View File

@ -136,26 +136,37 @@ export const AccountSettings = () => {
label={t("settings.account.avatar.label")} label={t("settings.account.avatar.label")}
description={t("settings.account.avatar.description")} description={t("settings.account.avatar.description")}
> >
<Button <View {...css({ flexDirection: "row", gap: ts(1) })}>
text={t("misc.edit")} <Button
onPress={async () => { text={t("misc.edit")}
const img = await ImagePicker.launchImageLibraryAsync({ onPress={async () => {
mediaTypes: ImagePicker.MediaTypeOptions.Images, const img = await ImagePicker.launchImageLibraryAsync({
aspect: [1, 1], mediaTypes: ImagePicker.MediaTypeOptions.Images,
quality: 1, aspect: [1, 1],
base64: true, quality: 1,
}); base64: true,
if (img.canceled || img.assets.length !== 1) return; });
const data = dataURItoBlob(img.assets[0].uri); if (img.canceled || img.assets.length !== 1) return;
const formData = new FormData(); const data = dataURItoBlob(img.assets[0].uri);
formData.append("picture", data); const formData = new FormData();
await queryFn({ formData.append("picture", data);
method: "POST", await queryFn({
path: ["auth", "me", "logo"], method: "POST",
formData, path: ["auth", "me", "logo"],
}); formData,
}} });
/> }}
/>
<Button
text={t("misc.delete")}
onPress={async () => {
await queryFn({
method: "DELETE",
path: ["auth", "me", "logo"],
});
}}
/>
</View>
</Preference> </Preference>
<Preference icon={Mail} label={t("settings.account.email.label")} description={account.email}> <Preference icon={Mail} label={t("settings.account.email.label")} description={account.email}>
<Button <Button