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/>.
*/
import { View, ViewStyle, Image } from "react-native";
import { View, ViewStyle, Image, ImageProps } from "react-native";
import { useYoshiki, px, Stylable } from "yoshiki/native";
import { Icon } from "./icons";
import { P } from "./text";
@ -102,7 +102,7 @@ export const Avatar = forwardRef<
alt={alt}
width={size}
height={size}
{...css({ position: "absolute" })}
{...css({ position: "absolute" }) as ImageProps}
/>
</Container>
);

View File

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