Victor.chavarro/feat/add info touched snippet item

README.md

@@ -4,15 +4,19 @@ Snippets platform to save pieces of code
 ![snippetss](https://github.com/vianch/snippets/assets/1800887/5eaf70f8-7b3c-4a08-ae02-5cad90a9a380)
 
 ### Live demo
+
 [Try the demo](https://snippets.vianch.com/)
 
-## About 
+## About
+
 ### What is snippets?
-Snippets is a platform designed to help you save pieces of code and organize your development workflow. With Snippets, you can easily store and retrieve code snippets, making it easier to reuse and share code between projects.
 
+Snippets is a platform designed to help you save pieces of code and organize your development workflow. With Snippets, you can easily store and retrieve code snippets, making it easier to reuse and share code between projects.
 
 ### Why snippets?
+
 By using Snippets, you can:
+
 - Reduce repetition and improve code consistency
 - Easily share and collaborate with others on code snippets
 - Keep track of your progress and learn from previous work
@@ -35,24 +39,23 @@ cd snippets
 yarn install
 ```
 
-| Script        | Description                                                                                            |
-|---------------|--------------------------------------------------------------------------------------------------------|
-| `yarn init`   | Resets the project setup by removing node modules and lock files, then reinstalls dependencies.       |
-| `yarn dev`    | Starts the development server.                                                                        |
-| `yarn build`  | Builds the application for production usage.                                                          |
-| `yarn start`  | Runs the built app in production mode.                                                                |
-| `yarn lint`   | Runs all linting scripts for code style, styling, and formatting.                                     |
-
+| Script       | Description                                                                                     |
+| ------------ | ----------------------------------------------------------------------------------------------- |
+| `yarn init`  | Resets the project setup by removing node modules and lock files, then reinstalls dependencies. |
+| `yarn dev`   | Starts the development server.                                                                  |
+| `yarn build` | Builds the application for production usage.                                                    |
+| `yarn start` | Runs the built app in production mode.                                                          |
+| `yarn lint`  | Runs all linting scripts for code style, styling, and formatting.                               |
 
-### Linting 
+### Linting
 
 ```bash
 yarn lint
 ```
 
 ## Author
-Developed by info@vianch.com. Feel free to reach out for any questions or contributions!
 
+Developed by info@vianch.com. Feel free to reach out for any questions or contributions!
 
 # Packages used
 

app/components/SnippetItem/SnippetItem.tsx

@@ -0,0 +1,81 @@
+import { FC, ReactElement, MouseEvent } from "react";
+
+/* Components */
+import Trash from "@/components/ui/icons/Trash";
+import Restore from "@/components/ui/icons/Restore";
+
+import styles from "@/components/SnippetList/snippetlist.module.css";
+
+interface SnippetItemPropsComponent extends SnippetItemProps {
+	dateFormatted: string;
+	snippet: Snippet | null | undefined;
+	originalIndex: number;
+	isTrashActive: boolean;
+}
+
+const SnippetItem: FC<SnippetItemPropsComponent> = ({
+	snippet,
+	dateFormatted,
+	codeEditorStates: { activeSnippetIndex, touched },
+	isTrashActive,
+	originalIndex,
+	onActiveSnippet,
+	onDeleteSnippet,
+	onRestoreSnippet,
+}: SnippetItemPropsComponent): ReactElement => {
+	if (snippet) {
+		const snippetClickHandler = (
+			event: MouseEvent<HTMLLIElement>,
+			index: number
+		): void => {
+			event.preventDefault();
+			onActiveSnippet(index);
+		};
+
+		const isSnippetActive = activeSnippetIndex === originalIndex;
+
+		return (
+			<li
+				className={`${styles.snippetItem} ${isSnippetActive ? styles.active : ""}`}
+				key={snippet.snippet_id}
+				onClick={(event: MouseEvent<HTMLLIElement>) =>
+					snippetClickHandler(event, originalIndex)
+				}
+			>
+				<div className={styles.itemLeftSide}>
+					{!isTrashActive && (
+						<Trash
+							className={styles.trashIcon}
+							width="18"
+							height="18"
+							onClick={() =>
+								onDeleteSnippet(snippet?.snippet_id, originalIndex, "inactive")
+							}
+						/>
+					)}
+
+					{snippet?.state === "inactive" && (
+						<Restore
+							className={styles.restoreIcon}
+							width="18"
+							height="18"
+							onClick={() =>
+								onRestoreSnippet(snippet?.snippet_id, originalIndex, "active")
+							}
+						/>
+					)}
+					{touched && isSnippetActive && "* "}
+					{snippet?.name ?? "Untitled"}
+				</div>
+
+				{dateFormatted && (
+					<span className={styles.snippetDate}>{dateFormatted}</span>
+				)}
+			</li>
+		);
+	}
+
+	return <></>;
+};
+
+export default SnippetItem;

app/components/SnippetList/SnippetList.tsx

@@ -2,7 +2,6 @@
 
 import {
 	ChangeEvent,
-	MouseEvent,
 	ReactElement,
 	useMemo,
 	useRef,
@@ -23,46 +22,33 @@ import useMenuStore from "@/lib/store/menu";
 
 /* Components */
 import Trash from "@/components/ui/icons/Trash";
-import Restore from "@/components/ui/icons/Restore";
 import NewFile from "@/components/ui/icons/NewFile";
 import Alert from "@/components/ui/Alert/Alert";
 import Check from "@/components/ui/icons/Check";
 import CloseSquare from "@/components/ui/icons/CloseSquare";
 import Loading from "@/components/ui/icons/Loading";
+import SnippetItem from "@/components/SnippetItem/SnippetItem";
 
 /* Styles */
 import styles from "./snippetlist.module.css";
 
-type DeleteRestoreFunction = (
-	snippetId: UUID,
-	index: number,
-	state: SnippetState
-) => void;
-
-type SnippetListProps = {
+interface SnippetListProps extends SnippetItemProps {
 	snippets?: Snippet[];
-	codeEditorStates: SnippetEditorStates;
-	onActiveSnippet: (index: number) => void;
 	onNewSnippet: (newSnippet: Snippet) => void;
-	onDeleteSnippet: DeleteRestoreFunction;
-	onRestoreSnippet: DeleteRestoreFunction;
 	onEmptyTrash: () => void;
-};
+}
 
 const SnippetList = ({
 	snippets = [],
-	codeEditorStates: { activeSnippetIndex, menuType },
+	codeEditorStates,
 	onNewSnippet,
 	onActiveSnippet,
 	onDeleteSnippet,
 	onRestoreSnippet,
 	onEmptyTrash,
 }: SnippetListProps): ReactElement => {
-	const [searchData, setSearchData] = useState<{
-		searchQuery: string;
-		originalSnippets: Snippet[];
-		snippetsFound: Snippet[];
-	}>({
+	const { menuType } = codeEditorStates ?? {};
+	const [searchData, setSearchData] = useState<SearchData>({
 		searchQuery: "",
 		originalSnippets: snippets,
 		snippetsFound: snippets,
@@ -80,14 +66,6 @@ const SnippetList = ({
 		[snippets]
 	);
 
-	const snippetClickHandler = (
-		event: MouseEvent<HTMLLIElement>,
-		index: number
-	): void => {
-		event.preventDefault();
-		onActiveSnippet(index);
-	};
-
 	const newSnippetHandler = async (): Promise<void> => {
 		const newSnippet = await setNewSnippet();
 
@@ -104,7 +82,7 @@ const SnippetList = ({
 			searchQuery: event.target.value,
 			snippetsFound:
 				event.target.value?.length > 0
-					? searchData.originalSnippets.filter((item) =>
+					? searchData.originalSnippets.filter((item: Snippet) =>
 							item.name
 								.toLowerCase()
 								.includes(searchData.searchQuery.toLowerCase())
@@ -221,48 +199,17 @@ const SnippetList = ({
 						const originalIndex = getSnippetIndex(snippet.snippet_id);
 
 						return (
-							<li
-								className={`${styles.snippetItem} ${activeSnippetIndex === originalIndex ? styles.active : ""}`}
+							<SnippetItem
 								key={snippet.snippet_id}
-								onClick={(event) => snippetClickHandler(event, originalIndex)}
-							>
-								<div className={styles.itemLeftSide}>
-									{!isTrashActive && (
-										<Trash
-											className={styles.trashIcon}
-											width="18"
-											height="18"
-											onClick={() =>
-												onDeleteSnippet(
-													snippet?.snippet_id,
-													originalIndex,
-													"inactive"
-												)
-											}
-										/>
-									)}
-
-									{snippet?.state === "inactive" && (
-										<Restore
-											className={styles.restoreIcon}
-											width="18"
-											height="18"
-											onClick={() =>
-												onRestoreSnippet(
-													snippet?.snippet_id,
-													originalIndex,
-													"active"
-												)
-											}
-										/>
-									)}
-									{snippet?.name ?? "Untitled"}
-								</div>
-
-								<span className={styles.snippetDate}>
-									{formattedDates[originalIndex]}
-								</span>
-							</li>
+								snippet={snippet}
+								dateFormatted={formattedDates[originalIndex]}
+								isTrashActive={isTrashActive}
+								originalIndex={originalIndex}
+								codeEditorStates={codeEditorStates}
+								onActiveSnippet={onActiveSnippet}
+								onDeleteSnippet={onDeleteSnippet}
+								onRestoreSnippet={onRestoreSnippet}
+							/>
 						);
 					})}
 				</ul>

package.json

@@ -56,6 +56,6 @@
 		"prettier": "^3.1.1",
 		"stylelint": "^16.2.1",
 		"stylelint-config-standard": "^36.0.0",
-		"typescript": "^5"
+		"typescript": "5.3.3"
 	}
 }

types/snippets.d.ts

@@ -38,4 +38,23 @@ declare global {
 	type LanguageExtensions = {
 		[key: SupportedLanguages | string]: LanguageSupport;
 	};
+
+	type DeleteRestoreFunction = (
+		snippetId: UUID,
+		index: number,
+		state: SnippetState
+	) => void;
+
+	type SearchData = {
+		searchQuery: string;
+		originalSnippets: Snippet[];
+		snippetsFound: Snippet[];
+	};
+
+	type SnippetItemProps = {
+		codeEditorStates: SnippetEditorStates;
+		onActiveSnippet: (index: number) => void;
+		onDeleteSnippet: DeleteRestoreFunction;
+		onRestoreSnippet: DeleteRestoreFunction;
+	};
 }