add kbar \o/

This commit is contained in:
Inhji 2023-03-22 07:31:38 +01:00
parent 4719b4a7c6
commit 6de86fc4de
5 changed files with 247 additions and 255 deletions

View file

@ -1,4 +1,4 @@
import React from 'react' import React, {useState, useEffect, useMemo} from 'react'
import { import {
KBarProvider, KBarProvider,
KBarPortal, KBarPortal,
@ -8,7 +8,8 @@ import {
KBarResults, KBarResults,
useMatches, useMatches,
useRegisterActions, useRegisterActions,
useKBar useKBar,
createAction
} from "kbar"; } from "kbar";
import classNames from 'classnames'; import classNames from 'classnames';
@ -144,7 +145,7 @@ const ResultItem = React.forwardRef(
} }
); );
const actions = [ const staticActions = [
{ {
id: "user", id: "user",
name: "User", name: "User",
@ -224,51 +225,31 @@ const actions = [
} }
] ]
const dynamicActionsList = { function DynamicResultsProvider() {
id: "public.home", const [actions, setActions] = useState([])
name: "Go Home", const [notes, setNotes] = useState([])
shortcut: ["x"], const [rerender, setRerender] = useState(true)
keywords: "public",
perform: () => (window.location.pathname = "/"),
}
function DynamicResultsProvider({children}) { useEffect(() => {
//const [search, setSearch] = React.useState(""); fetch("/api/admin/notes")
//useKBar(state => console.log("state")) .then(resp => resp.json())
/* .then(json => setNotes(json.notes))
const dynamicActions = React.useMemo(() => { }, [rerender])
const searchQuery = search
//const results = await getResults(search);
//return results.map(r => createAction(...));
console.log(searchQuery)
return dynamicActionsInner
}, [search])
*/
// const {query, search, options} = useKBar((state) => ({ search: state.searchQuery }))
// const dynamicActions = React.useMemo(() =>{
// return dynamicActionsInner
// }, [search])
const { query } = useKBar(state => ({ query: state.query })) const noteActions = useMemo(() => notes.map(note => createAction({
const [dynamicActions, setDynamicActions] = React.useState([]) id: note.slug,
name: note.name,
keywords: note.channels.map(c => c.name),
perform: () => (window.location.pathname = `/admin/notes/${note.id}`),
})), [notes])
React.useEffect(() => { useRegisterActions([...staticActions, ...noteActions], [noteActions])
console.log(query)
//fetchUsers(query).then(setUsers)
setDynamicActions(dynamicActionsList)
}, [query])
console.log("mount")
useRegisterActions(dynamicActionsList, [dynamicActions])
return ([children])
} }
export default function KBar() { export default function KBar() {
return ( return (
<KBarProvider actions={actions}> <KBarProvider actions={staticActions}>
<DynamicResultsProvider> <DynamicResultsProvider />
<KBarPortal> <KBarPortal>
<KBarPositioner> <KBarPositioner>
<KBarAnimator style={animatorStyle} className="bg-gray-50 border border-gray-100 shadow-lg"> <KBarAnimator style={animatorStyle} className="bg-gray-50 border border-gray-100 shadow-lg">
@ -277,7 +258,6 @@ export default function KBar() {
</KBarAnimator> </KBarAnimator>
</KBarPositioner> </KBarPositioner>
</KBarPortal> </KBarPortal>
</DynamicResultsProvider>
</KBarProvider> </KBarProvider>
) )
} }

View file

@ -2,6 +2,7 @@ defmodule Chiya.Channels.Channel do
use Ecto.Schema use Ecto.Schema
import Ecto.Changeset import Ecto.Changeset
@derive {Jason.Encoder, only: [:id, :name, :content, :slug, :visibility]}
schema "channels" do schema "channels" do
field :content, :string field :content, :string
field :name, :string field :name, :string

View file

@ -2,6 +2,7 @@ defmodule Chiya.Notes.Note do
use Ecto.Schema use Ecto.Schema
import Ecto.Changeset import Ecto.Changeset
@derive {Jason.Encoder, only: [:id, :name, :content, :slug, :channels]}
schema "notes" do schema "notes" do
field :content, :string field :content, :string
field :kind, Ecto.Enum, values: [:post, :bookmark] field :kind, Ecto.Enum, values: [:post, :bookmark]

View file

@ -0,0 +1,8 @@
defmodule ChiyaWeb.ApiController do
use ChiyaWeb, :controller
def notes(conn, _params) do
notes = Chiya.Notes.list_notes()
json(conn, %{notes: notes})
end
end

View file

@ -25,9 +25,11 @@ defmodule ChiyaWeb.Router do
end end
# Other scopes may use custom stacks. # Other scopes may use custom stacks.
# scope "/api", ChiyaWeb do scope "/api", ChiyaWeb do
# pipe_through :api pipe_through :api
# end
get "/admin/notes", ApiController, :notes
end
# Enable LiveDashboard and Swoosh mailbox preview in development # Enable LiveDashboard and Swoosh mailbox preview in development
if Application.compile_env(:chiya, :dev_routes) do if Application.compile_env(:chiya, :dev_routes) do