From 55ec21adbe4337348b81b2e10569402e446313d9 Mon Sep 17 00:00:00 2001 From: Jibola Paul Date: Fri, 23 Aug 2024 23:45:08 +0100 Subject: [PATCH 1/6] fix: add toggle icon for password visibility and fix text --- .../account/_component.tsx/password.tsx | 98 ++++++++++++++----- 1 file changed, 71 insertions(+), 27 deletions(-) diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx index c818f5fa5..03577b31e 100644 --- a/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx +++ b/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx @@ -1,6 +1,7 @@ "use client"; import axios from "axios"; +import { Eye, EyeOff } from "lucide-react"; import { useSession } from "next-auth/react"; import { ChangeEvent, useState } from "react"; @@ -10,6 +11,8 @@ import CustomInput from "~/components/common/input/input"; import PasswordSuccessfulModal from "~/components/common/modals/password-successful"; import { toast } from "~/components/ui/use-toast"; +type PasswordField = "current" | "new" | "confirmNew"; + const Password = () => { const { data } = useSession(); @@ -17,6 +20,12 @@ const Password = () => { const [isPending, setIsPending] = useState(false); + const [showPassword, setShowPassword] = useState({ + current: false, + new: false, + confirmNew: false, + }); + const [formData, setFormData] = useState({ oldPassword: "", password: "", @@ -71,6 +80,13 @@ const Password = () => { } }; + const togglePasswordVisibility = (field: PasswordField) => { + setShowPassword((previousState) => ({ + ...previousState, + [field]: !previousState[field], + })); + }; + const disabled = !formData.confirmPassword || !formData.oldPassword || !formData.password; @@ -86,33 +102,61 @@ const Password = () => {
- - - +
+ + togglePasswordVisibility("current")} + > + {showPassword.current ? : } + +
+
+ + togglePasswordVisibility("new")} + > + {showPassword.new ? : } + +
+
+ + togglePasswordVisibility("confirmNew")} + > + {showPassword.confirmNew ? ( + + ) : ( + + )} + +
setOpen(false)}> From 7ef2299e8fa309692eea5f720c2f88382bdbfcce Mon Sep 17 00:00:00 2001 From: Jibola Paul Date: Sat, 24 Aug 2024 00:36:09 +0100 Subject: [PATCH 2/6] fix: boilerplate logo, name and address in footer to match design --- src/components/layouts/footer/index.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/layouts/footer/index.tsx b/src/components/layouts/footer/index.tsx index 0e4eadca9..c72fb5cfd 100644 --- a/src/components/layouts/footer/index.tsx +++ b/src/components/layouts/footer/index.tsx @@ -10,6 +10,7 @@ import { Youtube, } from "lucide-react"; import { useTranslations } from "next-intl"; +import Image from "next/image"; import Link from "next/link"; import { useState } from "react"; @@ -163,11 +164,16 @@ const Footer = () => {
-
- Boiler plate +
+ hng_logo

- Logo subject details and address + 10111, Hornchurch, London, United Kingdom

From a02cbfbeb654203e5f1e04f448c1fcefd2274263 Mon Sep 17 00:00:00 2001 From: Jibola Paul Date: Sat, 24 Aug 2024 02:02:54 +0100 Subject: [PATCH 3/6] fix: implement api integration to fetch and display blog posts --- src/app/(landing-routes)/blog/page.tsx | 48 ++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/src/app/(landing-routes)/blog/page.tsx b/src/app/(landing-routes)/blog/page.tsx index 3ec42db7f..646d72f53 100644 --- a/src/app/(landing-routes)/blog/page.tsx +++ b/src/app/(landing-routes)/blog/page.tsx @@ -1,14 +1,62 @@ "use client"; +import axios from "axios"; +import { useSession } from "next-auth/react"; import { useRouter } from "next/navigation"; +import { useEffect, useState } from "react"; +import { getApiUrl } from "~/actions/getApiUrl"; import CustomButton from "~/components/common/common-button/common-button"; import HeroSection from "~/components/extDynamicPages/blogCollection/BlogPageHero"; import BlogCard from "~/components/layouts/BlogCards"; +import { useToast } from "~/components/ui/use-toast"; import { blogPosts } from "./data/mock"; const BlogHome = () => { const router = useRouter(); + const { toast } = useToast(); + const { data: session } = useSession(); + const [, setBlogPost] = useState(""); + + useEffect(() => { + async function fetchBlog() { + try { + const apiUrl = await getApiUrl(); + const token = session?.access_token; + const response = await axios.get(`${apiUrl}/api/v1/blogs`, { + headers: { + Authorization: `Bearer: ${token}`, + }, + }); + const data = response.data; + setBlogPost(data); + toast({ + title: + Array.isArray(data.data) && data.data.length === 0 + ? "No Blog Post Available" + : "Blog Posts Retrieved", + description: + Array.isArray(data.data) && data.data.length === 0 + ? "Blog posts are empty" + : "Blog posts retrieved successfully", + variant: + Array.isArray(data.data) && data.data.length === 0 + ? "destructive" + : "default", + }); + } catch (error) { + toast({ + title: "Error occured", + description: + error instanceof Error + ? error.message + : "An unknown error occurred", + variant: "destructive", + }); + } + } + fetchBlog(); + }, [session?.access_token, toast]); return (
From 96a4fb8a989e59e6966137c491c50c50a09454cf Mon Sep 17 00:00:00 2001 From: Jibola Paul Date: Sat, 24 Aug 2024 11:48:22 +0100 Subject: [PATCH 4/6] fix: merge conflict --- src/components/layouts/footer/index.tsx | 32 ++++++++++++++----------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/src/components/layouts/footer/index.tsx b/src/components/layouts/footer/index.tsx index c72fb5cfd..f9cef3e04 100644 --- a/src/components/layouts/footer/index.tsx +++ b/src/components/layouts/footer/index.tsx @@ -131,23 +131,23 @@ const Footer = () => { const socialLinks = [ { icon: XIcon, - link: "/", + link: "https://twitter.com/hnginternship", }, { icon: Youtube, - link: "/", + link: "https://youtube.com", }, { icon: Instagram, - link: "/", + link: "https://instagram.com/hngtech", }, { icon: Linkedin, - link: "/", + link: "https://linkedin.com/company/hng-internship/", }, { icon: Facebook, - link: "/", + link: " https://m.facebook.com/hngtech/", }, ]; @@ -162,17 +162,18 @@ const Footer = () => {