\n \n

Spaces

\n {context && }\n

\n\n \n

\n \n

\n )\n}\n\nfunction Spaces() {\n const queryFn = async () => {\n const agoraChannels = await fetch(`/api/channels`)\n .then((r) => r.json())\n .then((r) => r?.data?.channels)\n const { data: dbSpaces, error } = await supabase.from('spaces').select().limit(1000)\n\n const results = agoraChannels.map((channel: any) => {\n const space = dbSpaces.find((space: any) => space.id == channel.channel_name)\n return { ...channel, ...(space || {}) }\n })\n\n console.log('Spaces', agoraChannels, dbSpaces, results)\n return results\n }\n const { data: spaces } = useQuery({ queryKey: ['spaces'], queryFn })\n\n if (!spaces) {\n return (\n

\n \n

\n )\n }\n\n if (spaces.length == 0) {\n return (\n

No live spaces

\n )\n }\n\n return (\n

\n {spaces?.map((space: any) => (\n \n ))}\n

\n )\n}\n\nfunction Space({ space }: any) {\n const navigate = useNavigate()\n\n return (\n

{space.name || space.channel_name}

\n {space.user_count} user{space.user_count == 1 ? '' : 's'}\n

\n \n

\n )\n}\n\nfunction CreateForm({}) {\n const [context, setContext] = useState()\n useEffect(() => {\n fcsdk.context.then(setContext)\n }, [])\n\n const navigate = useNavigate()\n const [name, setName] = useState('')\n\n const onCreate = async () => {\n const id = Math.random().toString(36).substring(2, 12)\n const { error } = await supabase.from('spaces').insert({ id: id, name: name, created_by: context?.user?.fid })\n navigate(`/space/${encodeURIComponent(id)}`)\n }\n\n return (\n

\n setName(e.target.value)}\n placeholder=\"Space Title\"\n autoCapitalize=\"on\"\n autoCorrect=\"on\"\n type=\"text\"\n value={name}\n />\n \n

\n )\n}\n","deleted","label",[170,171,153],"frontend","screens","permalink","https://www.val.town/x/arseniy/FarcasterSpaces/code/frontend/screens/Home.tsx","extension","actionData","errors"]