refactor: dashboard with local data

MobieTrain · Feb 24, 2023 · 44c8d26 · 44c8d26
1 parent 5c6926a
commit 44c8d26
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 66 deletions.
diff --git a/backend/src/db.ts b/backend/src/db.ts
@@ -10,6 +10,6 @@ export const appDataSource = new DataSource({
     database: DB_NAME,
     password: DB_PASSWORD,
     ssl: false,
-    entities: Entities.MT,
+    entities: Entities.LOCAL_DATA,
     synchronize: false,
 });
diff --git a/frontend/src/components/Table.tsx b/frontend/src/components/Table.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { DocumentNode, useQuery } from '@apollo/client';
+import { useQuery } from '@apollo/client';
 import { useState } from 'react';
-import { User, UserMT } from '../queries/types';
+import { User } from '../queries/types';
+import { GET_USERS } from '../queries/user';
 
 type Checkbox = {
     onClick: () => void;
@@ -17,17 +18,13 @@ const Checkbox: React.FC<Checkbox> = ({ onClick }) => {
     );
 };
 
-type Table = {
-    query: DocumentNode;
-}
-
-export const Table: React.FC<Table> = ({ query }) => {
-    const { loading, error, data } = useQuery(query);
+export const Table = () => {
+    const { loading, error, data } = useQuery(GET_USERS);
     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 || data?.getUsersMT;
+    const users = data?.getUsers;
 
     const handleShowTable = () => {
         setIsTableShown(!isTableShown);
@@ -41,24 +38,24 @@ export const Table: React.FC<Table> = ({ query }) => {
                     <table className="w-11/12 border border-separate table-fixed border-slate-400">
                         <thead>
                             <tr>
-                                <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>
+                                <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>
                             </tr>
                         </thead>
                         <tbody>
-                            {users.map((user: User | UserMT) => {
+                            {users.map((user: User) => {
                                 return (
                                     <tr key={user.id}>
-                                        <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>
+                                        <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>
                                     </tr>
                                 );
                             })}
@@ -69,4 +66,3 @@ export const Table: React.FC<Table> = ({ query }) => {
     );
 };
 
-
diff --git a/frontend/src/containers/Dashboard.tsx b/frontend/src/containers/Dashboard.tsx
@@ -1,23 +1,28 @@
+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 { Table } from '../components/Table';
-import { GET_USERS_MT } from '../queries/user';
-
+import { GET_USERS_BY_COUNTRY, GET_USERS_BY_ROLE } from '../queries/user';
+import { Summary } from './Summary';
 
 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 query={GET_USERS_MT} />
-      {/*<SectionTitle title='Charts'></SectionTitle>
-       <div className='flex justify-center mb-24'>
+      <Summary />
+      <Table />
+      <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>
@@ -26,7 +31,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,22 +1,9 @@
-// export type User = {
-//     id: number;
-//     name: string;
-//     lastName: string;
-//     role: string;
-
-// }
-
-export interface User extends UserMT {
+export type User = {
+    id: number;
+    name: string;
+    lastName: string;
+    role: string;
     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,19 +14,6 @@ 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 {