107-add-starter-packs-packed

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 static
+package-lock.json

src/api/packs.js

@@ -0,0 +1,143 @@
+import { fetchClearskyApi } from './core'; 
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import { shortenDID, unwrapShortHandle } from '.';
+import { useResolveHandleOrDid } from './resolve-handle-or-did';
+const PAGE_SIZE = 100;
+
+/**
+ * @param {string | undefined} handleOrDID
+ */
+export function usePacksCreated(handleOrDID){ 
+
+    const profileQuery = useResolveHandleOrDid(handleOrDID);
+    const shortHandle = profileQuery.data?.shortHandle;
+    return useInfiniteQuery({
+        enabled: !!shortHandle,
+        queryKey: ['starter-packs', shortHandle],
+        // @ts-expect-error shortHandle won't really be undefined because the query will be disabled
+        queryFn: ({ pageParam }) => getPacksCreated(shortHandle, pageParam),
+        initialPageParam: 1,
+        getNextPageParam: (lastPage) => lastPage.nextPage,
+      });
+}
+
+/**
+ * @param {string | undefined} handleOrDID
+ */
+export function usePacksCreatedTotal(handleOrDID){  
+  const profileQuery = useResolveHandleOrDid(handleOrDID);
+    const shortHandle = profileQuery.data?.shortHandle;
+  return useQuery({
+    enabled: !!shortHandle,
+    queryKey: ['starter-packs-total', shortHandle],
+    queryFn: () => getPacksCreatedTotal(shortHandle),
+  });
+}
+
+/**
+ * @param {string | undefined} handleOrDID
+ */
+export function usePacksPopulated(handleOrDID){ 
+  const profileQuery = useResolveHandleOrDid(handleOrDID);
+    const shortHandle = profileQuery.data?.shortHandle;
+
+  return useInfiniteQuery({
+      enabled: !!shortHandle,
+      queryKey: ['single-starter-pack', shortHandle],
+      queryFn: ({ pageParam }) => getPacksPopulated(shortHandle, pageParam),
+      initialPageParam: 1,
+      getNextPageParam: (lastPage) => lastPage.nextPage,
+    });
+} 
+
+/**
+ * @param {string | undefined} handleOrDID 
+ */
+export  function usePacksPopulatedTotal(handleOrDID){  
+  const profileQuery = useResolveHandleOrDid(handleOrDID);
+  const shortHandle = profileQuery.data?.shortHandle;
+    return useQuery({
+        enabled: !!shortHandle,
+        queryKey: ['starter-pack-total', shortHandle],
+        // @ts-expect-error shortHandle won't really be undefined because the query will be disabled
+        queryFn: () => getPacksPopulatedTotal(shortHandle),
+      }); 
+}
+
+/**
+ * @param {string} shortHandle
+ * @param {number} currentPage
+ * @returns {Promise<{
+*    starter_packs: Array<PackListEntry>,
+*    nextPage: number | null
+* }>}
+*/
+async function getPacksPopulated (shortHandle, currentPage){
+  // in PACK
+  const URL = 'single-starter-pack/' + unwrapShortHandle(shortHandle) ; 
+  // @type PackList 
+  const re = await fetchClearskyApi('v1', URL);  
+
+  const starter_packs = re.data?.starter_packs || [];
+
+  // Sort by date
+  starter_packs.sort((entry1, entry2) => {
+    const date1 = new Date(entry1.date_added).getTime();
+    const date2 = new Date(entry2.date_added).getTime();
+    return date2 - date1;
+  });
+  return {
+      starter_packs, 
+      nextPage: starter_packs.length >= PAGE_SIZE ? currentPage + 1 : null,
+  };
+
+}
+
+/**
+ * @param {string} shortHandle 
+ */
+async function getPacksPopulatedTotal(shortHandle){ 
+  const URL = 'single-starter-pack/total/' + unwrapShortHandle(shortHandle);
+
+    /** @type {{ data: { count: number; pages: number } }} */
+    const re = await fetchClearskyApi('v1', URL);
+    return re.data;
+}
+
+/**
+ * @param {string} shortHandle
+ * @param {number} currentPage
+ * @returns {Promise<{
+*    starter_packs: Array<PackListEntry>,
+*    nextPage: number | null
+* }>}
+*/
+async function getPacksCreated(shortHandle, currentPage=1){
+    // packs I started  
+    const URL ='starter-packs/' + unwrapShortHandle(shortHandle)  + (currentPage === 1 ? '' : '/' + currentPage); 
+
+    const re = (await fetchClearskyApi('v1', URL)); 
+    const starter_packs = re.data?.starter_packs || [];
+
+  // Sort by date
+  starter_packs.sort((entry1, entry2) => {
+    const date1 = new Date(entry1.date_added).getTime();
+    const date2 = new Date(entry2.date_added).getTime();
+    return date2 - date1;
+  }); 
+    return {
+      starter_packs, 
+      nextPage: starter_packs.length >= PAGE_SIZE ? currentPage + 1 : null};
+
+}
+
+/**
+ * @param {string} shortHandle
+ */
+async function getPacksCreatedTotal(shortHandle){ 
+  const URL = 'starter-packs/total/' + unwrapShortHandle(shortHandle); 
+
+  /** @type {{ data: { count: number; pages: number } }} */
+  const re = await fetchClearskyApi('v1', URL);
+  return re.data;
+}

src/api/resolve-handle-or-did.js

