Skip to content

Commit

Permalink
Revamp compose (#149)
Browse files Browse the repository at this point in the history
* Add new compose

* Remove flickering

* Change style to match old compose

* adds devs.near

---------

Co-authored-by: Elliot Braem <[email protected]>
  • Loading branch information
itexpert120 and elliotBraem authored Feb 14, 2024
1 parent 1337c95 commit fcb2df5
Show file tree
Hide file tree
Showing 14 changed files with 1,810 additions and 17 deletions.
32 changes: 16 additions & 16 deletions apps/builddao/widget/Compose.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const { User, Button } = VM.require("buildhub.near/widget/components") || {
User: () => <></>,
Button: () => <></>
Button: () => <></>,
};

const draftKey = props.draftKey || "draft";
Expand All @@ -13,7 +13,7 @@ if (draft === null) {
const autocompleteEnabled = true;

State.init({
image: {}
image: {},
});

const [view, setView] = useState("editor");
Expand Down Expand Up @@ -76,8 +76,8 @@ const extractMentionNotifications = (text, item) =>
key: accountId,
value: {
type: "mention",
item
}
item,
},
}));

function checkAndAppendHashtag(input, target) {
Expand All @@ -91,7 +91,7 @@ function checkAndAppendHashtag(input, target) {
const content = {
type: "md",
image: state.image.cid ? { ipfs_cid: state.image.cid } : undefined,
text: postContent
text: postContent,
};

const postToCustomFeed = ({ feed, text }) => {
Expand All @@ -104,16 +104,16 @@ const postToCustomFeed = ({ feed, text }) => {

const data = {
post: {
main: JSON.stringify(content)
main: JSON.stringify(content),
},
index: {
post: JSON.stringify({ key: "main", value: { type: "md" } })
}
post: JSON.stringify({ key: "main", value: { type: "md" } }),
},
};

const item = {
type: "social",
path: `${context.accountId}/post/main`
path: `${context.accountId}/post/main`,
};

const notifications = extractMentionNotifications(text, item);
Expand All @@ -130,7 +130,7 @@ const postToCustomFeed = ({ feed, text }) => {
data.index.hashtag = JSON.stringify(
hashtags.map((hashtag) => ({
key: hashtag,
value: item
value: item,
}))
);
}
Expand All @@ -146,7 +146,7 @@ const postToCustomFeed = ({ feed, text }) => {
},
onCancel: () => {
// console.log(`Cancelled ${feed}: #${postId}`);
}
},
});
};

Expand Down Expand Up @@ -457,7 +457,7 @@ return (
embedCss: props.customCSS || MarkdownEditor,
onChange: (v) => {
textareaInputHandler(v);
}
},
}}
/>
{autocompleteEnabled && showAccountAutocomplete && (
Expand All @@ -466,7 +466,7 @@ return (
props={{
term: mentionInput,
onSelect: autoCompleteAccountId,
onClose: () => setShowAccountAutocomplete(false)
onClose: () => setShowAccountAutocomplete(false),
}}
/>
)}
Expand All @@ -483,7 +483,7 @@ return (
props={{
image: state.image.cid
? { ipfs_cid: state.image.cid }
: undefined
: undefined,
}}
/>
)}
Expand Down Expand Up @@ -519,7 +519,7 @@ return (
onClick={() =>
postToCustomFeed({
feed: props.feed,
text: postContent
text: postContent,
})
}
>
Expand All @@ -543,7 +543,7 @@ return (
dismiss
</Button>
),
providerProps: { duration: 1000 }
providerProps: { duration: 1000 },
}}
/>
</PostCreator>
Expand Down
2 changes: 1 addition & 1 deletion apps/builddao/widget/Feed.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ return (
style={{ height: 400 }}
></div>
}
src="buildhub.near/widget/Compose"
src="buildhub.near/widget/N.Compose"
props={{
draftKey: feedName,
template: template,
Expand Down
144 changes: 144 additions & 0 deletions apps/builddao/widget/N/Common/AccountAutocomplete.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
if (!context.accountId || !props.term) return <></>;

let results = [];
const profilesData = Social.get("*/profile/name", "final") || {};
const followingData = Social.get(
`${context.accountId}/graph/follow/**`,
"final"
);

if (!profilesData || !followingData) return <></>;

const profiles = Object.entries(profilesData);
const term = (props.term || "").replace(/\W/g, "").toLowerCase();
const limit = 5;

for (let i = 0; i < profiles.length; i++) {
let score = 0;
const accountId = profiles[i][0];
const accountIdSearch = profiles[i][0].replace(/\W/g, "").toLowerCase();
const nameSearch = (profiles[i][1]?.profile?.name || "")
.replace(/\W/g, "")
.toLowerCase();
const accountIdSearchIndex = accountIdSearch.indexOf(term);
const nameSearchIndex = nameSearch.indexOf(term);

if (accountIdSearchIndex > -1 || nameSearchIndex > -1) {
score += 10;

if (accountIdSearchIndex === 0) {
score += 10;
}
if (nameSearchIndex === 0) {
score += 10;
}
if (followingData[accountId] === "") {
score += 30;
}

results.push({
accountId,
score,
});
}
}

results.sort((a, b) => b.score - a.score);
results = results.slice(0, limit);

function onResultClick(id) {
props.onSelect && props.onSelect(id);
}

const Wrapper = styled.div`
position: relative;
&::before {
content: "";
display: block;
position: absolute;
right: 0;
width: 6px;
height: 100%;
background: linear-gradient(to left, rgb(55, 55, 55), rgba(55, 55, 55, 0));
z-index: 10;
}
`;

const Scroller = styled.div`
position: relative;
display: flex;
padding: 6px;
gap: 6px;
overflow: auto;
scroll-behavior: smooth;
align-items: center;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
> * {
max-width: 200px;
text-align: left;
flex-grow: 0;
flex-shrink: 0;
button {
border: 1px solid #eceef0;
background: #fff !important;
border-radius: 6px;
padding: 3px 6px;
transition: all 200ms;
&:focus,
&:hover {
border-color: #687076;
}
}
}
`;

const CloseButton = styled.button`
background: none;
border: none;
display: block;
padding: 12px;
color: #687076;
transition: all 200ms;
&:hover {
color: #000;
}
`;

if (results.length === 0) return <></>;

return (
<Wrapper>
<Scroller>
<CloseButton tabIndex={-1} type="button" onClick={props.onClose}>
<i className="bi bi-x-circle" />
</CloseButton>

{results.map((result) => {
return (
<button
className="border-0 btn btn-dark"
key={result.accountId}
onClick={() => onResultClick(result.accountId)}
>
<Widget
key={result.accountId}
src="mob.near/widget/Profile.ShortInlineBlock"
props={{
accountId: result.accountId,
}}
/>
</button>
);
})}
</Scroller>
</Wrapper>
);
Loading

0 comments on commit fcb2df5

Please sign in to comment.