Skip to content

Commit

Permalink
converts Feed into every app pattern
Browse files Browse the repository at this point in the history
  • Loading branch information
elliotBraem committed Jan 30, 2024
1 parent c9f1a68 commit 9abb987
Show file tree
Hide file tree
Showing 9 changed files with 530 additions and 287 deletions.
261 changes: 153 additions & 108 deletions apps/builddao/widget/Feed.jsx
Original file line number Diff line number Diff line change
@@ -1,119 +1,164 @@
const { Feed } = VM.require("devs.near/widget/Module.Feed") || (() => <></>);
const { Feed } = VM.require("devs.near/widget/Module.Feed") || {
Feed: () => <></>,
};
const { Post, ButtonLink } = VM.require("buildhub.near/widget/components") || {
Post: () => <></>,
ButtonLink: () => <></>,
};

const daoName = props.daoName || "Build DAO";
const feedLink = props.feedLink || "https://nearbuilders.org/feed";
const daoTag = props.daoTag || "build";

const feeds = props.feeds || {};

if (!feeds) {
return "";
}

const tab = props.tab || Object.keys(feeds)[0];
if (Object.keys(feeds).includes(props.hashtag)) {
tab = props.hashtag;
}
const [activeFeed, setActiveFeed] = useState(tab);
const { template, requiredHashtags, customActions } = props;

return (
<>
<Widget
src="buildhub.near/widget/components.AsideWithMainContent"
props={{
sideContent: Object.keys(feeds || {}).map((route) => {
const data = feeds[route];
return (
<ButtonLink
id={route}
variant={activeFeed === route ? "primary" : "outline"}
href={`${props.pagePath}&tab=${route}`}
className={
"align-self-stretch flex-shrink-0 justify-content-start fw-medium"
}
style={{
fontSize: "14px",
textDecoration: "none",
cursor: "pointer",
padding: "8px 12px",
gap: "10px",
}}
>
<i className={`bi ${data.icon} `}></i>
<span>{data.label}</span>
</ButtonLink>
);
}),
mainContent: (
<>
{feeds[activeFeed].hideCompose ? null : context.accountId ? (
<Widget
src="buildhub.near/widget/Compose"
props={{
feed: feeds[activeFeed],
template: feeds[activeFeed].template,
requiredHashtags: [daoTag],
}}
/>
) : (
<Widget
src="buildhub.near/widget/components.login-now"
props={props}
/>
)}
{feeds[activeFeed].customWidget ? (
<Widget
src={feeds[activeFeed].customWidget}
props={{ ...props, ...feeds[activeFeed].customProps }}
/>
) : (
<Feed
index={[
{
action: "hashtag",
key: feeds[activeFeed].hashtag, // resolution
options: {
limit: 10,
order: "desc",
},
cacheOptions: {
ignoreCache: true,
},
required: true,
},
// fix this
// {
// action: "hashtag",
// key: daoTag, // build
// options: {
// limit: 10,
// order: "desc",
// },
// cacheOptions: {
// ignoreCache: true,
// },
// required: true,
// },
]}
Item={(p) => (
<Post
accountId={p.accountId}
blockHeight={p.blockHeight}
noBorder={true}
currentPath={`${props.pagePath}`}
customActions={feeds[activeFeed].customActions}
feedType={feeds[activeFeed].name}
/>
)}
/>
)}
</>
),
}}
{!context.accountId ? ( // if not logged in
<Widget src="buildhub.near/widget/components.login-now" props={props} />
) : (
<Widget
src="buildhub.near/widget/Compose"
props={{
feed: feeds[activeFeed],
template: template,
requiredHashtags: requiredHashtags,
}}
/>
)}
<Feed
index={(requiredHashtags || []).map((it) => ({
action: "hashtag",
key: it,
options: {
limit: 10,
order: "desc",
},
cacheOptions: {
ignoreCache: true,
},
required: true,
}))}
Item={(p) => (
<Post
accountId={p.accountId}
blockHeight={p.blockHeight}
noBorder={true}
currentPath={`${props.pagePath}`}
customActions={customActions}
feedType={feeds[activeFeed].name}
/>
)}
/>
</>
);

// const daoName = props.daoName || "Build DAO";
// const feedLink = props.feedLink || "https://nearbuilders.org/feed";
// const daoTag = props.daoTag || "build";

// const feeds = props.feeds || {};

// if (!feeds) {
// return "";
// }

// const tab = props.tab || Object.keys(feeds)[0];
// if (Object.keys(feeds).includes(props.hashtag)) {
// tab = props.hashtag;
// }
// const [activeFeed, setActiveFeed] = useState(tab);

