fix: refactor code, login/logout fe, changing types

packages/backend/src/infrastructure/express/router/user.routes.ts

@@ -15,7 +15,7 @@ export class UserRoutes extends CommonRoutesConfig {
     this.app
       .route(`${apiVersionPrefix}/users`)
       .get((req, res) => userController.getAll(req, res))
-      .post((req, res) => userController.create(req, res))
+      .post((req, res) => userController.createUser(req, res))
 
     this.app
       .route(`${apiVersionPrefix}/users/:userId`)

packages/backend/src/modules/user/user.controller.ts

@@ -23,7 +23,7 @@ export class UserController {
     this._service = service
   }
 
-  async create(req: express.Request, res: express.Response) {
+  async createUser(req: express.Request, res: express.Response) {
     try {
       const createUserCommand: CreateUserCommand = req.body
       const createdUser: User = await this._service.create(createUserCommand)

packages/backend/src/modules/user/user.repository.ts

@@ -21,7 +21,7 @@ export class UserRepository {
     this._mapper = mapper
   }
 
-  async create(command: CreateUserCommand): Promise<User> {
+  async createUser(command: CreateUserCommand): Promise<User> {
     try {
       const newUser: UserDocument = await this._model.create(command)
       return this._mapper.mapToDomain(newUser)

packages/backend/src/modules/user/user.service.ts

@@ -11,7 +11,7 @@ export class UserService {
   }
 
   async create(dto: CreateUserCommand): Promise<User> {
-    return this._repository.create(dto)
+    return this._repository.createUser(dto)
   }
 
   async updateOneById(id: string, dto: UpdateUserCommand): Promise<User> {

packages/frontend/src/components/Comment/Comment.tsx

@@ -27,7 +27,7 @@ const Comment = ({
   return (
     <Container>
       <div className={classes.divUserInfo}>
-        <Avatar radius="md" src={userData.profilePictureURL} />
+        <Avatar radius="md" src={userData.avatarUrl} />
 
         <div>
           <div className={classes.name}>{userData.username}</div>

packages/frontend/src/components/DashboardDrawer/DashboardDrawer.tsx

@@ -1,5 +1,6 @@
 import { Drawer, Divider, Text, ScrollArea } from '@mantine/core'
 import { FaUser } from 'react-icons/fa'
+import { UserDTO } from 'shared'
 
 // Components
 import Description from '../Description/Description'
@@ -9,15 +10,15 @@ import MembersList from '../MembersList/MembersList'
 import convertDate from '../../utils/convertDate'
 
 // Misc
-import UserType from '../../types/user'
+
 import useStyles from './style'
 import UserIcon from '../UserIcon/UserIcon'
 
 type DashboardDrawerProps = {
   title: string
   description: string
   creationDate: Date
-  membersList: UserType[]
+  membersList: UserDTO[]
   isAdmin: boolean
   isOpen: boolean
   setIsOpen: () => void
@@ -37,7 +38,10 @@ const DashboardDrawer = ({
   onUserRemoveHandler
 }: DashboardDrawerProps) => {
   const { classes } = useStyles()
-  const dashboardAuthor = membersList.filter((member) => member.role === 'Admin')[0]
+  // We have no roles for user
+
+  // const dashboardAuthor = membersList.filter((member) => member.role === 'Admin')[0]
+
   const parsedDate = convertDate(creationDate)
 
   return (
@@ -58,14 +62,17 @@ const DashboardDrawer = ({
         </header>
 
         <section className={classes.authorSection}>
+          {/*
+          // We have no roles for user
+
           <UserIcon
             username={dashboardAuthor.username}
             imgUrl={dashboardAuthor.profilePictureURL}
           />
           <div className={classes.authorInfo}>
             {dashboardAuthor.username}
             <p className={classes.date}>{`on ${parsedDate}`}</p>
-          </div>
+          </div> */}
         </section>
 
         <Description

packages/frontend/src/components/MemberCardContainer/MemberCardContainer.tsx

@@ -1,12 +1,12 @@
 import { useState } from 'react'
+import { UserDTO } from 'shared'
 import { Button, Input, Text, ActionIcon, Center, UnstyledButton } from '@mantine/core'
 import { AiOutlineSearch } from 'react-icons/ai'
 import useStyles from './style'
 import UserIcon from '../UserIcon/UserIcon'
-import UserType from '../../types/user'
 
 type MemberCardContainerProps = {
-  membersList: UserType[]
+  membersList: UserDTO[]
   addUserHandler: (selectedUsers: string[]) => void
 }
 
@@ -53,7 +53,7 @@ const MemberCardContainer = ({ membersList, addUserHandler }: MemberCardContaine
         }
       />
       <section className={classes.usersContainer}>
-        {usersSearchResult.slice(0, 4).map(({ username, profilePictureURL, id }) => (
+        {usersSearchResult.slice(0, 4).map(({ username, avatarUrl, id }) => (
           <UnstyledButton
             className={
               selectedUsers.indexOf(id) + 1
@@ -63,7 +63,7 @@ const MemberCardContainer = ({ membersList, addUserHandler }: MemberCardContaine
             key={id}
             onClick={() => handleMemberClick(id)}
           >
-            <UserIcon imgUrl={profilePictureURL} username={username} />
+            <UserIcon imgUrl={avatarUrl} username={username} />
             <Text className={classes.user} weight={600}>
               {username}
             </Text>

packages/frontend/src/components/MembersList/MembersList.tsx

@@ -1,29 +1,30 @@
 import { Text } from '@mantine/core'
 import { HiUsers } from 'react-icons/hi'
+import { UserDTO } from 'shared'
 import UserIcon from '../UserIcon/UserIcon'
 import RedButton from '../RedButton/RedButton'
-import UserType from '../../types/user'
 import useStyles from './style'
 
 type MembersListProps = {
   title?: string
-  membersList: UserType[]
+  membersList: UserDTO[]
   onDeleteHandler: (id: string) => void
   isDeletable?: boolean
 }
 
 const MembersList = ({ membersList, onDeleteHandler, isDeletable, title }: MembersListProps) => {
   const { classes } = useStyles()
 
-  const getRemoveButton = (role: string | undefined, id: string) => {
-    if (isDeletable) {
-      if (role === 'Admin') {
-        return <Text className={classes.admin}>Admin</Text>
-      }
-      return <RedButton onClick={() => onDeleteHandler(id)}>Remove</RedButton>
-    }
-    return undefined
-  }
+  // No roles in users
+  // const getRemoveButton = (id: string) => {
+  //   if (isDeletable) {
+  //     if (role === 'Admin') {
+  //       return <Text className={classes.admin}>Admin</Text>
+  //     }
+  //     return <RedButton onClick={() => onDeleteHandler(id)}>Remove</RedButton>
+  //   }
+  //   return undefined
+  // }
 
   return (
     <div>
@@ -32,11 +33,13 @@ const MembersList = ({ membersList, onDeleteHandler, isDeletable, title }: Membe
         <Text className={classes.title}>{title || 'Members'}</Text>
       </header>
       <section>
-        {membersList.map(({ username, id, profilePictureURL, role }) => (
+        {membersList.map(({ username, id, avatarUrl, email }) => (
           <section className={classes.memberSection} key={id}>
-            <UserIcon imgUrl={profilePictureURL} username={username} />
+            <UserIcon imgUrl={avatarUrl} username={username} />
             <Text className={classes.username}>{username}</Text>
-            {getRemoveButton(role, id)}
+            {/* 
+            No roles in users
+            {getRemoveButton(id)} */}
           </section>
         ))}
       </section>

packages/frontend/src/components/Navbar/Navbar.tsx

@@ -1,24 +1,27 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable arrow-body-style */
 import { Select } from '@mantine/core'
+import { UserDTO } from 'shared'
 import { AiFillCaretDown } from 'react-icons/ai'
 import { IoApps } from 'react-icons/io5'
 import { useNavigate } from 'react-router-dom'
-import UserType from '../../types/user'
 import { routes } from '../../routes/RoutesDashboards'
 import GrayButtonFilled from '../GrayButtonFilled/GrayButtonFilled'
 import useStyles from './styles'
 import thulloLogo from '../../images/thullo_logo.png'
 import LoginGoogleButton from '../LoginGoogleButton/LoginGoogleButton'
 
-export type NavbarProps = {
-  loggedUser: UserType
-  boardTitle?: string
-}
+export type NavbarProps = { username: any; boardTitle?: string }
 
-const Navbar = ({ boardTitle, loggedUser }: NavbarProps) => {
+const Navbar = ({ boardTitle, username }: NavbarProps) => {
   const { classes } = useStyles()
   const navigate = useNavigate()
+  const token = localStorage.getItem('token')
+
+  const logout = () => {
+    localStorage.removeItem('token')
+    navigate('/')
+  }
 
   return (
     <nav className={classes.navbar}>
@@ -30,28 +33,16 @@ const Navbar = ({ boardTitle, loggedUser }: NavbarProps) => {
         <div className={classes.navbar__dashboard}>
           <h2>{boardTitle}</h2>
           <div />
-          <GrayButtonFilled onClick={() => navigate(routes.dashboards)} leftIcon={<IoApps />}>
-            All boards
-          </GrayButtonFilled>
+          {!!token && (
+            <GrayButtonFilled onClick={() => navigate(routes.dashboards)} leftIcon={<IoApps />}>
+              All boards
+            </GrayButtonFilled>
+          )}
         </div>
       )}
       <div className={classes.navbar__options}>
-        {loggedUser ? (
-          <Select
-            classNames={{
-              wrapper: classes.navbar__options__select__wrapper,
-              input: classes.navbar__options__select__input,
-              icon: classes.navbar__options__select__icon,
-              rightSection: classes.navbar__options__select__rightSection
-            }}
-            placeholder={loggedUser.username}
-            data={[
-              { value: 'react', label: 'Option1' },
-              { value: 'vue', label: 'Option2' }
-            ]}
-            icon={<img src={loggedUser.profilePictureURL} alt="user avatar" />}
-            rightSection={<AiFillCaretDown />}
-          />
+        {token ? (
+          <GrayButtonFilled onClick={() => logout()}>Logout</GrayButtonFilled>
         ) : (
           <LoginGoogleButton
             onClick={() => window.location.assign('http://localhost:8800/v1/auth/google')}

packages/frontend/src/components/Task/Task.tsx

@@ -3,7 +3,6 @@ import { BsPaperclip } from 'react-icons/bs'
 import { MdAdd, MdMessage } from 'react-icons/md'
 import { useState } from 'react'
 import { UserDTO } from 'shared'
-import UserType from '../../types/user'
 import UserIconList from '../UserIconList/UserIconList'
 import useStyles from './style'
 

packages/frontend/src/components/TaskModal/TaskModal.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { UserDTO } from 'shared'
 import { Popover, Modal, Text } from '@mantine/core'
 import { AiOutlinePlus } from 'react-icons/ai'
 import { IoMdContact } from 'react-icons/io'
@@ -23,15 +24,14 @@ import GenerateComment from '../../logic/generateComment'
 import AttachmentType from '../../types/attachment'
 import CommentType from '../../types/comment'
 import TaskType from '../../types/task'
-import UserType from '../../types/user'
 import useStyles from './style'
 
 const MODAL_SIZE = 'clamp(1000px, 70%, 2000px)'
 
 type TaskModalProps = {
   isOpen: boolean
   task: TaskType
-  membersList: UserType[]
+  membersList: UserDTO[]
   commentsList: CommentType[]
   onCloseHandler: (task: TaskType & { comments: CommentType[] }) => void
 }
@@ -106,7 +106,7 @@ const TaskModal = ({ isOpen, task, commentsList, membersList, onCloseHandler }:
   const addUserHandler = (selectedUsersID: string[]) => {
     const newAssignees = selectedUsersID
       .map((selectedUserID) => currentMemberList.find(({ id }) => id === selectedUserID))
-      .filter((assignee) => assignee) as UserType[]
+      .filter((assignee) => assignee) as UserDTO[]
     setCurrentAssigneesList((prevState) => [...prevState, ...newAssignees])
     setCurrentMemberList((prevState) =>
       prevState.filter((member) => !selectedUsersID.some((selectedId) => selectedId === member.id))

packages/frontend/src/components/UserIconList/UserIconList.tsx

@@ -2,7 +2,6 @@ import { ActionIcon, Text } from '@mantine/core'
 import { MdAdd } from 'react-icons/md'
 import { UserDTO } from 'shared'
 import UserIcon from '../UserIcon/UserIcon'
-import UserType from '../../types/user'
 import useStyles from './style'
 
 type UserIconListProps = {

packages/frontend/src/infrastructure/HttpService/HttpService.ts

@@ -1,4 +1,4 @@
-import { CreateDashboardCommand, DashboardDTO, TASK } from 'shared'
+import { CreateDashboardCommand, DashboardDTO, UserDTO, CreateUserCommand } from 'shared'
 
 import Fetch from './fetchInstance'
 
@@ -22,6 +22,8 @@ class HttpService {
   }
 
   // TODO change from any to Task type
+  createUser = (command: CreateUserCommand): Promise<UserDTO> =>
+    this.http.post('users', { body: JSON.stringify(command) })
   getTask = (taskId: string): Promise<any> => this.http.get(`tasks/${taskId}`)
   getAllDashboards = (): Promise<DashboardDTO[]> => this.http.get('dashboards', {})
   createDashboard = (command: CreateDashboardCommand): Promise<DashboardDTO> =>

packages/frontend/src/logic/generateComment.ts

@@ -1,11 +1,11 @@
 import faker from '@faker-js/faker'
+import { UserDTO } from 'shared'
 import RandomUser from './randomUser'
-import UserType from '../types/user'
 
 class GenerateComment {
   private readonly id: string
 
-  private readonly userData: UserType
+  private readonly userData: any
 
   private readonly textContent: string
 

packages/frontend/src/logic/generateTask.ts

@@ -1,26 +1,26 @@
 import faker from '@faker-js/faker'
+import { UserDTO } from 'shared'
 import GenerateAttachment from './generateAttachment'
 import GenerateId from './generateId'
 import GenerateImage from './generateImage'
 import AttachmentType from '../types/attachment'
-import UserType from '../types/user'
 
 class GenerateTask {
   private id: string
 
   private imageCoverURL: string | null
 
-  private listOfUsers: UserType[]
+  private listOfUsers: UserDTO[]
 
   private title: string
 
   private description: string
 
   private attachment: AttachmentType[]
 
-  private assigneeList: UserType[]
+  private assigneeList: UserDTO[]
 
-  constructor(ListOfUsers: UserType[]) {
+  constructor(ListOfUsers: UserDTO[]) {
     this.id = new GenerateId().getId
     this.listOfUsers = ListOfUsers
     this.title = faker.lorem.sentence()