feat: guest auth (#141)

* feat: Start using guest auth

* feat: Implement more functionality to work as guest

* chore: update package and tweak public route

* chore: update root package json

* chore: update web package json

---------

Co-authored-by: Aslam H <iupin5212@gmail.com>
This commit is contained in:
Anselm Eickhoff
2024-09-06 21:11:43 +01:00
committed by GitHub
parent e61aae02d5
commit 844b1ae334
16 changed files with 138 additions and 205 deletions

View File

@@ -13,7 +13,7 @@ interface GraphNode {
interface AutocompleteProps {
topics: GraphNode[]
onSelect: (topic: GraphNode) => void
onSelect: (topic: string) => void
onInputChange: (value: string) => void
}
@@ -46,18 +46,16 @@ export function Autocomplete({ topics = [], onSelect, onInputChange }: Autocompl
const handleSelect = useCallback(
(topic: GraphNode) => {
setInputValue(topic.prettyName)
// setInputValue(topicPrettyName)
setOpen(false)
onSelect(topic)
onSelect(topic.name)
},
[onSelect]
)
const handleKeyDown = useCallback(
(e: React.KeyboardEvent<HTMLDivElement>) => {
if (e.key === "Enter" && filteredTopics.length > 0) {
handleSelect(filteredTopics[0])
} else if ((e.key === "Backspace" || e.key === "Delete") && inputRef.current?.value === "") {
if ((e.key === "Backspace" || e.key === "Delete") && inputRef.current?.value === "") {
setOpen(true)
setIsInitialOpen(true)
}
@@ -65,7 +63,7 @@ export function Autocomplete({ topics = [], onSelect, onInputChange }: Autocompl
setHasInteracted(true)
}
},
[filteredTopics, handleSelect, hasInteracted]
[hasInteracted]
)
const handleInputChange = useCallback(
@@ -143,6 +141,7 @@ export function Autocomplete({ topics = [], onSelect, onInputChange }: Autocompl
{filteredTopics.map((topic, index) => (
<CommandItem
key={index}
value={topic.name}
onSelect={() => handleSelect(topic)}
className="min-h-10 rounded-none px-3 py-1.5"
>

View File

@@ -23,8 +23,8 @@ export function PublicHomeRoute() {
const raw_graph_data = React.use(graph_data_promise) as GraphNode[]
const [filterQuery, setFilterQuery] = React.useState<string>("")
const handleTopicSelect = (topicName: string) => {
router.push(`/${topicName}`)
const handleTopicSelect = (topic: string) => {
router.replace(`/${topic}`)
}
const handleInputChange = (value: string) => {
@@ -34,11 +34,7 @@ export function PublicHomeRoute() {
return (
<>
<div className="relative h-full w-screen">
<ForceGraphClient
raw_nodes={raw_graph_data}
onNodeClick={val => handleTopicSelect(val)}
filter_query={filterQuery}
/>
<ForceGraphClient raw_nodes={raw_graph_data} onNodeClick={handleTopicSelect} filter_query={filterQuery} />
<div className="absolute left-1/2 top-1/2 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 transform max-sm:px-5">
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
@@ -53,11 +49,7 @@ export function PublicHomeRoute() {
>
I want to learn
</motion.h1>
<Autocomplete
topics={raw_graph_data}
onSelect={topic => handleTopicSelect(topic.name)}
onInputChange={handleInputChange}
/>
<Autocomplete topics={raw_graph_data} onSelect={handleTopicSelect} onInputChange={handleInputChange} />
</motion.div>
</div>
</div>