Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix useCombinedConceptIndexDataset #22

Merged
merged 3 commits into from
Oct 7, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions components/ConceptBody.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,12 @@ function CreateNote({ conceptName, onNoteBodyChange }) {
)
}

export default function ConceptBody({ concept, note, noteError, conceptPrefix, conceptName, tagPrefix, onNoteBodyChange, conceptNames, editorId, panelStartsOpen = false }) {
export default function ConceptBody({
concept, note, noteError, conceptPrefix, conceptIndex,
conceptName, tagPrefix, onNoteBodyChange, conceptNames, editorId, panelStartsOpen = false,
workspaceSlug, webId
}) {
const [panelOpen, setPanelOpen] = useState(panelStartsOpen)

return (

<div className="relative">
Expand Down Expand Up @@ -66,7 +69,8 @@ export default function ConceptBody({ concept, note, noteError, conceptPrefix, c
leaveTo="translate-x-full"
>
<ConnectionsPanel
concept={concept} conceptPrefix={conceptPrefix} tagPrefix={tagPrefix}
concept={concept} conceptName={conceptName} conceptPrefix={conceptPrefix} tagPrefix={tagPrefix}
webId={webId} workspaceSlug={workspaceSlug} conceptIndex={conceptIndex}
onClose={() => setPanelOpen(false)} />
</Transition>
</div>
Expand Down
6 changes: 3 additions & 3 deletions components/ConceptEditor.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,10 @@ function useAutosave(note, save) {
return { onChange: setUpdatedValue }
}

export default function ConceptEditor({ webId, workspaceSlug, concept, conceptName, note, noteError, maybeSaveNoteBody, editorId }) {
export default function ConceptEditor({ webId, workspaceSlug, concept, conceptName, conceptIndex, note, noteError, maybeSaveNoteBody, editorId }) {
const { workspace } = useWorkspace(webId, workspaceSlug)
const conceptPrefix = workspace && getUrl(workspace, US.conceptPrefix);
const tagPrefix = workspace && getUrl(workspace, US.tagPrefix);

const { onChange: onNoteBodyChange } = useAutosave(note, maybeSaveNoteBody)

const conceptNames = useConceptNames(webId)
Expand All @@ -54,6 +53,7 @@ export default function ConceptEditor({ webId, workspaceSlug, concept, conceptNa
saveNoteBody={maybeSaveNoteBody}
tagPrefix={tagPrefix} conceptPrefix={conceptPrefix}
onNoteBodyChange={onNoteBodyChange}
conceptNames={conceptNames} />
conceptNames={conceptNames} conceptIndex={conceptIndex}
webId={webId} workspaceSlug={workspaceSlug} />
)
}
5 changes: 4 additions & 1 deletion components/ConceptPage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useProfile, useMyProfile } from "swrlit";

import { urlSafeIdToConceptName } from "../utils/uris";
import { useConceptAndNote } from '../hooks/app';
import { useCombinedConceptIndexDataset } from '../hooks/concepts'

import NoteHeader from './NoteHeader';
import ConceptEditor from './ConceptEditor';
Expand All @@ -12,13 +13,15 @@ export default function ConceptPage({ editorId = 'concept-page', webId, workspac
const { concept, note, noteError, maybeSaveNoteBody, saving } = useConceptAndNote(webId, workspaceSlug, conceptName)
const { profile: authorProfile } = useProfile(webId);
const { profile: currentUserProfile } = useMyProfile();
const { index } = useCombinedConceptIndexDataset(webId, workspaceSlug);
return (
<div>
<WebMonetization webId={webId} />
<NoteHeader concept={concept} conceptName={conceptName} authorProfile={authorProfile}
currentUserProfile={currentUserProfile} />
<ConceptEditor webId={webId} workspaceSlug={workspaceSlug} slug={slug}
concept={concept} conceptName={conceptName} editorId={conceptName} note={note} noteError={noteError} maybeSaveNoteBody={maybeSaveNoteBody} />
conceptIndex={index} concept={concept} conceptName={conceptName} editorId={conceptName}
note={note} noteError={noteError} maybeSaveNoteBody={maybeSaveNoteBody} />
</div>
)
}
116 changes: 33 additions & 83 deletions components/ConnectionsPanel.jsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,14 @@
import { useState, forwardRef } from 'react'
import { useState, forwardRef, Suspense } from 'react'
import { asUrl } from '@inrupt/solid-client'
import { useWebId } from 'swrlit'
import { namedNode } from "@rdfjs/dataset";
import Link from 'next/link'

import { US } from "../vocab";
import {
getTags, getLinks, tagUrlToTagName,
getTags, getLinks, tagUrlToTagName,
conceptIdFromUri,
conceptUrisThatReference,
} from '../model/concept'
} from '../model/concept'
import Label from './Label'
import { notePath, urlSafeIdToConceptName } from "../utils/uris";
import { useWorkspaceContext } from "../contexts/WorkspaceContext";
import {
useConceptIndex,
useCombinedConceptIndex,
useConcept,
useConceptNames
} from "../hooks/concepts";

import { Close as CloseIcon } from "./icons"
import ConnectionsTabs from './ConnectionsTabs'

Expand All @@ -38,7 +27,6 @@ function LinkToConcept({ uri, webId, workspaceSlug, ...props }) {
const id = conceptIdFromUri(uri);
const name = urlSafeIdToConceptName(id);
const url = notePath(webId, workspaceSlug, name)

return (
<Link href={url}>
<a>
Expand All @@ -48,96 +36,57 @@ function LinkToConcept({ uri, webId, workspaceSlug, ...props }) {
);
}

function LinksTo({ name }) {
const webId = useWebId();
const { slug: workspaceSlug } = useWorkspaceContext();
const { concept } = useConcept(webId, workspaceSlug, name);
const conceptUris = concept && getUrlAll(concept, US.refersTo);
return (
<ul>
{conceptUris &&
conceptUris.map((uri) => (
<li key={uri}>
<LinkToConcept uri={uri} />
</li>
))}
</ul>
);
}

function LinksFrom({ conceptUri }) {
const webId = useWebId();
const { slug: workspaceSlug } = useWorkspaceContext();
const { index } = useCombinedConceptIndex(webId, workspaceSlug);
const linkingConcepts = index.match(
null,
namedNode(US.refersTo),
namedNode(conceptUri)
);
return (
<ul>
{conceptUrisThatReference(index, conceptUri).map((uri) => (
<li key={uri}>
<LinkToConcept uri={uri} />
</li>
))}
</ul>
);
}

function useLinksTo(concept) {
function linksToConceptInIndex(concept, conceptIndex) {
const conceptUri = asUrl(concept)
const webId = useWebId();
const { slug: workspaceSlug } = useWorkspaceContext();
// TODO: useCombinedConceptIndex is broken after some changes in the solid library - fix!
const { index } = useCombinedConceptIndex(webId, workspaceSlug);
const linkingConcepts = index.match(
null,
namedNode(US.refersTo),
namedNode(conceptUri)
);
return linkingConcepts;
return conceptUrisThatReference(conceptIndex, conceptUri);
}

function LinksSection({ concept, conceptPrefix }) {
const webId = useWebId();
const { slug: workspaceSlug } = useWorkspaceContext();
function LinksSection({ concept, conceptName, webId, workspaceSlug, conceptIndex }) {
const links = getLinks(concept)

// //TODO
// const linksTo = useLinksTo(concept)
//console.log("LINKS TO", linksTo)

const linksTo = conceptIndex ? linksToConceptInIndex(concept, conceptIndex) : []

return (
<div className="p-6">
{
links && (links.map(link => (
<LinkToConcept uri={link} webId={webId} workspaceSlug={workspaceSlug} />
)))
}
<h4 className="text-lg mb-2">links from {conceptName}</h4>
<div className="flex flex-row flex-wrap gap-3">
{
links && (links.map(link => (
<LinkToConcept key={link} uri={link} webId={webId} workspaceSlug={workspaceSlug} />
)))
}
</div>
<h4 className="text-lg mt-4 mb-2">links to {conceptName}</h4>
<div className="flex flex-row flex-wrap gap-3">
{
linksTo && (linksTo.map(link => (
<LinkToConcept key={link} uri={link} webId={webId} workspaceSlug={workspaceSlug} />
)))
}
</div>
</div>
)
}

function ConnectionsSection({ subSection, concept, tagPrefix, conceptPrefix }) {
function ConnectionsSection({ subSection, concept, conceptName, tagPrefix, conceptPrefix, webId, workspaceSlug, conceptIndex }) {
switch (subSection) {
case 'links':
return (
<LinksSection concept={concept} conceptPrefix={conceptPrefix}>
Link
</LinksSection>
<Suspense fallback={<div>loading..</div>}>
<LinksSection concept={concept} conceptName={conceptName} conceptPrefix={conceptPrefix} webId={webId} workspaceSlug={workspaceSlug} conceptIndex={conceptIndex}>
Link
</LinksSection>
</Suspense>
)
case 'tags':
return (
<TagsSection concept={concept} tagPrefix={tagPrefix}>
<TagsSection concept={concept} conceptName={conceptName} tagPrefix={tagPrefix}>
Tags
</TagsSection>
)
}
}

const ConnectionsPanel = forwardRef(({ onClose, concept, tagPrefix, conceptPrefix, className }, ref) => {
const ConnectionsPanel = forwardRef(({ onClose, concept, conceptName, tagPrefix, conceptPrefix, className, webId, workspaceSlug, conceptIndex }, ref) => {
const [activeTab, setActiveTab] = useState('links')
return (
<div className={`flex flex-col ${className}`} ref={ref}>
Expand All @@ -146,7 +95,8 @@ const ConnectionsPanel = forwardRef(({ onClose, concept, tagPrefix, conceptPrefi
<CloseIcon className="w-6 h-6 text-gray-700 cursor-pointer" onClick={onClose} />
</div>
<ConnectionsTabs active={activeTab} onChange={setActiveTab} />
<ConnectionsSection subSection={activeTab} concept={concept} tagPrefix={tagPrefix} conceptPrefix={conceptPrefix} />
<ConnectionsSection subSection={activeTab} concept={concept} conceptName={conceptName} tagPrefix={tagPrefix} conceptPrefix={conceptPrefix}
webId={webId} workspaceSlug={workspaceSlug} conceptIndex={conceptIndex} />
</div>
)
})
Expand Down
Loading