// return (
// <>
// <Widget
// src="buildhub.near/widget/components.AsideWithMainContent"
// props={{
// sideContent: Object.keys(feeds || {}).map((route) => {
// const data = feeds[route];
// return (
// <ButtonLink
// id={route}
// variant={activeFeed === route ? "primary" : "outline"}
// href={`${props.pagePath}&tab=${route}`}
// className={
// "align-self-stretch flex-shrink-0 justify-content-start fw-medium"
// }
// style={{
// fontSize: "14px",
// textDecoration: "none",
// cursor: "pointer",
// padding: "8px 12px",
// gap: "10px",
// }}
// >
// <i className={`bi ${data.icon} `}></i>
// <span>{data.label}</span>
// </ButtonLink>
// );
// }),
// mainContent: (
// <>
// {feeds[activeFeed].hideCompose ? null : context.accountId ? (
// <Widget
// src="buildhub.near/widget/Compose"
// props={{
// feed: feeds[activeFeed],
// template: feeds[activeFeed].template,
// requiredHashtags: [daoTag],
// }}
// />
// ) : (
// <Widget
// src="buildhub.near/widget/components.login-now"
// props={props}
// />
// )}
// {feeds[activeFeed].customWidget ? (
// <Widget
// src={feeds[activeFeed].customWidget}
// props={{ ...props, ...feeds[activeFeed].customProps }}
// />
// ) : (
// <Feed
// index={[
// {
// action: "hashtag",
// key: feeds[activeFeed].hashtag, // resolution
// options: {
// limit: 10,
// order: "desc",
// },
// cacheOptions: {
// ignoreCache: true,
// },
// required: true,
// },
// // fix this
// // {
// // action: "hashtag",
// // key: daoTag, // build
// // options: {
// // limit: 10,
// // order: "desc",
// // },
// // cacheOptions: {
// // ignoreCache: true,
// // },
// // required: true,
// // },
// ]}
// Item={(p) => (
// <Post
// accountId={p.accountId}
// blockHeight={p.blockHeight}
// noBorder={true}
// currentPath={`${props.pagePath}`}
// customActions={feeds[activeFeed].customActions}
// feedType={feeds[activeFeed].name}
// />
// )}
// />
// )}
// </>
// ),
// }}
// />
// </>
// );
Original file line number Diff line number Diff line change
@@ -1,32 +1,27 @@
/**
* generalized graph item fetcher,
* Social adapter (getr(`${accountId}/graph/${item}`, "final")
*/

const accountId = props.accountId ?? context.accountId;
const item = props.item;
const itemType = props.itemType;
const renderItem = props.renderItem;

if (!item) {
return <p className="text-white">No item prop passed</p>;
if (!itemType) {
return <p className="text-white">No graph item type passed.</p>;
}

const items = Social.getr(`${accountId}/graph/${item}`, "final", {
const items = Social.getr(`${accountId}/graph/${itemType}`, "final", {
withBlockHeight: true,
});

const StorageKey = "order";
const order = Storage.privateGet(StorageKey);
const apps = useMemo(() => {
const graphItems = useMemo(() => {
if (items === null || order === null) {
return [];
}
const starredApps = new Map();
const itemMap = new Map();
const path = [];

const buildSrc = (node) => {
if (node.hasOwnProperty("")) {
starredApps.set(path.join("/"), node[":block"]);
itemMap.set(path.join("/"), node[":block"]);
}
Object.entries(node).forEach(([key, value]) => {
if (typeof value === "object") {
Expand All @@ -37,19 +32,19 @@ const apps = useMemo(() => {
});
};

buildSrc(items ?? {}, [], starredApps);
let apps = [...starredApps.entries()];
apps.sort((a, b) => b[1] - a[1]);
apps = apps.map((a) => a[0]);
apps.sort((a, b) => (order?.[a] || 0) - (order?.[b] || 0));
buildSrc(items ?? {}, [], itemMap);
let entries = [...itemMap.entries()];
entries.sort((a, b) => b[1] - a[1]);
entries = entries.map((a) => a[0]);
entries.sort((a, b) => (order?.[a] || 0) - (order?.[b] || 0));
Storage.privateSet(
StorageKey,
Object.fromEntries(apps.map((a, i) => [a, i + 1]))
Object.fromEntries(entries.map((a, i) => [a, i + 1]))
);
return apps;
return entries;
}, [items, order]);

let transformedArray = apps.map((item) => {
let transformedArray = graphItems.map((item) => {
let splitParts = item.split("/");
let accountId = splitParts[0];
let lastPart = splitParts[splitParts.length - 1];
Expand All @@ -66,7 +61,7 @@ return (
<>
{(filteredArray ?? []).map((item) => renderItem(item))}
{filteredArray.length === 0 && (
<p className="fw-bold text-white">No items!</p>
<p className="fw-bold text-white">No {itemType}s!</p>
)}
</>
);
6 changes: 3 additions & 3 deletions apps/builddao/widget/app.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const { page, layout, loading, ...passProps } = props;
const { page, tab, layout, loading, ...passProps } = props;

const { routes } = VM.require("buildhub.near/widget/config.routes") ?? {
routes: {},
Expand All @@ -8,7 +8,7 @@ const { theme } = VM.require("buildhub.near/widget/config.theme") ?? {
theme: {},
};

const { AppLayout } = VM.require("buildhub.near/widget/template.layout") || {
const { AppLayout } = VM.require("buildhub.near/widget/template.AppLayout") || {
AppLayout: () => <>Layout loading...</>,
};

Expand Down Expand Up @@ -48,7 +48,7 @@ function Router({ active, routes }) {

return (
<div key={active}>
<Widget src={src} props={{ ...passProps, ...defaultProps }} />
<Widget src={src} props={{ currentPath: `page=${page}`, page: tab, ...passProps, ...defaultProps }} />
</div>
);
}
Expand Down
Loading

0 comments on commit 9abb987

Please sign in to comment.