Skip to content

fix: improvements to session list on profile page #1258

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sujitaw merged 4 commits into from
Nov 25, 2025
+106 −75
Merged

fix: improvements to session list on profile page #1258

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
609449d
fix/improvments for session list
sujitaw Nov 3, 2025
f7e8efc
fix/ellipse comments
sujitaw Nov 3, 2025
cbc368d
fix/css improvements
sujitaw Nov 3, 2025
a022899
fix/ svg shift to svgs directory
sujitaw Nov 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 4 additions & 21 deletions src/components/confirmation-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
import React, { type ReactElement } from 'react'
import { AlertComponent } from '@/components/AlertComponent'
import { Button } from '@/components/ui/button'
import { ConfirmationModalDefaultLogo } from '@/config/svgs/confirmationModal'

interface IProps {
openModal: boolean
Expand All @@ -24,6 +25,7 @@ interface IProps {
buttonTitles: string[]
loading: boolean
warning?: string
image?: React.JSX.Element
}

const ConfirmationModal = ({
Expand All @@ -39,6 +41,7 @@ const ConfirmationModal = ({
buttonTitles,
loading,
warning,
image,
}: IProps): React.JSX.Element => (
<Dialog open={openModal} onOpenChange={(open) => closeModal(!open)}>
<DialogTitle></DialogTitle>
Expand Down Expand Up @@ -84,27 +87,7 @@ const ConfirmationModal = ({
)}
</div>
<div className="p-6 text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
fill="none"
viewBox="0 0 22 22"
className="text-primary mx-auto mb-4 h-12 w-12"
>
<path
fill="currentColor"
d="M12.388 21.99c-.916.01-1.82.01-2.743.01-.202-.078-.397-.052-.586-.069-.685-.062-1.33-.274-1.968-.508a10.64 10.64 0 0 1-3.424-2.051 11.243 11.243 0 0 1-2.35-2.88 11.537 11.537 0 0 1-1.17-3.012c-.085-.356-.07-.721-.137-1.092C0 11.458 0 10.54 0 9.602.083 9.396.049 9.194.072 9c.088-.73.318-1.423.58-2.105A10.541 10.541 0 0 1 2.64 3.654C4.245 1.857 6.22.664 8.581.134 8.916.057 9.26.072 9.612.01 10.528 0 11.432 0 12.355 0c.216.08.425.046.627.07.739.086 1.438.318 2.126.584a10.554 10.554 0 0 1 3.24 1.987c1.804 1.611 2.994 3.594 3.524 5.962.073.328.057.666.118 1.01.01.915.01 1.819.01 2.742-.08.216-.046.425-.07.627-.086.739-.318 1.438-.584 2.126a10.544 10.544 0 0 1-1.988 3.24c-1.61 1.803-3.592 2.996-5.961 3.524-.328.073-.666.057-1.01.118Z"
/>
<path
fill="#FFFfFf"
d="M12.72 7.183c-.052 1.824-.107 3.62-.155 5.418-.033 1.232-.7 2.147-1.573 2.141-.825-.005-1.506-.88-1.543-2.024a1052 1052 0 0 1-.206-7.108c-.03-1.213.66-2.187 1.546-2.203.23-.005.461-.029.691.033.78.21 1.304 1.09 1.285 2.175-.009.513-.028 1.026-.044 1.568Z"
/>
<path
fill="#FFF"
d="M9.989 15.875c1.013-.78 2.34-.282 2.54.94.133.817-.438 1.586-1.29 1.736-.785.138-1.588-.419-1.738-1.208-.108-.572.056-1.057.488-1.468Z"
/>
</svg>
{image ? image : <ConfirmationModalDefaultLogo />}
<h3 className="text-muted-foreground mb-4 py-2 text-lg font-normal">
{message}
</h3>
Expand Down
24 changes: 24 additions & 0 deletions src/config/svgs/Auth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,27 @@ export const Icons = {
</svg>
),
}

export const DestructiveConfirmation = (): JSX.Element => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
fill="none"
viewBox="0 0 22 22"
className="text-destructive mx-auto mb-4 h-12 w-12"
>
<path
fill="currentColor"
d="M12.388 21.99c-.916.01-1.82.01-2.743.01-.202-.078-.397-.052-.586-.069-.685-.062-1.33-.274-1.968-.508a10.64 10.64 0 0 1-3.424-2.051 11.243 11.243 0 0 1-2.35-2.88 11.537 11.537 0 0 1-1.17-3.012c-.085-.356-.07-.721-.137-1.092C0 11.458 0 10.54 0 9.602.083 9.396.049 9.194.072 9c.088-.73.318-1.423.58-2.105A10.541 10.541 0 0 1 2.64 3.654C4.245 1.857 6.22.664 8.581.134 8.916.057 9.26.072 9.612.01 10.528 0 11.432 0 12.355 0c.216.08.425.046.627.07.739.086 1.438.318 2.126.584a10.554 10.554 0 0 1 3.24 1.987c1.804 1.611 2.994 3.594 3.524 5.962.073.328.057.666.118 1.01.01.915.01 1.819.01 2.742-.08.216-.046.425-.07.627-.086.739-.318 1.438-.584 2.126a10.544 10.544 0 0 1-1.988 3.24c-1.61 1.803-3.592 2.996-5.961 3.524-.328.073-.666.057-1.01.118Z"
/>
<path
fill="#FFFFFF"
d="M12.72 7.183c-.052 1.824-.107 3.62-.155 5.418-.033 1.232-.7 2.147-1.573 2.141-.825-.005-1.506-.88-1.543-2.024a1052 1052 0 0 1-.206-7.108c-.03-1.213.66-2.187 1.546-2.203.23-.005.461-.029.691.033.78.21 1.304 1.09 1.285 2.175-.009.513-.028 1.026-.044 1.568Z"
/>
<path
fill="#FFF"
d="M9.989 15.875c1.013-.78 2.34-.282 2.54.94.133.817-.438 1.586-1.29 1.736-.785.138-1.588-.419-1.738-1.208-.108-.572.056-1.057.488-1.468Z"
/>
</svg>
)
25 changes: 25 additions & 0 deletions src/config/svgs/confirmationModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { JSX } from 'react'

export const ConfirmationModalDefaultLogo = (): JSX.Element => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
fill="none"
viewBox="0 0 22 22"
className="text-primary mx-auto mb-4 h-12 w-12"
>
<path
fill="currentColor"
d="M12.388 21.99c-.916.01-1.82.01-2.743.01-.202-.078-.397-.052-.586-.069-.685-.062-1.33-.274-1.968-.508a10.64 10.64 0 0 1-3.424-2.051 11.243 11.243 0 0 1-2.35-2.88 11.537 11.537 0 0 1-1.17-3.012c-.085-.356-.07-.721-.137-1.092C0 11.458 0 10.54 0 9.602.083 9.396.049 9.194.072 9c.088-.73.318-1.423.58-2.105A10.541 10.541 0 0 1 2.64 3.654C4.245 1.857 6.22.664 8.581.134 8.916.057 9.26.072 9.612.01 10.528 0 11.432 0 12.355 0c.216.08.425.046.627.07.739.086 1.438.318 2.126.584a10.554 10.554 0 0 1 3.24 1.987c1.804 1.611 2.994 3.594 3.524 5.962.073.328.057.666.118 1.01.01.915.01 1.819.01 2.742-.08.216-.046.425-.07.627-.086.739-.318 1.438-.584 2.126a10.544 10.544 0 0 1-1.988 3.24c-1.61 1.803-3.592 2.996-5.961 3.524-.328.073-.666.057-1.01.118Z"
/>
<path
fill="#FFFFFF"
d="M12.72 7.183c-.052 1.824-.107 3.62-.155 5.418-.033 1.232-.7 2.147-1.573 2.141-.825-.005-1.506-.88-1.543-2.024a1052 1052 0 0 1-.206-7.108c-.03-1.213.66-2.187 1.546-2.203.23-.005.461-.029.691.033.78.21 1.304 1.09 1.285 2.175-.009.513-.028 1.026-.044 1.568Z"
/>
<path
fill="#FFF"
d="M9.989 15.875c1.013-.78 2.34-.282 2.54.94.133.817-.438 1.586-1.29 1.736-.785.138-1.588-.419-1.738-1.208-.108-.572.056-1.057.488-1.468Z"
/>
</svg>
)
107 changes: 53 additions & 54 deletions src/features/profile/components/Sessions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import ConfirmationModal from '@/components/confirmation-modal'
import { DeleteIcon } from '@/config/svgs/DeleteIcon'
import { DestructiveConfirmation } from '@/config/svgs/Auth'
import Loader from '@/components/Loader'
import { RootState } from '@/lib/store'
import { SESSION_TYPE } from '@/components/types/Sessions'
Expand All @@ -18,7 +19,6 @@ import { useAppSelector } from '@/lib/hooks'

function Sessions(): JSX.Element {
const [loading, setLoading] = useState(true)
const [showDetails, setShowDetails] = useState<string>('')
const [sessions, setSessions] = useState<Session[]>()
const [error, setError] = useState<string | null>(null)
const [success, setSuccess] = useState<string | null>(null)
Expand All @@ -43,7 +43,19 @@ function Sessions(): JSX.Element {
typeof response !== 'string' &&
response?.data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS
) {
setSessions(response.data.data)
const sortByDate = response.data.data
.sort(
(a: Session, b: Session) =>
new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
)
.filter((session: Session) => session.id !== currentSession)
const activeSession = response.data.data.filter(
(session: Session) => session.id === currentSession,
)
if (activeSession.length > 0) {
sortByDate.unshift(...activeSession)
}
setSessions(sortByDate)
}
} catch (error) {
console.error('Error fetching user sessions:', error)
Expand Down Expand Up @@ -158,14 +170,15 @@ function Sessions(): JSX.Element {
openModal={showConfirmation}
closeModal={() => setShowConfirmation(false)}
onSuccess={handleDelete}
message={'This Session will be Deleted Permanently.'}
message={'This session will be deleted permanently.'}
buttonTitles={[
confirmationMessages.cancelConfirmation,
confirmationMessages.sureConfirmation,
]}
isProcessing={loading}
setFailure={setError}
setSuccess={setSuccess}
image={<DestructiveConfirmation />}
/>
{sessions &&
Array.isArray(sessions) &&
Expand All @@ -177,10 +190,10 @@ function Sessions(): JSX.Element {
return (
<div
key={record?.id}
className="mt-2 rounded-md border p-4 md:flex-row"
className="mt-2 h-auto rounded-md border p-4 md:flex-row"
>
<div className="flex flex-col items-center justify-between md:flex-row">
<div className="flex items-center gap-4">
<div className="flex h-full cursor-default flex-wrap items-center justify-between">
<div className="flex min-w-[300px] items-center gap-4">
<div className="px-2">
{clientInfo ? (
getSessionIcon(record, clientInfo)
Expand All @@ -194,9 +207,9 @@ function Sessions(): JSX.Element {
</div>
<div>
{clientInfo?.ip && (
<div>
<div className="font-mono text-sm font-semibold">
IP:{' '}
<span className="text-muted-foreground break-all">
<span className="break-all">
{clientInfo?.ip ?? 'Not Available'}
</span>
</div>
Expand All @@ -223,8 +236,38 @@ function Sessions(): JSX.Element {
</div>
</div>
</div>
{clientInfo &&
clientInfo?.ip &&
record.sessionType !== SESSION_TYPE.ORGANIZATION && (
<div
className={
'grid h-auto w-[250px] items-center justify-start overflow-hidden rounded-md p-4 pl-20 text-sm transition-all duration-500 lg:pl-4'
}
>
<div className="flex justify-start">
<dt>Browser :&nbsp;</dt>
<dd className="text-muted-foreground">
{clientInfo?.browser}
</dd>
</div>
<div className="flex justify-start">
<dt>OS :&nbsp;</dt>
<dd className="text-muted-foreground">
{clientInfo?.os}
</dd>
</div>
<div className="flex justify-start">
<dt>Device :&nbsp;</dt>
<dd className="text-muted-foreground">
{clientInfo?.deviceType}
</dd>
</div>
</div>
)}
<div
className={`sm:w-0.5/3 flex h-[100px] items-center ${record.sessionType !== SESSION_TYPE.ORGANIZATION && clientInfo?.ip && 'pt-10'}`}
className={
'flex h-[50px] grow items-center justify-end md:w-[130px] lg:grow-0'
}
>
{record?.id === currentSession ? (
<Badge className="success-alert rounded-full p-1 px-3">
Expand All @@ -242,58 +285,14 @@ function Sessions(): JSX.Element {
setShowConfirmation(true)
setDeletionId(record.id)
}}
className="flex justify-end bg-transparent p-0 shadow-none hover:bg-transparent focus:ring-0"
className="flex justify-end bg-transparent p-0 px-3 shadow-none hover:bg-transparent focus:ring-0"
>
<DeleteIcon />
</Button>
</div>
)}
</div>
</div>

{clientInfo?.ip &&
record.sessionType !== SESSION_TYPE.ORGANIZATION && (
<Button
onClick={() => {
setShowDetails((prev) => {
if (record.id === prev) {
return ''
}
return record.id
})
}}
variant={'secondary'}
className="mt-2 h-[30px] px-2"
>
{showDetails === record.id
? 'Hide Details'
: 'Show Details'}
</Button>
)}
{clientInfo && (
<div
className={`${showDetails === record.id ? 'mt-6 h-auto rounded-md border p-4' : ''} mt-2 flex h-[0px] items-center justify-between overflow-hidden text-sm transition-all duration-500`}
>
<div className="grid justify-center">
<dt>Browser</dt>
<dd className="text-muted-foreground">
{clientInfo?.browser}
</dd>
</div>
<div className="grid justify-center">
<dt>OS</dt>
<dd className="text-muted-foreground">
{clientInfo?.os}
</dd>
</div>
<div className="grid justify-center">
<dt>Device</dt>
<dd className="text-muted-foreground">
{clientInfo?.deviceType}
</dd>
</div>
</div>
)}
</div>
)
})}
Expand Down