From 08b182e1c59e921c79867e4d5d22efa201abf059 Mon Sep 17 00:00:00 2001
From: Dejvino <git.dejvino.cz@dejvino.cz>
Date: Sun, 28 May 2023 21:43:23 +0200
Subject: [PATCH] Remove autofocus from tags. Refactoring.

---
 src/app/components/Tag.tsx         |  7 +++++++
 src/app/components/TagCloud.tsx    | 13 +++----------
 src/app/components/job/JobCard.tsx |  2 +-
 src/app/components/job/JobTags.tsx | 16 ++++------------
 4 files changed, 15 insertions(+), 23 deletions(-)
 create mode 100644 src/app/components/Tag.tsx

diff --git a/src/app/components/Tag.tsx b/src/app/components/Tag.tsx
new file mode 100644
index 0000000..3fe61dd
--- /dev/null
+++ b/src/app/components/Tag.tsx
@@ -0,0 +1,7 @@
+import React from "react"
+
+export default function Tag(props: {text: string}) {
+    return (
+        <span className='badge text-bg-light'>{props.text}</span>
+    )
+}
\ No newline at end of file
diff --git a/src/app/components/TagCloud.tsx b/src/app/components/TagCloud.tsx
index 07db133..556051c 100644
--- a/src/app/components/TagCloud.tsx
+++ b/src/app/components/TagCloud.tsx
@@ -1,6 +1,7 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import Container from 'react-bootstrap/Container';
-import { useAutoFocus, useFocusedElement } from '../hooks/FocusedElement';
+import { useAutoFocus } from '../hooks/FocusedElement';
+import Tag from './Tag';
 
 export type Props = {
     title: string,
@@ -9,14 +10,6 @@ export type Props = {
     style?: 'primary' | 'light'
 }
 
-function Tag(props: {text: string}) {
-    const tagKey = 'tag ' + props.text;
-    const elementRef = useAutoFocus(tagKey)
-    return (
-        <span ref={elementRef} className='badge text-bg-light'>{props.text}</span>
-    )
-}
-
 export default function TagCloud(props: Props) {
     const focusRef = useAutoFocus<HTMLDivElement>('tags ' + props.title)
     const containerClasses = ['tag-cloud', 'cloud-' + (props.style || 'standard')]
diff --git a/src/app/components/job/JobCard.tsx b/src/app/components/job/JobCard.tsx
index 461cd05..3e46d1e 100644
--- a/src/app/components/job/JobCard.tsx
+++ b/src/app/components/job/JobCard.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Card from 'react-bootstrap/Card';
 import { useAutoFocus } from '../../hooks/FocusedElement';
 import { Placeholder } from 'react-bootstrap';
-import JobTags from './JobTags';
+import JobTags, { focusKeyPlaceholder } from './JobTags';
 import { Job } from '@/PersonalDataTypes';
 import md from '../Markdown';
 
diff --git a/src/app/components/job/JobTags.tsx b/src/app/components/job/JobTags.tsx
index 08d7294..363bea7 100644
--- a/src/app/components/job/JobTags.tsx
+++ b/src/app/components/job/JobTags.tsx
@@ -1,23 +1,15 @@
-import { useAutoFocus } from "@/app/hooks/FocusedElement";
 import React from "react";
 import { Container } from "react-bootstrap";
+import Tag from "../Tag";
 
 export type Props = {
-    tags: string[]
-}
-
-export function JobTag(props: {text: string}) {
-    const tagKey = 'tag ' + props.text;
-    const elementRef = useAutoFocus(tagKey)
-    return (
-        <span ref={elementRef} className='badge text-bg-light'>{props.text}</span>
-    )
+    tags: string[],
 }
 
 export default function JobTags(props: Props) {
     return (
         <Container className='job-tags' fluid>
-            {props.tags.map((tag, index) => <JobTag key={index} text={tag} />)}
+            {props.tags.map((tag, index) => <Tag key={index} text={tag} />)}
         </Container>
     )
-}
\ No newline at end of file
+}