apps/mobile/app/dashboard/lists/new.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

import React, { useState } from "react";
import { View } from "react-native";
import { router } from "expo-router";
import { Button } from "@/components/ui/Button";
import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
import { Input } from "@/components/ui/Input";
import { Text } from "@/components/ui/Text";
import { useToast } from "@/components/ui/Toast";

import { useCreateBookmarkList } from "@karakeep/shared-react/hooks/lists";

const NewListPage = () => {
  const dismiss = () => {
    router.back();
  };
  const { toast } = useToast();
  const [text, setText] = useState("");

  const { mutate, isPending } = useCreateBookmarkList({
    onSuccess: () => {
      dismiss();
    },
    onError: () => {
      toast({
        message: "Something went wrong",
        variant: "destructive",
      });
    },
  });

  const onSubmit = () => {
    mutate({
      name: text,
      icon: "🚀",
    });
  };

  return (
    <CustomSafeAreaView>
      <View className="gap-2 px-4">
        <View className="flex flex-row items-center gap-1">
          <Text className="shrink p-2">🚀</Text>
          <Input
            className="flex-1 bg-card"
            onChangeText={setText}
            placeholder="List Name"
            autoFocus
            autoCapitalize={"none"}
          />
        </View>
        <Button disabled={isPending} onPress={onSubmit}>
          <Text>Save</Text>
        </Button>
      </View>
    </CustomSafeAreaView>
  );
};

export default NewListPage;