mirror of
https://github.com/linsa-io/linsa.git
synced 2026-01-12 12:20:23 +01:00
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:
@@ -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"
|
||||
>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user