added support of editing titles and changed size of cards

alexholub113 · Dec 4, 2023 · 4e1e2be · 4e1e2be
1 parent eb955cb
commit 4e1e2be
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 25 deletions.
diff --git a/client/src/components/Layout.tsx b/client/src/components/Layout.tsx
@@ -3,7 +3,7 @@ import React, { PropsWithChildren } from 'react';
 const Layout: React.FC<PropsWithChildren> = ({ children }) => {
     return (
         <div className="flex items-center justify-center">
-            <div className="flex flex-col items-center pb-52 w-full px-4 min-w-[300px] max-w-[2048px]">
+            <div className="flex flex-col items-center pb-52 w-full px-4 min-w-[300px] max-w-screen-2xl">
                 {children}
             </div>
         </div>

diff --git a/client/src/components/LinkListItem/LinkListItem.tsx b/client/src/components/LinkListItem/LinkListItem.tsx
@@ -7,7 +7,6 @@ import { useState } from 'react';
 import { useLinkStore } from '../../contexts/AppContext.tsx';
 import LinkListItemActionPanel from './LinkListItemActionPanel.tsx';
 import useAsyncAction from '../../hooks/useAsyncAction.ts';
-import LinkType from '../../models/LinkType.ts';
 
 const LinkListItem = ({ link }: { link: Link }) => {
     const [updating, setUpdating] = useState(false);
@@ -19,7 +18,9 @@ const LinkListItem = ({ link }: { link: Link }) => {
     };
 
     const handleOnTitleUpdate = (title: string) => {
-        execute({ ...link, title });
+        if (title !== link.title) {
+            execute({ ...link, title });
+        }
     }
 
     const handleOnTagSelect = (tag: string) => {
@@ -44,8 +45,8 @@ const LinkListItem = ({ link }: { link: Link }) => {
                     onCancelClick={() => setUpdating(false)}
                     onEditClick={handleOnEditClick} />
             </div>
-            <LinkListItemTags updating={updating} tags={link.tags} onTagSelect={handleOnTagSelect} />
-            <LinkListItemTitle editable={updating && link.type !== LinkType.Youtube} title={link.title} onUpdate={handleOnTitleUpdate} />
+            <LinkListItemTags editable={updating} tags={link.tags} onTagSelect={handleOnTagSelect} />
+            <LinkListItemTitle editable={updating} title={link.title} onUpdate={handleOnTitleUpdate} />
             <LinkListItemAuthor {...link} />
         </>
     );

diff --git a/client/src/components/LinkListItem/LinkListItemTags.tsx b/client/src/components/LinkListItem/LinkListItemTags.tsx
@@ -5,12 +5,12 @@ import AddTagButton from './AddTagButton.tsx';
 
 type LinkListItemTagsProps = {
     tags: string[];
-    updating?: boolean;
+    editable?: boolean;
     error?: string;
     onTagSelect: (tag: string) => void;
 };
 
-const LinkListItemTags = observer(({ tags, updating, error, onTagSelect }: LinkListItemTagsProps) => {
+const LinkListItemTags = observer(({ tags, editable, error, onTagSelect }: LinkListItemTagsProps) => {
     const handleOnTagSelect = (tag: string) => {
         if (onTagSelect) {
             onTagSelect(tag);
@@ -21,11 +21,11 @@ const LinkListItemTags = observer(({ tags, updating, error, onTagSelect }: LinkL
         <>
             <div className="flex flex-wrap gap-2 items-center">
                 {tags.map((tag) => (
-                    <TagBadge key={tag} onClick={() => handleOnTagSelect(tag)} name={tag} removable={updating} active />
+                    <TagBadge key={tag} onClick={() => handleOnTagSelect(tag)} name={tag} removable={editable} active />
                 ))}
-                { updating && tags.length < MaxTags && <AddTagButton exclude={updating ? tags : []} onTagSelect={handleOnTagSelect} />}
+                { editable && tags.length < MaxTags && <AddTagButton exclude={editable ? tags : []} onTagSelect={handleOnTagSelect} />}
             </div>
-            { updating && error && (<span className="text-red-500 text-sm">{error}</span>) }
+            { editable && error && (<span className="text-red-500 text-sm">{error}</span>) }
         </>
     );
 });

diff --git a/client/src/components/LinkListItem/LinkListItemTitle.tsx b/client/src/components/LinkListItem/LinkListItemTitle.tsx
@@ -11,7 +11,7 @@ type LinkListItemTitleProps = {
 const LinkListItemTitle = ({ title, onUpdate, editable, error }: LinkListItemTitleProps) => {
     const [value, setValue] = useState(title);
 
-    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
         setValue(event.target.value);
     };
 
@@ -24,12 +24,12 @@ const LinkListItemTitle = ({ title, onUpdate, editable, error }: LinkListItemTit
     return (
         <>
             { editable && (
-                <input type="text"
+                <textarea
                        value={value}
                        onChange={handleInputChange}
                        onBlur={handleEditEnd}
                        placeholder="Set title"
-                       className="p-2 group secondary-text-color dark-border w-full bg-zinc-900 focus:outline-none font-medium rounded-lg text-sm"
+                       className="resize-none p-2 group secondary-text-color dark-border w-full bg-zinc-900 focus:outline-none font-medium rounded-lg text-sm"
                 />
             )}
             { !editable && (

diff --git a/client/src/screens/AddLink/AddLinkScreen.tsx b/client/src/screens/AddLink/AddLinkScreen.tsx
@@ -59,12 +59,11 @@ const AddLinkScreen = observer(({ onSuccess }: { onSuccess: () => void}) => {
             <UrlInput onSubmit={handleSubmit} isLoading={isLoading} initialUrl={url} />
             { !isLoading && previewErrorMessage && <ErrorAlert message={previewErrorMessage} onClose={() => setPreviewErrorMessage(undefined)} /> }
             { !isLoading && (!url || previewErrorMessage) && <AddLinkInfoAlert /> }
-            { isLoading && <LinkListItemSkeleton /> }
-            { link && (
-                <div className="mt-6">
-                    <AddLinkForm onSuccess={onSuccess} link={link} />
-                </div>
-            )}
+
+            <div className="flex flex-col items-center justify-center gap-4 mt-6">
+                { isLoading && <LinkListItemSkeleton /> }
+                { link && <AddLinkForm onSuccess={onSuccess} link={link} /> }
+            </div>
         </div>
     );
 });

diff --git a/client/src/screens/AddLink/components/AddLinkForm.tsx b/client/src/screens/AddLink/components/AddLinkForm.tsx
@@ -7,7 +7,6 @@ import PreviewLink from '../../../models/PreviewLink.ts';
 import LinkListItemContent from '../../../components/LinkListItem/LinkListItemContent.tsx';
 import LinkListItemTitle from '../../../components/LinkListItem/LinkListItemTitle.tsx';
 import LinkListItemTags from '../../../components/LinkListItem/LinkListItemTags.tsx';
-import LinkType from '../../../models/LinkType.ts';
 
 type LocalState = {
     isSubmitting: boolean;
@@ -74,19 +73,19 @@ const AddLinkForm = ({ onSuccess, link }: AddLinkFormProps) => {
     };
 
     return (
-        <div className="flex flex-col items-center justify-center gap-4">
+        <>
             <div className="link-item-wrapper">
                 <LinkListItemContent {...link} />
-                <LinkListItemTags updating tags={link.tags} onTagSelect={handleOnTagSelect} error={state.tagsError} />
-                <LinkListItemTitle editable={link.type !== LinkType.Youtube} title={link.title} onUpdate={updateTitle} error={state.titleError} />
+                <LinkListItemTags editable tags={link.tags} onTagSelect={handleOnTagSelect} error={state.tagsError} />
+                <LinkListItemTitle editable title={link.title} onUpdate={updateTitle} error={state.titleError} />
             </div>
             <SubmitButton isLoading={state.isSubmitting} onClick={submitHandler} type="button" className="px-4 text-xl font-medium dark:text-white">
                 Submit
             </SubmitButton>
             { state.submitErrorMessage &&
                 <ErrorAlert className="mt-4" message={state.submitErrorMessage}
                             onClose={() => dispatch({ submitErrorMessage: undefined })} /> }
-        </div>
+        </>
     );
 };
 

diff --git a/client/src/styles/index.scss b/client/src/styles/index.scss
@@ -41,5 +41,5 @@
 }
 
 .link-item-wrapper {
-  @apply flex flex-col gap-2 w-full md:max-w-screen-sm border-gray-200 rounded-lg dark:shadow-xl dark:shadow-zinc-900 bg-transparent mt-6;
+  @apply flex flex-col gap-2 w-96 rounded-lg bg-transparent mt-6;
 }