@spacemade/ui 0.0.1

package/src/components/tag/table/TagTable.tsx

@@ -0,0 +1,138 @@
+/* eslint-disable @next/next/no-img-element */
+import { SyntheticEvent, useState } from 'react'
+import { useRouter } from '@lib/next-router'
+import { useDisclosure } from '@chakra-ui/react'
+import isEmpty from 'lodash/isEmpty'
+import { Tag } from '@store/model'
+import { useGetTagsQuery } from '@store/slice/api/tagsApiSlice'
+import { useTagStore, useSearchAndFilterCommon } from '@hooks'
+import Button from '@components/common/button/Button'
+import { DeleteDialog } from '@components/common/dialog/DeleteDialog'
+import Spinner from '@components/common/loading/Spinner'
+import TableFilter from '@components/common/table/TableFilter'
+import TablePaging from '@components/common/table/TablePaging'
+import { UpdateTagModal } from '@components/tag/modal/UpdateTagModal'
+import { truncateString } from '@helpers/string'
+
+export const TagTable = () => {
+	const {
+		query: { limit, page, nameLike },
+	} = useRouter()
+	const { getLimitFromQuery, calculateProperPageNumber } =
+		useSearchAndFilterCommon()
+
+	const {
+		isOpen: isDialogOpen,
+		onOpen: onOpenDialog,
+		onClose: onCloseDialog,
+	} = useDisclosure()
+
+	const {
+		isOpen: isOpenUpdateModal,
+		onOpen: onOpenUpdateModal,
+		onClose: onCloseUpdateModal,
+	} = useDisclosure()
+
+	const { removeTag } = useTagStore()
+
+	const { data, isFetching, isLoading } = useGetTagsQuery({
+		limit: getLimitFromQuery(limit),
+		page: calculateProperPageNumber(page),
+		nameLike: (nameLike?.toString() as string) || undefined,
+	})
+
+	const [activeTag, setActiveTag] = useState<Tag | null>(null)
+
+	const onRowClick = (event: SyntheticEvent, tag: Tag) => {
+		const parent = (event.target as HTMLElement).closest('[data-type]')
+		const type = parent?.getAttribute('data-type')
+		setActiveTag(tag)
+
+		if (type === 'action') {
+			onOpenDialog()
+			return
+		}
+
+		onOpenUpdateModal()
+	}
+
+	return (
+		<>
+			<TableFilter type='tag' isStatusFilterHidden isCategoryFilterHidden />
+
+			<div className='mt-4'>
+				<table className='table'>
+					<thead>
+						<tr>
+							<th scope='col' className='w-lg-90-down'>
+								Name
+							</th>
+							<th scope='col' className='opacity-0 w-xs-100p'>
+								Actions
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						{data &&
+							!isFetching &&
+							data.results.map((tag, key) => (
+								<tr
+									key={key}
+									className='pointer'
+									onClick={(e) => onRowClick(e, tag)}
+								>
+									<td className='align-middle'>
+										{truncateString(tag.name, 80)}
+									</td>
+									<td className='text-center align-middle'>
+										<Button
+											className='no-min-size w-xs-50p h-100 bg-hover-background'
+											data-type='action'
+										>
+											<span className='bi bi-trash'></span>
+										</Button>
+									</td>
+								</tr>
+							))}
+					</tbody>
+				</table>
+
+				{isFetching && (
+					<div className='w-100 d-flex justify-content-center py-4'>
+						<Spinner color='primary' />
+					</div>
+				)}
+
+				{!isLoading && !isFetching && isEmpty(data?.results) && (
+					<div className='d-flex flex-column align-items-center justify-content-center'>
+						{nameLike ? (
+							<p>{`There are no tags to show that match your search`}</p>
+						) : (
+							<p>{`You don't have any tags yet`}</p>
+						)}
+					</div>
+				)}
+
+				{!isEmpty(data?.results) && data?.count !== undefined && (
+					<TablePaging totalCount={data.count} />
+				)}
+			</div>
+
+			{activeTag && (
+				<>
+					<UpdateTagModal
+						tag={activeTag}
+						isOpen={isOpenUpdateModal}
+						onClose={onCloseUpdateModal}
+					/>
+					<DeleteDialog
+						isOpen={isDialogOpen}
+						onClose={onCloseDialog}
+						entityDescription={`${activeTag.name}`}
+						onDelete={() => removeTag(activeTag)}
+					/>
+				</>
+			)}
+		</>
+	)
+}

package/src/components/user/block/BadgesBlock.tsx

