diff --git a/src/assets/styles/_posts.scss b/src/assets/styles/_posts.scss index 4679d79..6fbf026 100644 --- a/src/assets/styles/_posts.scss +++ b/src/assets/styles/_posts.scss @@ -2,6 +2,10 @@ select { padding: 1rem 1.2rem; border: 1px solid #b8b9bb; + + option { + text-transform: capitalize; + } } &.inner { diff --git a/src/helpers/stringMethods.ts b/src/helpers/stringMethods.ts new file mode 100644 index 0000000..8f4ff44 --- /dev/null +++ b/src/helpers/stringMethods.ts @@ -0,0 +1,3 @@ +export const capitalizeFirstLetter = (string: string): string => { + return string.charAt(0).toUpperCase() + string.slice(1); +}; diff --git a/src/pages/Post.tsx b/src/pages/Post.tsx index b585c90..dfe233d 100644 --- a/src/pages/Post.tsx +++ b/src/pages/Post.tsx @@ -10,6 +10,7 @@ import { BiLinkExternal } from "react-icons/bi"; // Helpers import { parseDate } from "../helpers/parseDate"; +import { capitalizeFirstLetter } from "../helpers/stringMethods"; const Post = () => { const date = new Date("0.0.0000"); @@ -59,7 +60,11 @@ const Post = () => {
diff --git a/src/pages/Posts.tsx b/src/pages/Posts.tsx index 590e03a..b673cb5 100644 --- a/src/pages/Posts.tsx +++ b/src/pages/Posts.tsx @@ -12,6 +12,7 @@ import { getPosts } from "../helpers/apiRequests"; import { PostType } from "../types/posts"; import { Link } from "react-router-dom"; import { parseDate } from "../helpers/parseDate"; +import { capitalizeFirstLetter } from "../helpers/stringMethods"; // Data const headers: string[] = [ @@ -34,11 +35,14 @@ const Posts = () => { useEffect(() => { const categoriesTemp: string[] = categories; if (posts[0].id !== -1) { - posts.map((post: PostType) => categoriesTemp.push(post.category)); + posts.map((post: PostType) => + categoriesTemp.push(capitalizeFirstLetter(post.category.toLowerCase())) + ); let categoriesTempUnique = categoriesTemp.filter((element, index) => { return categoriesTemp.indexOf(element) === index; }); setCategories(categoriesTempUnique); + console.log(categoriesTempUnique); } }, [posts]); @@ -92,7 +96,11 @@ const Posts = () => { > {index + 1} - {post.category} + + {capitalizeFirstLetter( + post.category.toLowerCase() + )} + {post.title} { ); }) : posts.map((post: PostType, index: number) => { - if (post.category === category) { + if ( + capitalizeFirstLetter(post.category.toLowerCase()) === + category + ) { return ( { > {index + 1} - {post.category} + + {capitalizeFirstLetter( + post.category.toLowerCase() + )} + {post.title}