NextGraph
/
nao-web-ui
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove the datacontext, we will useResource and other tools directly from LDO

Browse Source
main
Christopher Maujean 2 months ago
parent 63621ab968
commit f8296831fc
5 changed files with 31 additions and 103 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      CLAUDE.md
  2. 61
      src/App.tsx
  3. 12
      src/contexts/DataContext.ts
  4. 10
      src/hooks/useData.ts
  5. 49
      src/providers/DataProvider.tsx

2
CLAUDE.md
Unescape View File

@ -27,6 +27,8 @@ This is a React/TypeScript NAO (Network of Authentic Others) community managemen
- Always completely implement any functionality as requested. - Always completely implement any functionality as requested.
- Do not hallucinate, or pretend - Do not hallucinate, or pretend
- Always use the most up to date official documentation for libraries or techniques - Always use the most up to date official documentation for libraries or techniques
- prefer zustand stores above useState
- use LDO and nextgraphauth.session for persistent data (contacts for example) consider this to be our "database"
# Code Style # Code Style
- Use react hooks: useMemo, useCallback, and other standard hooks - Use react hooks: useMemo, useCallback, and other standard hooks

61
src/App.tsx
Unescape View File

@ -2,7 +2,6 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { ThemeProvider } from '@mui/material/styles'; import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline'; import CssBaseline from '@mui/material/CssBaseline';
import { OnboardingProvider } from '@/contexts/OnboardingContext'; import { OnboardingProvider } from '@/contexts/OnboardingContext';
import { DataProvider } from '@/providers/DataProvider';
import { BrowserNGLdoProvider, useNextGraphAuth } from '@/lib/nextgraph'; import { BrowserNGLdoProvider, useNextGraphAuth } from '@/lib/nextgraph';
import type { NextGraphAuth } from '@/types/nextgraph'; import type { NextGraphAuth } from '@/types/nextgraph';
import DashboardLayout from '@/components/layout/DashboardLayout'; import DashboardLayout from '@/components/layout/DashboardLayout';
@ -39,37 +38,35 @@ const AppContent = () => {
} }
return ( return (
<DataProvider> <OnboardingProvider>
<OnboardingProvider> <Router>
<Router> <Routes>
<Routes> <Route path="/onboarding" element={<SocialContractPage />} />
<Route path="/onboarding" element={<SocialContractPage />} /> <Route path="/join-group" element={<GroupJoinPage />} />
<Route path="/join-group" element={<GroupJoinPage />} />
<Route path="/*" element={
<Route path="/*" element={ <DashboardLayout>
<DashboardLayout> <Routes>
<Routes> <Route path="/" element={<FeedPage />} />
<Route path="/" element={<FeedPage />} /> <Route path="/feed" element={<FeedPage />} />
<Route path="/feed" element={<FeedPage />} /> <Route path="/import" element={<ImportPage />} />
<Route path="/import" element={<ImportPage />} /> <Route path="/contacts" element={<ContactListPage />} />
<Route path="/contacts" element={<ContactListPage />} /> <Route path="/contacts/:id" element={<ContactViewPage />} />
<Route path="/contacts/:id" element={<ContactViewPage />} /> <Route path="/groups" element={<GroupPage />} />
<Route path="/groups" element={<GroupPage />} /> <Route path="/groups/:groupId" element={<GroupDetailPage />} />
<Route path="/groups/:groupId" element={<GroupDetailPage />} /> <Route path="/groups/:groupId/info" element={<GroupInfoPage />} />
<Route path="/groups/:groupId/info" element={<GroupInfoPage />} /> <Route path="/posts" element={<PostsOffersPage />} />
<Route path="/posts" element={<PostsOffersPage />} /> <Route path="/messages" element={<MessagesPage />} />
<Route path="/messages" element={<MessagesPage />} /> <Route path="/notifications" element={<NotificationsPage />} />
<Route path="/notifications" element={<NotificationsPage />} /> <Route path="/account" element={<AccountPage />} />
<Route path="/account" element={<AccountPage />} /> <Route path="/invite" element={<InvitationPage />} />
<Route path="/invite" element={<InvitationPage />} /> <Route path="/onboarding/setup" element={<OnboardingPage />} />
<Route path="/onboarding/setup" element={<OnboardingPage />} /> </Routes>
</Routes> </DashboardLayout>
</DashboardLayout> } />
} /> </Routes>
</Routes> </Router>
</Router> </OnboardingProvider>
</OnboardingProvider>
</DataProvider>
); );
}; };

12
src/contexts/DataContext.ts
Unescape View File

@ -1,12 +0,0 @@
import { createContext } from "react";
import type { Container } from "@/.ldo/container.typings";
interface DataContextType {
contactsContainer: Container | undefined;
contacts: Array<{ "@id": string }>;
isContactsLoading: boolean;
containerOverlay: string;
}
export const DataContext = createContext<DataContextType | undefined>(undefined);
export type { DataContextType };

10
src/hooks/useData.ts
Unescape View File

@ -1,10 +0,0 @@
import { useContext } from "react";
import { DataContext } from "@/contexts/DataContext";
export const useData = () => {
const context = useContext(DataContext);
if (!context) {
throw new Error("useData must be used within a DataProvider");
}
return context;
};

49
src/providers/DataProvider.tsx
Unescape View File

@ -1,49 +0,0 @@
import type React from "react";
import type { ReactNode } from "react";
import { useNextGraphAuth } from "@/lib/nextgraph";
import { useResource, useSubject } from "@/lib/nextgraph";
import { ContainerShapeType } from "@/.ldo/container.shapeTypes";
import type { NextGraphAuth } from "@/types/nextgraph";
import { DataContext, type DataContextType } from "@/contexts/DataContext";
interface DataProviderProps {
children: ReactNode;
}
export const DataProvider: React.FC<DataProviderProps> = ({ children }) => {
const nextGraphAuth = useNextGraphAuth() as NextGraphAuth;
const { session } = nextGraphAuth || {};
const isAuthenticated = Boolean(session?.ng);
const canSubscribe =
isAuthenticated && session?.privateStoreId && session?.ng;
useResource(canSubscribe ? `did:ng:${session?.privateStoreId}` : undefined, {
subscribe: true,
});
const contactsContainer = useSubject(
ContainerShapeType,
canSubscribe && session?.privateStoreId
? `did:ng:${session.privateStoreId.substring(0, 46)}`
: undefined,
);
const contacts = contactsContainer?.contains
? Array.from(contactsContainer.contains)
: [];
const isContactsLoading = canSubscribe && !contactsContainer;
const containerOverlay = session?.privateStoreId
? session.privateStoreId.substring(46)
: "";
const value: DataContextType = {
contactsContainer,
contacts,
isContactsLoading,
containerOverlay,
};
return <DataContext.Provider value={value}>{children}</DataContext.Provider>;
};
Write Preview
Loading…
Cancel
Save