add kbar \o/
This commit is contained in:
parent
4719b4a7c6
commit
6de86fc4de
5 changed files with 247 additions and 255 deletions
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
|
@ -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
|
||||||
|
|
|
@ -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]
|
||||||
|
|
8
lib/chiya_web/controllers/api_controller.ex
Normal file
8
lib/chiya_web/controllers/api_controller.ex
Normal 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
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue