Skip to content

Commit

Permalink
Merge pull request #90 from NEARBuilders/develop
Browse files Browse the repository at this point in the history 
Refactor, Requests, Proposals, & More
  • Loading branch information
@elliotBraem
elliotBraem authored Feb 2, 2024
2 parents 3985577 + 63f66a1 commit 06c7fa1
Show file tree
Hide file tree
Showing 96 changed files with 4,951 additions and 3,645 deletions.
70 changes: 0 additions & 70 deletions apps/builddao/widget/Bookmarks.jsx
View file

This file was deleted.

205 changes: 33 additions & 172 deletions apps/builddao/widget/Compose.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,17 @@ const { Avatar, Button } = VM.require("buildhub.near/widget/components") || {
Button: () => <></>,
};

const draftKey = props.feed.name || "draft";
const draftKey = props.draftKey || "draft";
const draft = Storage.privateGet(draftKey);

const autocompleteEnabled = true;

if (draft === null) {
return "";
}

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

const [view, setView] = useState("editor");
const [postContent, setPostContent] = useState("");
const [hideAdvanced, setHideAdvanced] = useState(true);
const [labels, setLabels] = useState([]);
const [showAccountAutocomplete, setShowAccountAutocomplete] = useState(false);
const [mentionsArray, setMentionsArray] = useState([]);
const [mentionInput, setMentionInput] = useState(null);
const [handler, setHandler] = useState("update");

setPostContent(draft || props.template);

Expand All @@ -33,6 +23,16 @@ function generateUID() {
return randomNumber.toString(16).padStart(8, "0");
}

function tagsFromLabels(labels) {
return labels.reduce(
(newLabels, label) => ({
...newLabels,
[label]: "",
}),
{}
);
}