@@ -77,7 +77,7 @@ const queryKeyForDid = (/** @type {string | undefined | null} */ fullDID) => [
  * @param {string | undefined | null} did
  * @returns the profile data for a given DID
  */
-function useResolveDidToProfile(did) {
+export function useResolveDidToProfile(did) {
   const fullDID = unwrapShortDID(did);
   return useQuery({
     enabled: !!fullDID,

src/app.jsx

@@ -78,8 +78,7 @@ function showApp() {
       },
     },
   });
-
-  console.log('React createRoot/render');
+
   ReactDOM.createRoot(root).render(
     <React.StrictMode>
       <ThemeProvider theme={theme}>

src/common-components/account-short-entry.jsx

@@ -153,7 +153,7 @@ const delayRandomBase = Math.random() * 400;
 /**
  * @param {AccountInfo} account
  */
-function getAvatarDelay(account) {
+export function getAvatarDelay(account) {
   const avatarUrl = account?.avatarUrl;
   if (!avatarUrl) return undefined;
   let delay = avatarDelays[avatarUrl];

src/cursor-recall.html

@@ -102,8 +102,7 @@ <h2>Intervals</h2>
                 let data = await fetchClearskyApi('v1', dataEndpoint);
 
                 if (data) {
-                    if ('data' in data) {
-                        console.log(data);
+                    if ('data' in data) { 
                         displayData(data);
                     } else {
                         console.error(data.error);

src/data-status.html

@@ -71,8 +71,7 @@ <h2>Clearysky data status</h2>
         async function fetchData() {
             try {
                 const data = await fetchClearskyApi('v1', dataEndpoint);
-                if (data) {
-                    console.log(data);
+                if (data) { 
                     displayData(data);
                 } else {
                     console.error('Failed to fetch data');

src/detail-panels/layout.jsx

@@ -9,19 +9,23 @@ const BlockingPanel = lazy(() => import('./blocking'));
 const HistoryPanel = lazy(() => import('./history/history-panel'));
 const Lists = lazy(() => import('./lists'));
 const LabeledPanel = lazy(() => import('./labeled'));
+const Packs = lazy(()=>import('./packs') );
 
 import { AccountHeader } from './account-header';
 import { TabSelector } from './tab-selector';
 
 import { AccountExtraInfo } from './account-header';
 import './layout.css';
+import { Packed } from './packs/packed';
 
 export const accountTabs = /** @type {const} */ ([
   'blocking',
   'blocked-by',
   'lists',
   'history',
   'labeled',
+  'packs',
+  'packed',
 ]);
 
 export function AccountLayout() {
@@ -110,7 +114,7 @@ export function AccountLayoutCore({
  * @param {string} tab
  * @returns
  */
-function renderTabContent(tab) {
+function renderTabContent(tab) { 
   switch (tab) {
     case 'blocked-by':
       return <BlockedByPanel />;
@@ -122,24 +126,15 @@ function renderTabContent(tab) {
       return <HistoryPanel />;
     case 'labeled':
       return <LabeledPanel />;
-
+    case 'packs':
+      return <Packs/>;
+    case 'packed':
+      return <Packed/>;
 
     default:
       return (
         <>
-          <button>123</button>
-          <br />
-          grid <br />
-          grid <br />
-          grid <br />
-          grid <br />
-          grid <br />
-          grid <br />
-          grid <br />
-          grid <br />
-          grid <br />
-          grid <br />
-          grid
+          {tab}
         </>
       );
   }

src/detail-panels/lists/lists.jsx

@@ -17,6 +17,7 @@ import { SearchHeaderDebounced } from '../history/search-header';
 import './lists.css';
 
 export function Lists() {
+
   const accountQuery = useAccountResolver();
   const shortHandle = accountQuery.data?.shortHandle;
   const { data, fetchNextPage, hasNextPage, isLoading, isFetching } = useList(shortHandle);

src/detail-panels/packs/index.jsx

@@ -0,0 +1,3 @@
+// @ts-check
+
+export { Packs as default } from './packs';

src/detail-panels/packs/list-packs.css

@@ -0,0 +1,73 @@
+ul{    
+    padding-inline-start: 2px;
+    margin:none;
+    text-decoration:none;
+}
+a{ 
+    text-decoration:none;
+    color:black;
+    text-decoration-color: black;
+
+}
+.pack-add-date{
+    width:20%;
+    text-align: right;
+}
+.pack-name{
+    width:80%;
+}
+
+a:hover{
+    text-decoration:underline;
+}
+.account-short-entry-avatar{
+    background: no-repeat center center;
+    background-size: cover;
+    color: transparent;
+    border-radius: 200%;
+    display: inline-block;
+    width: 1.5em;
+    height: 1.5em;
+    margin-right: 0.25em;
+}
+.pack-entry{
+    display:flex;
+    flex-direction: column;
+    padding-bottom:3px;
+    padding-top:2px;
+    height:auto;
+    padding-left: 1.7em;
+    white-space: normal;
+    word-wrap: break-word;
+}
+
+.row{
+    display:flex;
+    flex-direction: row;
+}
+
+.pack-name , .pack-add-date, .pack-description{
+    display:flex;
+}
+
+.pack-description{
+    width:80%;
+    margin-left:5px;
+    padding-left:25px;
+    opacity:.5;
+}
+.pack-entry:nth-child(even){
+    background-color: #0000000a;
+    background-image: linear-gradient(to top, #00000024, transparent 1px), linear-gradient(to bottom, #0000000a, transparent 1px);
+}
+
+.pack-creator-avatar{
+
+  background-size: cover;
+  display: inline-block;
+  width: 1.5em;
+  height: 1.5em;
+  margin-right: 0.25em;
+  text-align: center;
+}
+