@@ -0,0 +1,26 @@
+import { User, UserSystemRoles } from '@store/model'
+import Badge from '@components/common/badge/Badge'
+
+export const BadgesBlock = ({
+	user,
+	align = 'start',
+}: {
+	user: User
+	align?: 'start' | 'center' | 'end'
+}) => {
+	return (
+		<div
+			className={`d-flex flex-wrap gap-2 justify-content-${align} align-items-center`}
+		>
+			{user.systemRole === UserSystemRoles.admin && (
+				<Badge bgColor='secondary' textColor='white' label='Admin' />
+			)}
+			{user.systemRole === UserSystemRoles.editor && (
+				<Badge bgColor='warning' textColor='black' label='Staff' />
+			)}
+			{user.isVerified && (
+				<Badge bgColor='success' textColor='white' label='Verified' />
+			)}
+		</div>
+	)
+}

package/src/components/user/form/ChangePasswordForm.tsx

@@ -0,0 +1,119 @@
+import React from 'react'
+import Link from 'next/link'
+import { useRouter } from '@lib/next-router'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+import { useChangePasswordMutation } from '@store/slice/api/authApiSlice'
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import { HTTPErrorStatus } from '@enum/HTTPErrorStatus'
+import { DEFAULT_ERROR_MESSAGE, PASSWORD_REGEX } from '@helpers/constants'
+
+interface FormValues extends FieldValues {
+	currentPassword: string
+	newPassword: string
+	confirmPassword: string
+}
+
+export const ChangePasswordForm = () => {
+	const router = useRouter()
+	const [changePassword] = useChangePasswordMutation()
+
+	const {
+		register,
+		handleSubmit,
+		getValues,
+		setError,
+		clearErrors,
+		formState: { errors, isSubmitting, isSubmitSuccessful },
+	} = useForm<FormValues>()
+
+	const onSubmit: SubmitHandler<FormValues> = async (data) => {
+		try {
+			await changePassword({
+				currentPassword: data.currentPassword,
+				newPassword: data.newPassword,
+			}).unwrap()
+
+			toast.success('Your password has been updated successfully')
+
+			router.push('/settings/profile')
+		} catch (error: any) {
+			setError('server-error', { type: 'custom', message: 'server-error' })
+			toast.error(
+				error.status === HTTPErrorStatus.UNPROCESSABLE_ENTITY
+					? error.data.message
+					: DEFAULT_ERROR_MESSAGE
+			)
+		}
+	}
+
+	return (
+		<form onSubmit={handleSubmit(onSubmit)}>
+			<div className='mb-4'>
+				<Input
+					register={register('currentPassword', {
+						required: 'This field is required',
+					})}
+					getValues={getValues}
+					placeholder='Enter your current password'
+					label='Current Password'
+					type='password'
+					isPassword
+					errors={errors}
+				/>
+				<Link href='/forgot' className='text-primary mt-3 d-block'>Forgot Password</Link>
+			</div>
+			<p>
+				Passwords must be at least 6 characters long, and must contain letters
+				(at least one uppercase), numbers and special characters.
+			</p>
+			<div className='mb-4'>
+				<Input
+					register={register('newPassword', {
+						required: 'This field is required',
+						pattern: {
+							value: PASSWORD_REGEX,
+							message:
+								'Invalid password. Must be at least 6 characters long, and must contain letters (at least one uppercase), numbers and special characters.',
+						},
+					})}
+					getValues={getValues}
+					placeholder='Enter New Password'
+					label='New Password'
+					type='password'
+					isPassword
+					errors={errors}
+				/>
+			</div>
+			<div className='mb-4'>
+				<Input
+					register={register('confirmPassword', {
+						required: 'This field is required',
+						validate: (value) =>
+							value === getValues('newPassword') || 'The passwords do not match',
+					})}
+					getValues={getValues}
+					placeholder='Enter New Password'
+					label='Confirm new password'
+					type='password'
+					isPassword
+					errors={errors}
+				/>
+			</div>
+			<div className='d-flex justify-content-center mt-5'>
+				<Button
+					type='submit'
+					className='btn-lg text-white w-100 mw-md-170p'
+					ariaLabel='Update Password'
+					color='primary'
+					isLoading={isSubmitting}
+					disabled={isSubmitting || isSubmitSuccessful}
+					onClick={() => clearErrors('server-error')}
+				>
+					Change
+				</Button>
+			</div>
+		</form>
+	)
+}

package/src/components/user/form/ProfileForm.tsx

