feat: implement user collaboration features (#1221)

ElpisHelle · Jun 7, 2023 · 3ba517a · 3ba517a
1 parent 52e7ea5
commit 3ba517a
Show file tree

Hide file tree

Showing 12 changed files with 468 additions and 155 deletions.
diff --git a/components/atoms/Textarea/text-area.tsx b/components/atoms/Textarea/text-area.tsx
@@ -1,16 +1,34 @@
-import * as React from "react";
+import React, { ChangeEvent, useRef } from "react";
 import clsx from "clsx";
 
-interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+ defaultRow?: number;
+ onChangeText?: (value: string) => void;
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, onChangeText, ...props }, ref) => {
+ const textareaRef = useRef<HTMLTextAreaElement>(null);
+ const autoGrowTextarea = () => {
+ const textarea = textareaRef.current;
+ if (textarea) {
+ textarea.style.height = "auto";
+ textarea.style.height = `${textarea.scrollHeight}px`;
+ }
+ };
+
+ const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+ onChangeText?.(event.target.value);
+ autoGrowTextarea();
+ };
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
  return (
  <textarea
+ onChange={handleInputChange}
  className={clsx(
- "flex h-20  md:min-h-26 md:h-auto w-full rounded-md py-2 text-sm placeholder:text-slate-400  disabled:cursor-not-allowed disabled:opacity-50",
+ "flex h-20 md:min-h-26 md:h-auto w-full rounded-md py-2 text-sm placeholder:text-slate-400 disabled:cursor-not-allowed disabled:opacity-50",
  className
  )}
- ref={ref}
+ ref={textareaRef}
  {...props}
  />
  );

diff --git a/components/molecules/CollaborationCard/collaboration-card.tsx b/components/molecules/CollaborationCard/collaboration-card.tsx
@@ -1,27 +1,44 @@
 import React from "react";
 import Avatar from "components/atoms/Avatar/avatar";
+import clsx from "clsx";
+import { getAvatarByUsername } from "lib/utils/github";
+import Button from "components/atoms/Button/button";
 
-export interface CollaborationRequestObject {
+export interface CollaborationRequestObject extends React.ComponentProps<"div"> {
  requestor: DbUser | undefined;
  outreachMessage: string;
+ requestId: string;
+ onAccept: (id: string) => void;
+ onDecline: (id: string) => void;
 }
 
-const CollaborationCard = ({ requestor, outreachMessage }: CollaborationRequestObject) => {
+const CollaborationCard = ({
+ requestor,
+ outreachMessage,
+ className,
+ requestId,
+ onAccept,
+ onDecline,
+}: CollaborationRequestObject) => {
  return (
- <div className="bg-white flex flex-col gap-4 rounded-2xl p-4 border border-light-slate-6 max-w-2xl">
- <div className="flex justify-between text-sm items-center ">
- <div className="flex gap-2 text-sm items-center">
- <Avatar
- className="!rounded-none"
- size="sm"
- avatarURL="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80"
- />
+ <div className={clsx("flex flex-col w-full gap-4 p-4 bg-white border rounded-2xl border-light-slate-6", className)}>
+ <div className="flex items-center justify-between text-sm ">
+ <div className="flex items-center gap-2 text-sm">
+ <Avatar className="!rounded-none" size="sm" avatarURL={getAvatarByUsername(requestor?.login || "")} />
 
- <div>Microsoft</div>
+ <div>{requestor?.name}</div>
  </div>
  <div className="flex gap-2">
- <button className="px-2">Ignore</button>
- <button className="bg-light-orange-9 px-2 py-1 outline-none rounded-lg text-white">Accept</button>
+ <button onClick={() => onDecline(requestId)} className="px-2">
+ Ignore
+ </button>
+ <Button
+ onClick={() => onAccept(requestId)}
+ variant="primary"
+ className="!px-2 !py-1 !text-xs md:text-sm text-white rounded-lg outline-none bg-light-orange-9"
+ >
+ Accept
+ </Button>
  </div>
  </div>
  <div>{outreachMessage}</div>

diff --git a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx
@@ -7,7 +7,7 @@ import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
- DropdownMenuTrigger
+ DropdownMenuTrigger,
 } from "components/atoms/Dropdown/dropdown";
 import { HiOutlineEmojiHappy } from "react-icons/hi";
 import { TfiMoreAlt } from "react-icons/tfi";
@@ -25,7 +25,7 @@ import {
  DialogHeader,
  DialogTitle,
  DialogDescription,
- DialogCloseButton
+ DialogCloseButton,
 } from "../Dialog/dialog";
 import { generateApiPrUrl } from "lib/utils/github";
 import { fetchGithubPRInfo } from "lib/hooks/fetchGithubPRInfo";
@@ -39,7 +39,7 @@ import {
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
- AlertDialogTrigger
+ AlertDialogTrigger,
 } from "../AlertDialog/alert-dialog";
 import { deleteHighlight } from "lib/hooks/deleteHighlight";
 import { useToast } from "lib/hooks/useToast";
@@ -72,7 +72,7 @@ const ContributorHighlightCard = ({
  id,
  refreshCallBack,
  emojis,
- shipped_date
+ shipped_date,
 }: ContributorHighlightCardProps) => {
  const { toast } = useToast();
  const twitterTweet = `${title || "Open Source Highlight"} - OpenSauced from ${user}`;
@@ -202,14 +202,11 @@ const ContributorHighlightCard = ({
  }
  }, [highlight]);
 
- function FollowUser(){
-
+ function FollowUser() {
  const { follow, unFollow, isError } = useFollowUser(user);
-
- return (loggedInUser ? (
- <DropdownMenuItem
- className={`rounded-md ${loggedInUser.user_metadata.user_name === user && "hidden"}`}
- >
+
+ return loggedInUser ? (
+ <DropdownMenuItem className={`rounded-md ${loggedInUser.user_metadata.user_name === user && "hidden"}`}>
  <div onClick={isError ? follow : unFollow} className="flex gap-2.5 py-1 items-center pl-3 pr-7 cursor-pointer">
  <FaUserPlus size={22} />
  <span>
@@ -227,7 +224,7 @@ const ContributorHighlightCard = ({
  <span>Follow {user}</span>
  </div>
  </DropdownMenuItem>
- ));
+ );
  }
 
  return (
@@ -269,11 +266,8 @@ const ContributorHighlightCard = ({
  <span>Share to Linkedin</span>
  </a>
  </DropdownMenuItem>
- <DropdownMenuItem
- onClick={() => handleCopyToClipboard(`${host}/feed/${id}`)}
- className="rounded-md"
- >
- <div className = "flex gap-2.5 py-1 items-center pl-3 pr-7 cursor-pointer">
+ <DropdownMenuItem onClick={() => handleCopyToClipboard(`${host}/feed/${id}`)} className="rounded-md">
+ <div className="flex gap-2.5 py-1 items-center pl-3 pr-7 cursor-pointer">
  <BsLink45Deg size={22} />
  <span>Copy link</span>
  </div>