Merge pull request #7 from AlekseiBestuzhev/fix_learn_profile

fix: learn and profile

src/components/ui/back-button/back-button.stories.ts

@@ -3,7 +3,6 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { BackButton } from './'
 
 import { BrowserRouterDecorator } from '@/app/providers'
-import { ROUTES } from '@/common/consts'
 
 const meta = {
   title: 'Components/Back Button',
@@ -15,9 +14,4 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  args: {
-    to: ROUTES.packs,
-    text: 'Back To Packs List',
-  },
-}
+export const Default: Story = {}

src/components/ui/back-button/back-button.tsx

@@ -1,7 +1,7 @@
-import { FC } from 'react'
+import { FC, MouseEvent } from 'react'
 
 import { clsx } from 'clsx'
-import { Link, LinkProps } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 
 import s from './back-button.module.scss'
 
@@ -10,14 +10,22 @@ import { Icon } from '@/components/ui/icon/icon.tsx'
 import { Typography } from '@/components/ui/typography'
 
 type Props = {
-  text: string
-} & Omit<LinkProps, 'children'>
+  text?: string
+  className?: string
+}
+
+export const BackButton: FC<Props> = ({ text = 'Back to Previous Page', className, ...rest }) => {
+  const navigate = useNavigate()
+
+  const backHandler = (e: MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault()
+    navigate(-1)
+  }
 
-export const BackButton: FC<Props> = ({ text, className, ...rest }) => {
   const classes = clsx(s.button, className)
 
   return (
-    <Button as={Link} variant="link" className={classes} {...rest}>
+    <Button as={Link} to="back" variant="link" onClick={backHandler} className={classes} {...rest}>
       <Icon name={'arrow-back'} width={22} height={22} />
       <Typography variant="body2" className={s.text}>
         {text}

src/pages/learn/learn.module.scss

@@ -13,11 +13,14 @@
 
     .title {
       align-self: center;
+      word-break: break-word;
     }
 
     .question {
       @include flex(column, 6px);
 
+      word-break: break-word;
+
       .questionImg {
         align-self: center;
         height: 180px;
@@ -31,6 +34,8 @@
     .answer {
       @include flex(column, 6px);
 
+      word-break: break-word;
+
       .answerText {
         align-self: stretch;
 

src/pages/learn/learn.tsx

@@ -1,6 +1,6 @@
-import { useState, MouseEvent } from 'react'
+import { useState } from 'react'
 
-import { useNavigate, useParams } from 'react-router-dom'
+import { useParams } from 'react-router-dom'
 
 import s from './learn.module.scss'
 
@@ -16,20 +16,13 @@ import { useGetDeckInfoQuery } from '@/features/packs/services'
 export const Learn = () => {
   const [rateMode, setRateMode] = useState(false)
 
-  const navigate = useNavigate()
-
   const [rateCard] = useRateCardMutation()
 
   const params = useParams()
   const id = params.id as string
   const { currentData: pack } = useGetDeckInfoQuery({ id })
   const { currentData: card } = useGetRandomCardQuery({ id })
 
-  const backHandler = (e: MouseEvent<HTMLAnchorElement>) => {
-    e.preventDefault()
-    navigate(-1)
-  }
-
   const onSubmit = async (data: RateType) => {
     await requestHandler(async () => {
       await rateCard({ packId: id, cardId: card!.id, grade: +data.grade }).unwrap()
@@ -39,7 +32,7 @@ export const Learn = () => {
 
   return (
     <>
-      <BackButton to="back" onClick={backHandler} relative="path" text="Back to Previous Page" />
+      <BackButton />
       <section className={s.root}>
         <Card className={s.content}>
           <Typography as="h1" variant="large" className={s.title}>

src/pages/pack/pack.tsx

@@ -77,7 +77,7 @@ export const Pack = () => {
           cover={pack.cover}
         />
       )}
-      <BackButton to={ROUTES.packs} text="Back to Packs" />
+      <BackButton />
       <div className={s.header}>
         <div className={s.top}>
           <Typography as="h1" variant="large" className={s.title}>

src/pages/profile/profile.tsx

@@ -4,7 +4,6 @@ import { toast } from 'react-toastify'
 
 import s from './profile.module.scss'
 
-import { ROUTES } from '@/common/consts'
 import { requestHandler } from '@/common/utils'
 import { EditProfileForm, EditProfileFormProps } from '@/components/forms'
 import { Avatar } from '@/components/ui/avatar'
@@ -32,7 +31,7 @@ export const Profile = () => {
 
   return (
     <>
-      <BackButton to={ROUTES.packs} text="Back To Packs List" />
+      <BackButton />
       <div className={s.root}>
         <Card>
           <div className={s.content}>