refactor: clean code in dev

MobieTrain · Feb 24, 2023 · 5c6926a · 5c6926a
1 parent 8da8116
commit 5c6926a
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 40 deletions.
diff --git a/backend/src/entities/UsersMT.ts b/backend/src/entities/UsersMT.ts
@@ -18,6 +18,9 @@ export class User extends BaseEntity {
     @Column()
     last_name: string;
 
+    @Column()
+    job_position: string;
+
     @Column()
     role_id: number;
 }
diff --git a/frontend/src/components/Table.tsx b/frontend/src/components/Table.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { useQuery } from '@apollo/client';
+import { DocumentNode, useQuery } from '@apollo/client';
 import { useState } from 'react';
-import { User } from '../queries/types';
-import { GET_USERS } from '../queries/user';
+import { User, UserMT } from '../queries/types';
 
 type Checkbox = {
     onClick: () => void;
@@ -18,13 +17,17 @@ const Checkbox: React.FC<Checkbox> = ({ onClick }) => {
     );
 };
 
-export const Table = () => {
-    const { loading, error, data } = useQuery(GET_USERS);
+type Table = {
+    query: DocumentNode;
+}
+
+export const Table: React.FC<Table> = ({ query }) => {
+    const { loading, error, data } = useQuery(query);
     const [isTableShown, setIsTableShown] = useState(false);
 
     if (loading) return <p>Loading...</p>;
     if (error) return <p>Upps...There is an error. :( </p>;
-    const users = data?.getUsers;
+    const users = data?.getUsers || data?.getUsersMT;
 
     const handleShowTable = () => {
         setIsTableShown(!isTableShown);
@@ -38,24 +41,24 @@ export const Table = () => {
                     <table className="w-11/12 border border-separate table-fixed border-slate-400">
                         <thead>
                             <tr>
-                                <th className='border border-slate-300'>First Name</th>
-                                <th className='border border-slate-300'>Last name</th>
-                                <th className='border border-slate-300'>Country</th>
-                                <th className='border border-slate-300'>Role</th>
-                                <th className='border border-slate-300'>Invited</th>
-                                <th className='border border-slate-300'>Registered</th>
+                                <th className='border border-slate-300'>id</th>
+                                <th className='border border-slate-300'>email</th>
+                                <th className='border border-slate-300'>first_name</th>
+                                <th className='border border-slate-300'>last_name</th>
+                                <th className='border border-slate-300'>job_position</th>
+                                <th className='border border-slate-300'>role_id</th>
                             </tr>
                         </thead>
                         <tbody>
-                            {users.map((user: User) => {
+                            {users.map((user: User | UserMT) => {
                                 return (
                                     <tr key={user.id}>
-                                        <td className='border border-slate-300'>{user.name}</td>
-                                        <td className='border border-slate-300'>{user.lastName}</td>
-                                        <td className='border border-slate-300'>{user.country}</td>
-                                        <td className='border border-slate-300'>{user.role}</td>
-                                        <td className='border border-slate-300'>{user.isInvited.toString()}</td>
-                                        <td className='border border-slate-300'>{user.isRegistered.toString()}</td>
+                                        <td className='border border-slate-300'>{user.id}</td>
+                                        <td className='border border-slate-300'>{user.email}</td>
+                                        <td className='border border-slate-300'>{user.first_name}</td>
+                                        <td className='border border-slate-300'>{user.last_name}</td>
+                                        <td className='border border-slate-300'>{user.job_position}</td>
+                                        <td className='border border-slate-300'>{user.role_id}</td>
                                     </tr>
                                 );
                             })}

diff --git a/frontend/src/containers/Dashboard.tsx b/frontend/src/containers/Dashboard.tsx
@@ -1,27 +1,23 @@
-import { useQuery } from '@apollo/client';
-import { BarChart } from '../components/BarChart';
-import { LineChart } from '../components/LineChart';
-import { PieChart } from '../components/PieChart';
-import { RadarChart } from '../components/RadarChart';
 import { SectionTitle } from '../components/SectionTitle';
-import { Summary } from './Summary';
 import { Table } from '../components/Table';
-import { GET_USERS_BY_COUNTRY, GET_USERS_BY_ROLE as GET_USERS_BY_ROLE } from '../queries/user';
+import { GET_USERS_MT } from '../queries/user';
+
 
 export const Dashboard = () => {
-  const { loading: loadingUsersByCountry, error: errorUsersByCountry, data: usersByCountry } = useQuery(GET_USERS_BY_COUNTRY);
-  const { loading: loadingUsersByRole, error: errorUsersByRole, data: usersByRole } = useQuery(GET_USERS_BY_ROLE);
+  // const { loading: loadingUsersByCountry, error: errorUsersByCountry, data: usersByCountry } = useQuery(GET_USERS_BY_COUNTRY);
+  // const { loading: loadingUsersByRole, error: errorUsersByRole, data: usersByRole } = useQuery(GET_USERS_BY_ROLE);
+
 
-  if (loadingUsersByCountry && loadingUsersByRole) return <p>Loading...</p>;
-  if (errorUsersByCountry || errorUsersByRole) return <p>Upps...There is an error. :( </p>;
+  // if (loadingUsersByCountry && loadingUsersByRole) return <p>Loading...</p>;
+  // if (errorUsersByCountry || errorUsersByRole) return <p>Upps...There is an error. :( </p>;
 
   return (
     <div>
       <SectionTitle title='Summary'></SectionTitle>
-      <Summary />
-      <Table />
-      <SectionTitle title='Charts'></SectionTitle>
-      <div className='flex justify-center mb-24'>
+      {/* <Summary /> */}
+      <Table query={GET_USERS_MT} />
+      {/*<SectionTitle title='Charts'></SectionTitle>
+       <div className='flex justify-center mb-24'>
         <BarChart data={usersByCountry.getUsersByCountry} dataKey='totalCount' xAxisKeys='country' layout='horizontal'></BarChart>
         <PieChart data={usersByCountry.getUsersByCountry} dataKey='percentage' nameKey='country'></PieChart>
       </div>
@@ -30,7 +26,7 @@ export const Dashboard = () => {
       </div>
       <div className='flex justify-center mt-12'>
         <RadarChart data={usersByRole.getUsersByRole}></RadarChart>
-      </div>
+      </div> */}
     </div>);
 };
 
diff --git a/frontend/src/queries/types.ts b/frontend/src/queries/types.ts
@@ -1,9 +1,22 @@
-export type User = {
-    id: number;
-    name: string;
-    lastName: string;
-    role: string;
+// export type User = {
+//     id: number;
+//     name: string;
+//     lastName: string;
+//     role: string;
+
+// }
+
+export interface User extends UserMT {
     country: string;
     isInvited: boolean;
     isRegistered: boolean;
+}
+
+export type UserMT = {
+    id: number;
+    email: string;
+    first_name: string;
+    last_name: string;
+    job_position: string;
+    role_id: number;
 }
diff --git a/frontend/src/queries/user.ts b/frontend/src/queries/user.ts
@@ -14,6 +14,19 @@ export const GET_USERS = gql`
   }
 `;
 
+export const GET_USERS_MT = gql`
+  query GetUsersMT {
+    getUsersMT {
+        id
+        email
+        first_name
+        last_name
+        job_position
+        role_id
+    }
+  }
+`;
+
 export const GET_USER_REGISTRATION_STATISTICS = gql`
   query GetUserRegistrationStatistics {
     getUserRegistrationStatistics {