···
+
import { Loading } from "@/components/primitives/Loading";
+
import { Text } from "@/components/primitives/Text";
+
import { useFacet } from "@/lib/facet";
+
import { lighten } from "@/lib/facet/src/lib/colors";
+
import type { ComAtprotoRepoStrongRef } from "@/lib/types/atproto";
+
useOAuthAgentGuaranteed,
+
useOAuthSessionGuaranteed,
+
} from "@/providers/OAuthProvider";
+
import { useCurrentPalette } from "@/providers/ThemeProvider";
+
import { useChannelsQuery } from "@/queries/hooks/useChannelsQuery";
+
import { useLatticesQuery } from "@/queries/hooks/useLatticesQuery";
+
import { useShardsQuery } from "@/queries/hooks/useShardsQuery";
+
import { Picker } from "@react-native-picker/picker";
+
import { useMutation, useQueryClient } from "@tanstack/react-query";
+
import type { Dispatch, SetStateAction } from "react";
+
import { useState } from "react";
+
import { Pressable, TextInput, View } from "react-native";
+
export const AddChannelModalContent = ({
+
setShowAddModal: Dispatch<SetStateAction<boolean>>;
+
const { semantic } = useCurrentPalette();
+
const { atoms, typography } = useFacet();
+
const [name, setName] = useState("");
+
const [topic, setTopic] = useState("");
+
const [mutationError, setMutationError] = useState<string | undefined>(
+
const agent = useOAuthAgentGuaranteed();
+
const session = useOAuthSessionGuaranteed();
+
const queryClient = useQueryClient();
+
const { useQuery: useLatticesQueryActual } = useLatticesQuery(session);
+
const { useQuery: useShardsQueryActual } = useShardsQuery(session);
+
const { queryKey: channelsQueryKey } = useChannelsQuery(session);
+
const { data: lattices, isLoading: latticesLoading } =
+
useLatticesQueryActual();
+
const { data: shards, isLoading: shardsLoading } = useShardsQueryActual();
+
const { mutate: newChannelMutation, isPending: mutationPending } =
+
mutationFn: async () => {
+
// const registerResult = await registerNewChannel({
+
// channelDomain: inputText,
+
// if (!registerResult.ok) {
+
// "Something went wrong when registering the channel.",
+
// registerResult.error,
+
// `Something went wrong when registering the channel. ${registerResult.error}`,
+
// setShowAddModal(false);
+
onSuccess: async () => {
+
await queryClient.invalidateQueries({
+
queryKey: channelsQueryKey,
+
setShowAddModal(false);
+
"Something went wrong when registering the channel.",
+
setMutationError(err.message);
+
const selectableShards = shards
+
? shards.map((shard) => ({
+
domain: shard.uri.rKey,
+
const selectableLattices = lattices
+
? lattices.map((lattice) => ({
+
domain: lattice.uri.rKey,
+
const [selectedShard, setSelectedShard] = useState<
+
Omit<ComAtprotoRepoStrongRef, "$type">
+
>(selectableShards[0].ref);
+
const [selectedLattice, setSelectedLattice] = useState<
+
Omit<ComAtprotoRepoStrongRef, "$type">
+
>(selectableLattices[0].ref);
+
const isLoading = latticesLoading && shardsLoading;
+
selectedShard: JSON.stringify(selectedShard),
+
selectedLattice: JSON.stringify(selectedLattice),
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- must explicitly check because we are deriving from an array.
+
const readyToSubmit = !!(selectedShard && selectedLattice && name.trim());
+
backgroundColor: semantic.surface,
+
borderRadius: atoms.radii.lg,
+
<View style={{ gap: 4 }}>
+
borderColor: semantic.borderVariant,
+
fontFamily: typography.families.primary,
+
typography.weights.byName.extralight,
+
onChangeText={(newName) => {
+
const coerced = newName
+
placeholderTextColor={semantic.textPlaceholder}
+
<View style={{ gap: 4 }}>
+
<Text>(optional) Topic:</Text>
+
borderColor: semantic.borderVariant,
+
fontFamily: typography.families.primary,
+
typography.weights.byName.extralight,
+
onChangeText={setTopic}
+
placeholder="General discussion channel"
+
placeholderTextColor={semantic.textPlaceholder}
+
<View style={{ gap: 4 }}>
+
<Text>Shard (store at):</Text>
+
{/* TODO: for native, we want to render this with a bottom sheet instead*/}
+
? shards.map((shard) => ({
+
domain: shard.uri.rKey,
+
$type: "com.atproto.repo.strongRef",
+
setSelectedShard={setSelectedShard}
+
<View style={{ gap: 4 }}>
+
<Text>Lattice (route through):</Text>
+
{/* TODO: for native, we want to render this with a bottom sheet instead*/}
+
? lattices.map((lattice) => ({
+
domain: lattice.uri.rKey,
+
$type: "com.atproto.repo.strongRef",
+
setSelectedLattice={setSelectedLattice}
+
disabled={!readyToSubmit}
+
<Loading size="small" />
+
backgroundColor: readyToSubmit
+
? lighten(semantic.primary, 7)
+
: semantic.textPlaceholder,
+
borderRadius: atoms.radii.lg,
+
typography.weights.byName.normal,
+
{ color: semantic.textInverse },
+
ref: ComAtprotoRepoStrongRef;
+
setSelectedShard: Dispatch<SetStateAction<ComAtprotoRepoStrongRef>>;
+
onValueChange={(_, idx) => {
+
setSelectedShard(shards[idx].ref);
+
{shards.map((shard) => (
+
<Picker.Item label={shard.domain} key={shard.domain} />
+
const SelectLattices = ({
+
ref: ComAtprotoRepoStrongRef;
+
setSelectedLattice: Dispatch<SetStateAction<ComAtprotoRepoStrongRef>>;
+
onValueChange={(_, idx) => {
+
setSelectedLattice(lattices[idx].ref);
+
{lattices.map((lattice) => (
+
<Picker.Item label={lattice.domain} key={lattice.domain} />
gmstn.systems