Merge pull request #297 from danieltovbin/daniel-editing-statement

Daniel editing statement
talyaron · Aug 14, 2024 · c46ff4d · c46ff4d
2 parents cec3e77 + aa06323
commit c46ff4d
Show file tree

Hide file tree

Showing 12 changed files with 212 additions and 210 deletions.
diff --git a/src/controllers/hooks/useAutoFocus .ts b/src/controllers/hooks/useAutoFocus .ts
@@ -0,0 +1,22 @@
+import { useEffect, useRef } from "react";
+
+const useAutoFocus = (isEdit: boolean) => {
+	const inputRef = useRef<HTMLTextAreaElement | null>(null);
+
+	useEffect(() => {
+		if (isEdit && inputRef.current) {
+			const { current } = inputRef;
+			const length = current.value.length;
+			current.focus();
+			current.setSelectionRange(length, length);
+
+			if (current) {
+				current.style.height = `${current.scrollHeight}px`;
+			}
+		}
+	}, [isEdit]);
+
+	return inputRef;
+};
+
+export default useAutoFocus;
diff --git a/src/view/components/buttons/GoogleLoginButton.tsx b/src/view/components/buttons/GoogleLoginButton.tsx
@@ -11,10 +11,10 @@ export default function GoogleLoginButton() {
 	const { t } = useLanguage();
 
 	return (
-		<button 
-			className={`${styles.googleLogin} ${direction === 'row' ? styles.ltr : styles.rtl}`}
-			onClick={googleLogin}>
-			
+		<button
+			className={`${styles.googleLogin} ${direction === "row" ? styles.ltr : styles.rtl}`}
+			onClick={googleLogin}
+		>
 			<img
 				src={direction === "row-reverse" ? moreRight : moreLeft}
 				alt="login-with-google"

diff --git a/src/view/components/edit/EditTitle.tsx b/src/view/components/edit/EditTitle.tsx
@@ -1,12 +1,4 @@
-import {
-	ChangeEvent,
-	Dispatch,
-	FC,
-	SetStateAction,
-	useEffect,
-	useRef,
-	useState,
-} from "react";
+import { ChangeEvent, Dispatch, FC, SetStateAction, useState } from "react";
 
 // Third party
 import { Statement } from "delib-npm";
@@ -15,13 +7,14 @@ import { Statement } from "delib-npm";
 import { updateStatementText } from "@/controllers/db/statements/setStatements";
 
 // Styles
-import styles from "./EditTitle.module.scss";
 import Save from "@/assets/icons/saveIcon.svg?react";
+import styles from "./EditTitle.module.scss";
 
 // Custom components
-import Text from "../text/Text";
 import { getDescription, getTitle } from "@/controllers/general/helpers";
+import useAutoFocus from "@/controllers/hooks/useAutoFocus ";
 import { useLanguage } from "@/controllers/hooks/useLanguages";
+import Text from "../text/Text";
 
 interface Props {
   statement: Statement | undefined;
@@ -40,22 +33,14 @@ const EditTitle: FC<Props> = ({
 }) => {
 	const [text, setText] = useState(statement?.statement || "");
 	const [title, setTitle] = useState(getTitle(statement) || "");
-	const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+	const textareaRef = useAutoFocus(isEdit);
 
 	if (!statement) return null;
 
 	const { dir: direction } = useLanguage();
 
 	const align = direction === "ltr" ? "left" : "right";
 
-	useEffect(() => {
-		if (isEdit && textareaRef.current) {
-			const length = textareaRef.current.value.length;
-			textareaRef.current.focus();
-			textareaRef.current.setSelectionRange(length, length);
-		}
-	}, [isEdit]);
-
 	function handleChange(
 		e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
 		setState: Dispatch<SetStateAction<string>>

diff --git a/src/view/pages/statement/components/chat/components/chatMessageCard/ChatMessageCard.scss b/src/view/pages/statement/components/chat/components/chatMessageCard/ChatMessageCard.scss
@@ -6,21 +6,21 @@
   margin: auto;
   padding: 0.3rem;
   padding-inline: 1rem;
-
+  
   .user {
     display: flex;
     align-items: center;
     gap: 1rem;
     padding-top: 0.5rem;
   }
-
+  
   .message-box {
     height: fit-content;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     gap: 0.5rem;
-    background-color: var(--white);
+    background-color: var(--inputBackground);
     padding: 1rem;
     border-radius: 10px;
     box-shadow: 3px 3px 3px var(--shadow);
@@ -42,9 +42,10 @@
       display: flex;
       position: relative;
       .info-text {
-        word-break: break-all;
         flex: 1;
         // display: flex;
+        padding: var(--info-text-padding);
+        background-color: var(--background-color-info-text);
       }
     }
     .actions {
@@ -138,16 +139,14 @@
   position: relative;
   display: flex;
   align-items: center;
+  background-color: var(--white);
 }
 
 .edit-input {
-  width: 100%;
-  padding-right: 40px; 
   direction: rtl; 
+  overflow: hidden;
 }
 
 .save-icon {
-  position: absolute;
-  right: 1px;
   cursor: pointer;
 }
diff --git a/src/view/pages/statement/components/chat/components/chatMessageCard/ChatMessageCard.tsx b/src/view/pages/statement/components/chat/components/chatMessageCard/ChatMessageCard.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from "react";
+import { ChangeEvent, FC, useState } from "react";
 
 // Third Party Imports
 import { Statement, StatementType, User, isOptionFn } from "delib-npm";
@@ -9,24 +9,22 @@ import { statementSubscriptionSelector } from "@/model/statements/statementsSlic
 import { store } from "@/model/store";
 
 // Helper functions
-import {
-	isAuthorized,
-	linkToChildren,
-} from "@/controllers/general/helpers";
+import { isAuthorized, linkToChildren } from "@/controllers/general/helpers";
 
 // Hooks
 import useStatementColor from "@/controllers/hooks/useStatementColor";
 
 // Custom Components
 import EditTitle from "@/view/components/edit/EditTitle"; // Import EditTitle component
-import UserAvatar from "../userAvatar/UserAvatar";
 import StatementChatMore from "../StatementChatMore";
+import UserAvatar from "../userAvatar/UserAvatar";
 
 // import Evaluation from "../../../../../components/evaluation/simpleEvaluation/SimplEvaluation";
 import AddQuestionIcon from "@/assets/icons/addQuestion.svg?react";
 import EditIcon from "@/assets/icons/editIcon.svg?react";
 import LightBulbIcon from "@/assets/icons/lightBulbIcon.svg?react";
 import QuestionMarkIcon from "@/assets/icons/questionIcon.svg?react";
+import SaveTextIcon from "@/assets/icons/SaveTextIcon.svg";
 import {
 	setStatementIsOption,
 	updateIsQuestion,
@@ -36,22 +34,22 @@ import { useLanguage } from "@/controllers/hooks/useLanguages";
 import Menu from "@/view/components/menu/Menu";
 import MenuOption from "@/view/components/menu/MenuOption";
 import CreateStatementModal from "@/view/pages/statement/components/createStatementModal/CreateStatementModal";
-import SaveTextIcon from "@/assets/icons/SaveTextIcon.svg"; 
 
+import useAutoFocus from "@/controllers/hooks/useAutoFocus ";
 import "./ChatMessageCard.scss";
 
 export interface NewQuestion {
-	statement: Statement;
-	isOption: boolean;
-	showModal: boolean;
+  statement: Statement;
+  isOption: boolean;
+  showModal: boolean;
 }
 
 interface ChatMessageCardProps {
-	parentStatement: Statement;
-	statement: Statement;
-	showImage: (statement: User | null) => void;
-	index: number;
-	previousStatement: Statement | undefined;
+  parentStatement: Statement;
+  statement: Statement;
+  showImage: (statement: User | null) => void;
+  index: number;
+  previousStatement: Statement | undefined;
 }
 
 const ChatMessageCard: FC<ChatMessageCardProps> = ({
@@ -90,9 +88,10 @@ const ChatMessageCard: FC<ChatMessageCardProps> = ({
 	const isOption = isOptionFn(statement);
 	const isStatement = statementType === StatementType.statement;
 	const isParentOption = isOptionFn(parentStatement);
+	const textareaRef = useAutoFocus(isEdit);
 
 	const shouldLinkToChildStatements =
-		(isQuestion || isOption) && parentStatement.hasChildren;
+    (isQuestion || isOption) && parentStatement.hasChildren;
 
 	const isPreviousFromSameAuthor = previousStatement?.creatorId === creatorId;
 
@@ -118,7 +117,7 @@ const ChatMessageCard: FC<ChatMessageCardProps> = ({
 	}
 
 	function handleTextChange(
-		e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
+		e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
 	) {
 		setText(e.target.value);
 	}
@@ -135,7 +134,6 @@ const ChatMessageCard: FC<ChatMessageCardProps> = ({
 		}
 	}
 
-
 	return (
 		<div
 			className={`chat-message-card ${isAlignedLeft && "aligned-left"} ${dir}`}
@@ -148,28 +146,36 @@ const ChatMessageCard: FC<ChatMessageCardProps> = ({
 			)}
 
 			<div
-				className={isStatement ? "message-box message-box--statement":"message-box"}
+				className={
+					isStatement ? "message-box message-box--statement" : "message-box"
+				}
 				style={{ borderColor: statementColor.backgroundColor }}
 			>
 				{!isPreviousFromSameAuthor && <div className="triangle" />}
 
 				<div className="info">
 					<div className="info-text">
 						{isEdit ? (
-							<div className="input-wrapper">
+							<div
+								className="input-wrapper"
+								style={{ flexDirection: isAlignedLeft ? "row" : "row-reverse" }}
+							>
 								<textarea
+									ref={textareaRef}
 									className="edit-input"
 									value={text}
 									onChange={handleTextChange}
 									autoFocus={true}
 									style={{ direction: dir }}
 								/>
-								<img
-									src={SaveTextIcon}
-									onClick={handleSave}
-									className="save-icon"
-									alt="Save Icon"
-								/>
+								<button>
+									<img
+										src={SaveTextIcon}
+										onClick={handleSave}
+										className="save-icon"
+										alt="Save Icon"
+									/>
+								</button>
 							</div>
 						) : (
 							<EditTitle
@@ -248,4 +254,4 @@ const ChatMessageCard: FC<ChatMessageCardProps> = ({
 	);
 };
 
-export default ChatMessageCard;
+export default ChatMessageCard;