const extractMentions = (text) => {
const mentionRegex =
/@((?:(?:[a-z\d]+[-_])*[a-z\d]+\.)*(?:[a-z\d]+[-_])*[a-z\d]+)/gi;
Expand Down Expand Up @@ -86,28 +86,19 @@ function checkAndAppendHashtag(input, target) {
}

const postToCustomFeed = ({ feed, text, labels }) => {
const postId = generateUID();
if (!labels) labels = [];
// if (!labels) labels = [];

labels = labels.map((label) => label.toLowerCase());
labels.push(feed.name.toLowerCase());
// labels = labels.map((label) => label.toLowerCase());
// labels.push(feed.name.toLowerCase());

const requiredHashtags = ["build"];
const requiredHashtags = props.requiredHashtags || ["build"];
if (feed.hashtag) requiredHashtags.push(feed.hashtag.toLowerCase());
requiredHashtags.push(feed.name.toLowerCase());

text = text + `\n\n`;

requiredHashtags.forEach((hashtag) => {
text = checkAndAppendHashtag(text, hashtag);
});

const content = {
type: "md",
image: state.image.cid ? { ipfs_cid: state.image.cid } : undefined,
text: text,
};

const data = {
// [feed.name]: {
// [postId]: {
Expand All @@ -123,7 +114,12 @@ const postToCustomFeed = ({ feed, text, labels }) => {
// },
// },
post: {
main: JSON.stringify(content),
main: JSON.stringify({
type: "md",
text,
// tags: tagsFromLabels(labels),
// postType: feed.name,
}),
},
index: {
post: JSON.stringify({ key: "main", value: { type: "md" } }),
Expand Down Expand Up @@ -168,98 +164,16 @@ const postToCustomFeed = ({ feed, text, labels }) => {
});
};

function textareaInputHandler(value) {
const words = value.split(/\s+/);
const allMentiones = words
.filter((word) => word.startsWith("@"))
.map((mention) => mention.slice(1));
const newMentiones = allMentiones.filter(
(item) => !mentionsArray.includes(item)
);
setMentionInput(newMentiones?.[0] ?? "");
setMentionsArray(allMentiones);
setShowAccountAutocomplete(newMentiones?.length > 0);
setPostContent(value);
setHandler("update");
Storage.privateSet(draftKey, value || "");
}

function autoCompleteAccountId(id) {
let currentIndex = 0;
const updatedDescription = postContent.replace(
/(?:^|\s)(@[^\s]*)/g,
(match) => {
if (currentIndex === mentionsArray.indexOf(mentionInput)) {
currentIndex++;
return ` @${id}`;
} else {
currentIndex++;
return match;
}
}
);
setPostContent(updatedDescription);
setShowAccountAutocomplete(false);
setMentionInput(null);
setHandler("autocompleteSelected");
Storage.privateSet(draftKey, updatedDescription || "");
}

const PostCreator = styled.div`
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 1rem;
background: #23242b;
background: var(--compose-bg, #23242b);
border-radius: 12px;
margin-bottom: 1rem;
.upload-image-button {
display: flex;
align-items: center;
justify-content: center;
background: #f1f3f5;
color: #11181c;
border-radius: 40px;
height: 40px;
min-width: 40px;
font-size: 0;
border: none;
cursor: pointer;
transition: background 200ms, opacity 200ms;
&::before {
font-size: 16px;
}
&:hover,
&:focus {
background: #d7dbde;
outline: none;
}
&:disabled {
opacity: 0.5;
pointer-events: none;
}
span {
margin-left: 12px;
}
}
.d-inline-block {
display: flex !important;
gap: 12px;
margin: 0 !important;
.overflow-hidden {
width: 40px !important;
height: 40px !important;
}
}
`;

const TextareaWrapper = styled.div`
Expand Down Expand Up @@ -458,36 +372,6 @@ const MarkdownPreview = styled.div`
}
`;

const LabelSelect = styled.div`
label {
color: #fff;
}
.rbt-input-multi {
background: #23242b !important;
color: #fff !important;
}
.rbt-token {
background: #202020 !important;
color: #fff !important;
}
.rbt-menu {
background: #23242b !important;
color: #fff !important;
.dropdown-item {
color: #fff !important;
transition: all 300ms;
&:hover {
background: #202020;
}
}
}
`;

const avatarComponent = useMemo(() => {
return (
<div className="d-flex align-items-start gap-2">
Expand All @@ -507,57 +391,31 @@ return (
<TextareaWrapper
className="markdown-editor"
data-value={postContent || ""}
key={props.feed.name}
key={props.feed.name || "Editor"}
>
<Widget
src={"buildhub.near/widget/components.MarkdownEditorIframe"}
src="mob.near/widget/MarkdownEditorIframe"
props={{
initialText: postContent,
data: { handler: handler, content: postContent },
onChange: (content) => {
textareaInputHandler(content);
embedCss: props.customCSS || MarkdownEditor,
onChange: (v) => {
setPostContent(v);
Storage.privateSet(draftKey, v || "");
},
embedCss: MarkdownEditor,
}}
/>
{autocompleteEnabled && showAccountAutocomplete && (
<Widget
src="buildhub.near/widget/components.AccountAutocomplete"
props={{
term: mentionInput,
onSelect: autoCompleteAccountId,
onClose: () => setShowAccountAutocomplete(false),
}}
/>
)}
</TextareaWrapper>
) : (
<MarkdownPreview>
<Widget
src="devhub.near/widget/devhub.components.molecule.MarkdownViewer"
props={{ text: postContent }}
/>
{state.image.cid && (
<Widget
src="mob.near/widget/Image"
props={{
image: state.image.cid
? { ipfs_cid: state.image.cid }
: undefined,
}}
/>
)}
</MarkdownPreview>
)}
</div>

<div className="d-flex gap-3 align-self-end">
{view === "editor" && (
<IpfsImageUpload
image={state.image}
className="upload-image-button bi bi-image"
/>
)}
<Button
variant="outline"
onClick={() => setView(view === "editor" ? "preview" : "editor")}
Expand All @@ -574,11 +432,14 @@ return (
)}
</Button>
<Button
disabled={postContent === "" || postContent === props.template}
variant="primary"
style={{ fontSize: 14 }}
onClick={() =>
postToCustomFeed({ feed: props.feed, text: postContent, labels })
postToCustomFeed({
feed: props.feed,
text: postContent,
labels,
})
}
>
Post {props.feed.name}
Expand Down
Loading

0 comments on commit 06c7fa1

Please sign in to comment.