From e60d5d6732a42e900bd045d218d9971bc6949f88 Mon Sep 17 00:00:00 2001
From: dm1sh <me@dmitriy.icu>
Date: Thu, 27 Jul 2023 12:53:27 +0300
Subject: [PATCH] Added user points indicator

---
 front/src/api/user/index.ts        |  2 ++
 front/src/api/user/types.ts        |  2 ++
 front/src/assets/userCategories.ts | 20 +-------------------
 front/src/components/Points.tsx    | 24 ++++++++++++++++++++++++
 front/src/components/index.ts      |  1 +
 front/src/pages/UserPage.tsx       |  3 ++-
 6 files changed, 32 insertions(+), 20 deletions(-)
 create mode 100644 front/src/components/Points.tsx

diff --git a/front/src/api/user/index.ts b/front/src/api/user/index.ts
index f695a5f..34584cd 100644
--- a/front/src/api/user/index.ts
+++ b/front/src/api/user/index.ts
@@ -8,10 +8,12 @@ const initialUser: User = import.meta.env.DEV ? { // Temporary, until api is rea
     id: Math.random() * 100,
     name: faker.person.firstName() + ' ' + faker.person.lastName(),
     regDate: faker.date.anytime().getTime(),
+    points: Math.round(Math.random() * 1000),
 } : {
     id: -1,
     name: '',
     regDate: 0,
+    points: 0,
 }
 
 const composeUserURL = () => (
diff --git a/front/src/api/user/types.ts b/front/src/api/user/types.ts
index 8c9ee7e..4f5d989 100644
--- a/front/src/api/user/types.ts
+++ b/front/src/api/user/types.ts
@@ -4,6 +4,7 @@ type User = {
     id: number,
     name: string,
     regDate: number,
+    points: number
 }
 
 const isUser = (obj: unknown): obj is User => (
@@ -11,6 +12,7 @@ const isUser = (obj: unknown): obj is User => (
         'id': 'number',
         'name': 'string',
         'regDate': 'number',
+        'points': 'number',
     })
 )
 
diff --git a/front/src/assets/userCategories.ts b/front/src/assets/userCategories.ts
index c741c47..c51dcdd 100644
--- a/front/src/assets/userCategories.ts
+++ b/front/src/assets/userCategories.ts
@@ -1,26 +1,18 @@
 import { Announcement } from '../api/announcement/types'
 import { FiltersType } from '../utils/filters'
 
-const userCategories = ['givingOut', 'booked', 'history'] as const
+const userCategories = ['givingOut'] as const
 
 type UserCategory = typeof userCategories[number]
 
 const UserCategoriesNames: Record<UserCategory, string> = {
     givingOut: 'Раздача',
-    booked: 'Бронь',
-    history: 'История',
 }
 
 const userCategoriesInfos: Record<UserCategory, (ann: Announcement) => string> = {
     givingOut: (ann: Announcement) => (
         `Годен до ${new Date(ann.bestBy).toLocaleDateString('ru')}`
     ),
-    booked: (ann: Announcement) => (
-        `Бронь ещё ${(ann as Announcement & { bookedBy: number[] }).bookedBy.length} чел.`
-    ),
-    history: (ann: Announcement) => (
-        `Забрал ${new Date((ann as Announcement & { taken: number }).taken).toLocaleDateString('ru')}`
-    ),
 }
 
 const composeUserCategoriesFilters: Record<UserCategory, () => FiltersType> = {
@@ -29,16 +21,6 @@ const composeUserCategoriesFilters: Record<UserCategory, () => FiltersType> = {
 
         return ({ userId })
     },
-    booked: () => {
-        const userId = -1
-
-        return ({ bookedBy: userId })
-    },
-    history: () => {
-        const userId = -1
-
-        return ({ userId, status: 'taken' })
-    }
 }
 
 export type { UserCategory }
diff --git a/front/src/components/Points.tsx b/front/src/components/Points.tsx
new file mode 100644
index 0000000..6ff6a6a
--- /dev/null
+++ b/front/src/components/Points.tsx
@@ -0,0 +1,24 @@
+import { CSSProperties } from 'react'
+
+type PointsProps = {
+    points?: number
+}
+
+const styles = {
+    container: {
+        paddingBottom: 8,
+    } as CSSProperties,
+    points: {
+        float: 'right',
+    } as CSSProperties,
+}
+
+function Points({ points }: PointsProps) {
+    return (
+        <div style={styles.container}>
+            <h5>Набрано очков: <span style={styles.points}>{points}</span></h5>
+        </div>
+    )
+}
+
+export default Points
diff --git a/front/src/components/index.ts b/front/src/components/index.ts
index 6562e70..6d26007 100644
--- a/front/src/components/index.ts
+++ b/front/src/components/index.ts
@@ -10,3 +10,4 @@ export { default as AuthForm } from './AuthForm'
 export { default as BackHeader } from './BackHeader'
 export { default as CategoryPreview } from './CategoryPreview'
 export { default as StoriesPreview } from './StoriesPreview'
+export { default as Points } from './Points'
diff --git a/front/src/pages/UserPage.tsx b/front/src/pages/UserPage.tsx
index a35a1be..8d8b310 100644
--- a/front/src/pages/UserPage.tsx
+++ b/front/src/pages/UserPage.tsx
@@ -3,7 +3,7 @@ import { Container } from 'react-bootstrap'
 import BackHeader from '../components/BackHeader'
 import { useUser } from '../hooks/api'
 import { userCategories } from '../assets/userCategories'
-import { CategoryPreview } from '../components'
+import { CategoryPreview, Points } from '../components'
 import { gotError } from '../hooks/useFetch'
 
 function UserPage() {
@@ -16,6 +16,7 @@ function UserPage() {
                     user.error :
                     `${user.data.name}, с нами с ${new Date(user.data.regDate).toLocaleDateString('ru')}`
             } />
+            <Points points={user.data?.points} />
             {userCategories.map(cat => (
                 <CategoryPreview key={cat} category={cat} />
             ))}