@@ -0,0 +1,168 @@
+/* eslint-disable @next/next/no-img-element */
+import { useState } from 'react'
+import { useRouter } from '@lib/next-router'
+import {
+  FieldValues,
+  SubmitHandler,
+  useForm,
+} from 'react-hook-form'
+import { toast } from 'react-toastify'
+import { UserPayload } from '@store/model'
+import { useAccountStore } from '@hooks'
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import { CircleMediaPicker } from '@components/media/items/CircleMediaPicker'
+import { HTTPErrorStatus } from '@enum/HTTPErrorStatus'
+import {
+  DEFAULT_ERROR_MESSAGE,
+  EMAIL_REGEX,
+  USERNAME_REGEX,
+} from '@helpers/constants'
+
+interface FormValues extends FieldValues {
+  firstName: string
+  lastName: string
+  name: string
+  email: string
+}
+
+export const ProfileForm = () => {
+  const router = useRouter()
+  const {
+    user,
+    saveProfileForAccount,
+    isUserEmailAvailable,
+    isUserNameAvailable,
+  } = useAccountStore()
+
+  const [profileMediaIdSelected, setProfileMediaIdSelected] = useState<string | null | undefined>(undefined)
+
+  const {
+    register,
+    handleSubmit,
+    getValues,
+    setError,
+    clearErrors,
+    formState: { errors, isSubmitting },
+  } = useForm<FormValues>({
+    defaultValues: {
+      firstName: user?.firstName || '',
+      lastName: user?.lastName || '',
+      name: user?.name || '',
+      email: user?.email || '',
+    },
+  })
+
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
+    try {
+      await saveProfileForAccount({
+        ...data,
+        profileMediaId: profileMediaIdSelected,
+      } as UserPayload)
+      toast.success('Your profile has been saved successfully')
+      await router.push('/settings/profile')
+    } catch (error: any) {
+      setError('server-error', { type: 'custom', message: 'server-error' })
+      toast.error(
+        error.status === HTTPErrorStatus.UNPROCESSABLE_ENTITY
+          ? error.data.message
+          : DEFAULT_ERROR_MESSAGE
+      )
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="mt-4 w-fit-content">
+        <p className="mb-2 fw-bold">Profile Image</p>
+        <p className="small">Recommended 300px x 300px.</p>
+        <div className="w-xs-120p">
+          <CircleMediaPicker
+            defaultMediaSelected={user?.profileMedia?.media}
+            onSelectImage={setProfileMediaIdSelected}
+          />
+        </div>
+      </div>
+
+      <div className="mt-4">
+        <Input
+          register={register('name', {
+            required: 'This field is required',
+            maxLength: {
+              value: 15,
+              message: 'Your username cannot be longer than 15 characters',
+            },
+            minLength: {
+              value: 4,
+              message: 'Your username must have at least 4 characters',
+            },
+            pattern: {
+              value: USERNAME_REGEX,
+              message: 'Your username can only include lowercase alphanumeric characters (a-z, 0-9), hyphens and underscores.',
+            },
+            validate: async (value) => {
+              if (!value) return true
+              return await isUserNameAvailable(value)
+            },
+          })}
+          errors={errors}
+          placeholder="Enter your username"
+          label="Username"
+          getValues={getValues}
+        />
+      </div>
+
+      <div className="row gx-4 mt-4">
+        <div className="col-lg-6">
+          <Input
+            register={register('firstName')}
+            errors={errors}
+            placeholder="Enter your first name"
+            label="First Name"
+            getValues={getValues}
+          />
+        </div>
+        <div className="col-lg-6">
+          <Input
+            register={register('lastName')}
+            errors={errors}
+            placeholder="Enter your last name"
+            label="Last Name"
+            getValues={getValues}
+          />
+        </div>
+      </div>
+
+      <div className="mt-4">
+        <Input
+          register={register('email', {
+            required: 'This field is required',
+            pattern: {
+              value: EMAIL_REGEX,
+              message: 'This value is not a valid email',
+            },
+            validate: async (value) => await isUserEmailAvailable(value),
+          })}
+          errors={errors}
+          type="email"
+          placeholder="Enter your email address"
+          label="Email Address"
+          getValues={getValues}
+        />
+      </div>
+      <div className="d-flex justify-content-center mt-5">
+        <Button
+          type="submit"
+          className="btn-lg text-white w-100 mw-md-170p"
+          ariaLabel="Save Profile"
+          color="primary"
+          isLoading={isSubmitting}
+          disabled={isSubmitting}
+          onClick={() => clearErrors('server-error')}
+        >
+          Save
+        </Button>
+      </div>
+    </form>
+  )
+}