Skip to content

Commit

Permalink
CW-mention-streams
Browse files Browse the repository at this point in the history 
Added new discussion creation
  • Loading branch information
@MeyerPV
MeyerPV committed Dec 9, 2024
1 parent 6ef91db commit 3e8e3f8
Show file tree
Hide file tree
Showing 9 changed files with 117 additions and 64 deletions.
14 changes: 14 additions & 0 deletions src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ import {
ChatChannelFeedLayoutItemProps,
checkIsChatChannelLayoutItem,
checkIsFeedItemFollowLayoutItem,
FeedItemFollowLayoutItem,
FeedLayoutItem,
FeedLayoutItemChangeData,
FeedLayoutItemChangeDataWithType,
Expand Down Expand Up @@ -696,8 +697,21 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
}

const itemId = data.params[QueryParamKey.Item];
const discussionItemId = data.params[QueryParamKey.discussionItem];
const messageId = data.params[QueryParamKey.Message];

if(discussionItemId) {
const feedItem = allFeedItems.find((item) => (item as FeedItemFollowLayoutItem)?.feedItem?.data.id === discussionItemId);
const feedItemId = feedItem?.itemId;
if(feedItemId) {
handleFeedItemClick(feedItemId, {
commonId: feedPageParams.id,
});
}

return;
}

