feat: notes | some more tweaks (#543)

* [Fix] Skip Line When Add Image why: so the text will be under and not beside the image how: "\n\n" add to image text * [Fix] Remove String Comparison Helper Function why: string is primitive data type so we can compare with "===" how: use "===" instead * [Feat] Make Indection That the Note Was Picked why: better ux how: this note's position changes a little bit * [Feat] Change SearchInputBox Func & Styles why: so when we click on icon we focus inside, style icon inside how: with focus() and blur() * [Feat] Limit Title For Picked Note in List Of Notes why: so the title will not be under the pin icon how: limit to 25 char * [Fix] Make Better Indication For Picked Note why: looks better how: change some styles
th3cyb3rhub · Dec 17, 2023 · 2ee1326 · 2ee1326
1 parent 0f4056e
commit 2ee1326
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 41 deletions.
diff --git a/src/components/Common/MarkdownEditor/CheckBoxClickable.jsx b/src/components/Common/MarkdownEditor/CheckBoxClickable.jsx
@@ -1,21 +1,13 @@
 import React from "react";
 
-const compareStrings = (str1, str2) => {
-    for (let i = 0, j = 0; i < str1.length || j < str2.length; i++, j++) {
-        if (i >= str1.length) return false;
-        if (j >= str2.length) return false;
-        if (str1[i] !== str2[j]) return false;
-    }
-    return true;
-};
 const CheckBoxClickable = ({ value, onChangeValue, disabled, ...props }) => {
     if (disabled) return <input {...props} disabled={true} />;
 
     const handleCheckBoxChange = (e) => {
         const textOfCheckBox = e.target.parentNode.textContent;
         const valueListOfLines = value.split("\n");
-        const findCheckedBoxLineIndex = valueListOfLines.findIndex((item) =>
-            compareStrings(item?.replace(/- \[ \]|- \[[^]]+/, ""), textOfCheckBox.split("\n")[0]),
+        const findCheckedBoxLineIndex = valueListOfLines.findIndex(
+            (item) => item?.replace(/- \[ \]|- \[[^]]+/, "") === textOfCheckBox.split("\n")[0],
         );
         valueListOfLines[findCheckedBoxLineIndex] = valueListOfLines[findCheckedBoxLineIndex].replace(
             /- \[ \]|- \[[^]]+/,

diff --git a/src/components/Common/MarkdownEditor/useImageUploadEvents.jsx b/src/components/Common/MarkdownEditor/useImageUploadEvents.jsx
@@ -17,7 +17,7 @@ const useImageUploadEvents = (prevContent, setContent, pageName) => {
             const API_URL = getApiUrl("api/upload");
             await axios.post(API_URL, formData);
             const newImageUrl = cdnContentImagesUrl(`/${pageName}/${fileName.split("-")[1]}`);
-            setContent(prevContent + `\n![PLEASE_ADD_A_NAME_FOR_THIS_IMAGE_HERE](${newImageUrl})`);
+            setContent(prevContent + `\n![PLEASE_ADD_A_NAME_FOR_THIS_IMAGE_HERE](${newImageUrl})\n\n`);
         };
         reader.readAsArrayBuffer(file);
     };

diff --git a/src/components/Common/SearchInputBox/SearchInputBox.jsx b/src/components/Common/SearchInputBox/SearchInputBox.jsx
@@ -1,11 +1,30 @@
-import React from "react";
+import React, { useRef, useState } from "react";
 import { SearchBox, SearchIcon, SearchInput } from "./SearchInputBoxElements";
 
 const SearchInputBox = ({ placeholder, value, onChange }) => {
+    const inputRef = useRef(null);
+    const [isFocused, setIsFocused] = useState(false);
+
+    const handleFocus = () => {
+        setIsFocused(true);
+        inputRef.current.focus();
+    };
+    const handleFocusOut = () => {
+        setIsFocused(false);
+        inputRef.current.blur();
+    };
     return (
         <SearchBox>
-            <SearchIcon />
-            <SearchInput type="text" placeholder={placeholder} value={value} onChange={onChange} />
+            <SearchIcon onClick={handleFocus} />
+            <SearchInput
+                onClick={handleFocus}
+                onBlur={handleFocusOut}
+                type="text"
+                placeholder={isFocused ? "" : placeholder}
+                value={value}
+                onChange={onChange}
+                ref={inputRef}
+            />
         </SearchBox>
     );
 };

diff --git a/src/components/Common/SearchInputBox/SearchInputBoxElements.jsx b/src/components/Common/SearchInputBox/SearchInputBoxElements.jsx
@@ -9,28 +9,25 @@ export const SearchInput = styled.input`
     font-size: 16px;
     width: 300px;
     border-radius: 0 4px 4px 0;
+    outline: none;
     @media screen and (max-width: 380px) {
         width: 100%;
     }
 
     @media screen and (max-width: 800px) {
         width: 100%;
     }
-
-    &:focus {
-        outline: none;
-        box-shadow: 0 0 0 1px #1a1c1d;
-    }
 `;
 export const SearchBox = styled.div`
     display: flex;
+    position: relative;
+    left: 0;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: start;
     align-items: center;
-    gap: 10px;
-    background: #131313;
-    border-radius: 5px;
-    padding: 0 0 0 10px;
+    background: #252525;
+    border-radius: 10px;
+    padding: 0 5px;
     @media screen and (max-width: 380px) {
         width: 100%;
     }

diff --git a/src/components/Dashboard/Notetaker/NoteApp.jsx b/src/components/Dashboard/Notetaker/NoteApp.jsx
@@ -87,7 +87,7 @@ const NoteApp = () => {
                 {isNoteLoading ? (
                     <LoadingSpinner />
                 ) : (
-                    <NoteList onPin={handlePinNote} onPick={handlePickNote}>
+                    <NoteList onPin={handlePinNote} onPick={handlePickNote} pickedNoteId={pickedNote._id}>
                         {filteredNotes}
                     </NoteList>
                 )}

diff --git a/src/components/Dashboard/Notetaker/NoteElements.jsx b/src/components/Dashboard/Notetaker/NoteElements.jsx
@@ -43,6 +43,7 @@ export const SearchContainer = styled.div`
     background-color: #111111;
     border-top: 0px;
     height: 3rem;
+    padding: 0 0 0 10px;
 `;
 
 export const NotesListContainer = styled.ul`
@@ -69,13 +70,15 @@ export const NoteItemElementContainer = styled.div`
 `;
 export const NoteItemElement = styled.li`
     display: flex;
+    position: relative;
     flex-direction: column;
     justify-content: start;
     align-items: start;
     width: 100%;
     padding: 10px;
     gap: 5px;
-    background-color: ${(props) => (props.isPinned ? "#2a2a2a" : "#090909")};
+    background-color: ${(props) => (props.isPicked ? "#2a2a2a" : "#090909")};
+    border: ${(props) => (props.isPinned ? "1px solid #2a2a2a" : "none")};
     color: #f5f5f5;
     &:hover {
         background-color: #383838;

diff --git a/src/components/Dashboard/Notetaker/NoteItem.jsx b/src/components/Dashboard/Notetaker/NoteItem.jsx
@@ -15,12 +15,12 @@ const shortText = (text, letters) => {
     return text?.length > letters ? `${text.slice(0, letters)}...` : text;
 };
 
-const NoteItem = ({ _id, title, content, pinned, onPick, onPin }) => {
+const NoteItem = ({ _id, title, content, pinned, onPick, onPin, isPicked }) => {
     const [shortTitle, setShortTitle] = useState("");
     const [shortDescr, setShortDescr] = useState("");
 
     useEffect(() => {
-        setShortTitle(() => title && shortText(title, 30));
+        setShortTitle(() => title && shortText(title, 25));
         setShortDescr(() => {
             if (!content) return "(Empty)";
             const cleanContent = cleanFromTags(content);
@@ -30,7 +30,7 @@ const NoteItem = ({ _id, title, content, pinned, onPick, onPin }) => {
 
     return (
         <NoteItemElementContainer>
-            <NoteItemElement isPinned={pinned} onClick={() => onPick(_id)}>
+            <NoteItemElement isPinned={pinned} onClick={() => onPick(_id)} isPicked={isPicked}>
                 <NoteItemShortTitle>{shortTitle}</NoteItemShortTitle>
                 <NoteItemShortDescription empty={shortDescr === "(Empty)"}>{shortDescr}</NoteItemShortDescription>
             </NoteItemElement>

diff --git a/src/components/Dashboard/Notetaker/NoteList.jsx b/src/components/Dashboard/Notetaker/NoteList.jsx
@@ -2,12 +2,12 @@ import React from "react";
 import { NotesListContainer, NotesListNoFound } from "./NoteElements";
 import NoteItem from "./NoteItem";
 
-const NoteList = ({ children, onPick, onPin }) => {
+const NoteList = ({ children, onPick, onPin, pickedNoteId }) => {
     return (
         <NotesListContainer>
             {!children.length && <NotesListNoFound>There Are No Notes</NotesListNoFound>}
             {children.map((note) => (
-                <NoteItem key={note._id} {...note} onPick={onPick} onPin={onPin} />
+                <NoteItem key={note._id} {...note} onPick={onPick} onPin={onPin} isPicked={note._id === pickedNoteId} />
             ))}
         </NotesListContainer>
     );

diff --git a/src/components/Feeds/Feeds.jsx b/src/components/Feeds/Feeds.jsx
@@ -11,7 +11,7 @@ import UnderMaintenance from "../Other/UnderMaintenance/UnderMaintenance";
 import apiStatus from "../../features/apiStatus";
 import FeedTags from "./FeedTags/FeedTags";
 import { LeftContainer, SearchContainer } from "../Explore/ExploreElements";
-import { SearchBox, SearchIcon, SearchInput } from "../Common/SearchInputBox/SearchInputBoxElements";
+import SearchInputBox from "../Common/SearchInputBox";
 
 const Feeds = () => {
     const dispatch = useDispatch();
@@ -61,15 +61,11 @@ const Feeds = () => {
                 </MiddleSection>
                 <LeftContainer style={{ padding: "25px 0" }}>
                     <SearchContainer>
-                        <SearchBox>
-                            <SearchIcon />
-                            <SearchInput
-                                type="text"
-                                placeholder="Search by name"
-                                value={searchTerm}
-                                onChange={handleSearchTermChange}
-                            />
-                        </SearchBox>
+                        <SearchInputBox
+                            placeholder="Search by name"
+                            value={searchTerm}
+                            onChange={handleSearchTermChange}
+                        />
                     </SearchContainer>
                     <FeedTags tags={feedTags} />
                 </LeftContainer>