if (itemId) {
handleFeedItemClick(itemId, {
commonId: feedPageParams.id,
Expand Down
11 changes: 7 additions & 4 deletions src/pages/inbox/BaseInbox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,10 +152,13 @@ const InboxPage: FC<InboxPageProps> = (props) => {
const firstFeedItem = topFeedItems[0];
if(optimisticInboxFeedItems.size > 0 && firstFeedItem) {

feedLayoutRef?.setActiveItem({
feedItemId: firstFeedItem.itemId,
discussion: (firstFeedItem as FeedItemFollowLayoutItemWithFollowData)?.feedItem.optimisticData,
});
const shouldFocus = (firstFeedItem as FeedItemFollowLayoutItemWithFollowData)?.feedItem.optimisticData?.shouldFocus;
if(shouldFocus) {
feedLayoutRef?.setActiveItem({
feedItemId: firstFeedItem.itemId,
discussion: (firstFeedItem as FeedItemFollowLayoutItemWithFollowData)?.feedItem.optimisticData,
});
}
}

}, [topFeedItems, optimisticInboxFeedItems, feedLayoutRef])
Expand Down
16 changes: 14 additions & 2 deletions src/shared/components/Chat/ChatMessage/utils/generateInternalLink.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ interface GenerateInternalLinkProps {
}

const ITEM_KEY = "item";
const DISCUSSION_ITEM_KEY = "discussionItem";

export const getQueryParam = (path: string, key: string): string | null => {
const urlParams = new URLSearchParams(path);
Expand Down Expand Up @@ -44,6 +45,16 @@ const getStreamNameByFeedItemId = async (
}
};

const getDiscussionTitle = async (
discussionId: string,
): Promise<string | undefined> => {
const discussion = await DiscussionService.getDiscussionById(discussionId);

return discussion?.title;
};



export const generateInternalLink = async ({
text,
onInternalLinkClick,
Expand All @@ -52,11 +63,12 @@ export const generateInternalLink = async ({
if (text.startsWith(BASE_URL) && commonPath) {
const [commonId, itemQueryParam] = commonPath.split("?");
const itemId = getQueryParam(itemQueryParam, ITEM_KEY);
const discussionItemId = getQueryParam(itemQueryParam, DISCUSSION_ITEM_KEY);
if (commonId) {
const common = await getCommon(commonId);
if (common?.id && common.name) {
const itemTitle = await getStreamNameByFeedItemId(commonId, itemId);

const itemTitle = discussionItemId ? await getDiscussionTitle(discussionItemId) : await getStreamNameByFeedItemId(commonId, itemId);
return (
<>
{renderLink({
Expand Down
1 change: 1 addition & 0 deletions src/shared/constants/queryParamKey.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export enum QueryParamKey {
Language = "language",
Tab = "tab",
Item = "item",
discussionItem = "discussionItem",
ChatItem = "chatItem",
Message = "message",
Unread = "unread",
Expand Down
1 change: 1 addition & 0 deletions src/shared/models/CommonFeed.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export interface LastMessageContentWithMessageId {
export type DiscussionWithOptimisticData = Discussion & {
state?: OptimisticFeedItemState; // Optional state property
lastMessageContent: LastMessageContent; // Additional property
shouldFocus: boolean;
};

export interface CommonFeed extends BaseEntity, SoftDeleteEntity {
Expand Down
23 changes: 14 additions & 9 deletions src/shared/ui-kit/TextEditor/BaseTextEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import { AI_PRO_USER, AI_USER, FeatureFlags } from "@/shared/constants";
import { KeyboardKeys } from "@/shared/constants/keyboardKeys";
import { useFeatureFlag } from "@/shared/hooks";
import { Discussion, User } from "@/shared/models";
import { getUserName, isMobile, isRtlText } from "@/shared/utils";
import { generateDiscussionShareLink, getUserName, isMobile, isRtlText } from "@/shared/utils";
import {
Editor,
MentionDropdown,
Expand Down Expand Up @@ -248,15 +248,18 @@ const BaseTextEditor = forwardRef<BaseTextEditorHandles, TextEditorProps>(

// Extract the substring within the offsets
const text =
(node as Text)?.text.slice(anchor.offset, focus.offset) +
(node as Text)?.text.slice(anchor.offset, focus.offset + 1) +
(filteredNodes.length > 1 ? " " : "");

// Remove newlines from the text
return text.replace(/\n/g, "");
});

// Combine the text parts and return
return nodes.join("").slice(0, -1);
if(nodes.length > 1) {
return nodes.join("").slice(0, -1);
}

return nodes.join("");
};

const handleSearch = (
Expand All @@ -275,7 +278,7 @@ const BaseTextEditor = forwardRef<BaseTextEditorHandles, TextEditorProps>(
const newText = target?.anchor
? getTextByRange(editor, {
...target,
focus: afterValue ? afterValue : value.anchor,
focus: afterValue ? { ...afterValue, offset: afterValue.offset } : { ...value.anchor, offset: value.anchor.offset + 1 },
})
: "";

Expand Down Expand Up @@ -492,7 +495,6 @@ const BaseTextEditor = forwardRef<BaseTextEditorHandles, TextEditorProps>(
insertEmoji(editor, emoji.native);
}}
/>

{target && (
<MentionDropdown
shouldFocusTarget={shouldFocusTarget}
Expand All @@ -510,10 +512,13 @@ const BaseTextEditor = forwardRef<BaseTextEditorHandles, TextEditorProps>(
setShouldFocusTarget(false);
isNewMentionCreated.current = true;
}}
onCreateDiscussion={(discussionId) => {
console.log("--discussionId", discussionId);
onCreateDiscussion={(createdDiscussionCommonId: string, discussionId: string) => {
Transforms.select(editor, target);
Transforms.insertText(editor, "Hello, Slate!");
const link = generateDiscussionShareLink(createdDiscussionCommonId, discussionId);
Transforms.insertText(editor, link);
setTarget(null);
setShouldFocusTarget(false);
isNewMentionCreated.current = true;
}}
user={user}
commonId={commonId}
Expand Down
99 changes: 51 additions & 48 deletions src/shared/ui-kit/TextEditor/components/MentionDropdown/MentionDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,16 @@ import {
generateOptimisticFeedItem,
getUserName,
} from "@/shared/utils";
import { commonActions } from "@/store/states";
import { commonActions, optimisticActions } from "@/store/states";
import styles from "./MentionDropdown.module.scss";
import { CommonService } from "@/services";

export const MENTION_TAG = "@";

export interface MentionDropdownProps {
onClick: (user: User) => void;
onClickDiscussion: (discussion: Discussion) => void;
onCreateDiscussion: (discussionId: string) => void;
onCreateDiscussion: (createdDiscussionCommonId: string, discussionId: string) => void;
onClose: () => void;
users?: User[];
discussions?: Discussion[];
Expand Down Expand Up @@ -57,14 +58,6 @@ const MentionDropdown: FC<MentionDropdownProps> = (props) => {
const dispatch = useDispatch();

const canCreateDiscussion = !!user && !!commonId;
console.log(
"--user",
user,
"--commonId",
commonId,
"--circleVisibility",
circleVisibility,
);

const [index, setIndex] = useState(0);
const [isShowMoreUsers, setIsShowMoreUsers] = useState(false);
Expand Down Expand Up @@ -106,7 +99,6 @@ const MentionDropdown: FC<MentionDropdownProps> = (props) => {
(item) => parseInt(item.getAttribute("tabIndex") || "0", 10) === index,
);

console.log("---elementToFocus", elementToFocus, index);
if (elementToFocus) {
elementToFocus.focus();
}
Expand All @@ -116,7 +108,6 @@ const MentionDropdown: FC<MentionDropdownProps> = (props) => {
const increment = () => {
setIndex((value) => {
const updatedValue = value + 1;
console.log("--listRefs", listRefs, updatedValue);
return updatedValue < listRefs.current.length ? updatedValue : value;
});
};
Expand Down Expand Up @@ -196,50 +187,62 @@ const MentionDropdown: FC<MentionDropdownProps> = (props) => {
}
};

const createDiscussion = () => {
const createDiscussion = async () => {
if (!canCreateDiscussion) {
return;
}

const common = await CommonService.getCachedCommonById(commonId);

if (!common) {
return;
}

const discussionId = uuidv4();
const userName = getUserName(user);
const userId = user.uid;
const firstMessage = generateFirstMessage({ userName, userId });
// dispatch(
// commonActions.setOptimisticFeedItem(
// generateOptimisticFeedItem({
// userId,
// commonId,
// type: CommonFeedType.OptimisticDiscussion,
// circleVisibility: circleVisibility ?? [],
// discussionId,
// title: searchText,
// content: firstMessage,
// lastMessageContent: {
// ownerId: userId,
// userName,
// ownerType: DiscussionMessageOwnerType.System,
// content: firstMessage,
// },
// }),
// ),
// );
const optimisticFeedItem = generateOptimisticFeedItem({
userId,
commonId,
type: CommonFeedType.OptimisticDiscussion,
circleVisibility: circleVisibility ?? [],
discussionId,
title: searchText,
content: firstMessage,
lastMessageContent: {
ownerId: userId,
userName,
ownerType: DiscussionMessageOwnerType.System,
content: firstMessage,
},
shouldFocus: false
});
dispatch(
optimisticActions.setOptimisticFeedItem({
data: optimisticFeedItem,
common
}),
);

// dispatch(
// commonActions.createDiscussion.request({
// payload: {
// id: discussionId,
// title: searchText,
// message: firstMessage,
// ownerId: userId,
// commonId,
// images: [],
// circleVisibility: circleVisibility ?? [],
// },
// }),
// );
console.log('---discussionId',discussionId, '--optimisticFeedItem',optimisticFeedItem.id);

onCreateDiscussion(discussionId);
dispatch(
commonActions.createDiscussion.request({
payload: {
id: discussionId,
title: searchText,
message: firstMessage,
ownerId: userId,
commonId,
images: [],
circleVisibility: circleVisibility ?? [],
},
commonId
}),
);

onCreateDiscussion(commonId, discussionId);
};

const getRef = (element) => listRefs.current.push(element);
Expand Down Expand Up @@ -334,7 +337,7 @@ const MentionDropdown: FC<MentionDropdownProps> = (props) => {
</p>
</li>
)}
{/* {((users.length > 0 || discussions.length > 0) && canCreateDiscussion && searchText) && (
{((users.length > 0 || discussions.length > 0) && canCreateDiscussion && searchText) && (
<Separator className={styles.separator} />
)}
{(searchText && canCreateDiscussion) && (
Expand All @@ -351,7 +354,7 @@ const MentionDropdown: FC<MentionDropdownProps> = (props) => {
New "{searchText.slice(1)}" discussion
</p>
</li>
)} */}
)}
</ul>
);
};
Expand Down
3 changes: 3 additions & 0 deletions src/shared/utils/generateOptimisticFeedItem.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ interface GenerateOptimisticFeedItemPayload {
content: string;
circleVisibility: string[];
lastMessageContent: LastMessageContent
shouldFocus?: boolean;
}

export const generateOptimisticFeedItem = ({
Expand All @@ -22,6 +23,7 @@ export const generateOptimisticFeedItem = ({
content,
circleVisibility,
lastMessageContent,
shouldFocus = true
}: GenerateOptimisticFeedItemPayload): CommonFeed => {

const optimisticFeedItemId = uuidv4();
Expand Down Expand Up @@ -60,6 +62,7 @@ export const generateOptimisticFeedItem = ({
circleVisibilityByCommon: null,
linkedCommonIds: [],
state: OptimisticFeedItemState.loading,
shouldFocus: shouldFocus
},
circleVisibility,
}
Expand Down
13 changes: 12 additions & 1 deletion src/shared/utils/generateStaticShareLink.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Environment, REACT_APP_ENV, ROUTE_PATHS } from "../constants";
import { Common, Discussion, DiscussionMessage, Proposal } from "../models";
import { matchRoute } from "./matchRoute";

const staticLinkPrefix = () => {
export const staticLinkPrefix = () => {
if (window.location.hostname === "localhost") {
return "http://localhost:3000";
}
Expand Down Expand Up @@ -71,3 +71,14 @@ export const generateStaticShareLink = (
return "";
}
};

export const generateDiscussionShareLink = (
commonId: string,
discussionId: string,
): string => {
const basePath: string = getStaticLinkBasePath();

return `${staticLinkPrefix()}/${basePath}/${
commonId
}?discussionItem=${discussionId}`;
};

0 comments on commit 3e8e3f8

Please sign in to comment.