Merge pull request #618 from commons-stack/my_praise_root_page

Merge "my praise" into root page #615
givepraise · Oct 7, 2022 · 04932aa · 04932aa
2 parents bfdfc35 + 660e081
commit 04932aa
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 38 deletions.
diff --git a/packages/frontend/src/components/ui/Button.tsx b/packages/frontend/src/components/ui/Button.tsx
@@ -30,7 +30,7 @@ export const Button = ({
     'disabled:cursor-default disabled:bg-themecolor-3/50 disabled:text-white/50';
 
   const defaultClass = `px-4 py-2 font-bold text-white rounded-md bg-themecolor-3 hover:bg-themecolor-4 ${disabledModifier}`;
-  const outlineClass = `px-4 py-2 font-bold text-white rounded-md bg-themecolor-3 hover:bg-themecolor-4 ${disabledModifier}`;
+  const outlineClass = `border-2 border-themecolor-3 px-4 py-2 font-bold text-white rounded-md bg-themecolor-3 hover:bg-themecolor-4 ${disabledModifier}`;
   const roundClass = `flex items-center justify-center rounded-full hover:bg-warm-gray-300 w-7 h-7 dark:text-white dark:hover:bg-slate-800 ${disabledModifier}`;
 
   let variantClass = defaultClass;

diff --git a/packages/frontend/src/navigation/AuthenticatedRoutes.tsx b/packages/frontend/src/navigation/AuthenticatedRoutes.tsx
@@ -5,7 +5,6 @@ import { ROLE_ADMIN, ROLE_QUANTIFIER } from '@/model/auth';
 
 const StartPage = React.lazy(() => import('@/pages/Start/StartPage'));
 const SettingsPage = React.lazy(() => import('@/pages/Settings/SettingsPage'));
-const MyPraisePage = React.lazy(() => import('@/pages/MyPraise/MyPraisePage'));
 const UserDetailsPage = React.lazy(
   () => import('@/pages/UserDetails/UserDetailsPage')
 );
@@ -90,10 +89,6 @@ export const AuthenticatedRoutes = ({
 }: Props): JSX.Element | null => {
   return (
     <Switch>
-      <Route path="/mypraise">
-        <MyPraisePage />
-      </Route>
-
       <AuthRoute
         userRoles={userRoles}
         roles={[ROLE_ADMIN]}

diff --git a/packages/frontend/src/navigation/Nav.tsx b/packages/frontend/src/navigation/Nav.tsx
@@ -79,11 +79,6 @@ export const Nav = (): JSX.Element => {
               <NavLogo />
             </li>
 
-            <NavItem
-              icon={faPrayingHands}
-              description="My praise"
-              to="/mypraise"
-            />
             <NavItem icon={faCalendarAlt} description="Periods" to="/periods" />
             <AdminOnly>
               <NavItem

diff --git a/packages/frontend/src/pages/MyPraise/MyPraisePage.tsx b/packages/frontend/src/pages/MyPraise/MyPraisePage.tsx
diff --git a/packages/frontend/src/pages/Start/StartPage.tsx b/packages/frontend/src/pages/Start/StartPage.tsx
@@ -1,20 +1,60 @@
-import { faPrayingHands } from '@fortawesome/free-solid-svg-icons';
-import React from 'react';
+import {
+  faPrayingHands,
+  faUser,
+  faUsers,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useState } from 'react';
 import { BreadCrumb } from '@/components/ui/BreadCrumb';
 import { ActiveNoticesBoard } from '@/components/periods/ActiveNoticesBoard';
 import { Box } from '@/components/ui/Box';
 import { Page } from '@/components/ui/Page';
+import { Button } from '@/components/ui/Button';
 import { PraiseTable } from './components/PraiseTable';
+import { MyPraiseTable } from './components/MyPraiseTable';
 
 const StartPage = (): JSX.Element => {
+  const pageViews = {
+    praiseView: 1,
+    myPraiseView: 2,
+  };
+
+  const [view, setView] = useState<number>(pageViews.praiseView);
+
   return (
     <Page>
       <BreadCrumb name="Praise" icon={faPrayingHands} />
-
       <ActiveNoticesBoard />
 
+      <div className="mb-5">
+        <Button
+          variant={'outline'}
+          className={`rounded-r-none  ${
+            view === pageViews.myPraiseView
+              ? 'bg-opacity-50 text-opacity-50 hover:border-themecolor-4'
+              : 'hover:bg-themecolor-3 hover:border-themecolor-3'
+          }`}
+          onClick={(): void => setView(pageViews.praiseView)}
+        >
+          <FontAwesomeIcon icon={faUsers} size="1x" className="mr-2" />
+          All Praise
+        </Button>
+        <Button
+          variant={'outline'}
+          className={`rounded-l-none  ${
+            view === pageViews.praiseView
+              ? 'bg-opacity-50  text-opacity-50 hover:border-themecolor-4 '
+              : 'hover:bg-themecolor-3 hover:border-themecolor-3'
+          }`}
+          onClick={(): void => setView(pageViews.myPraiseView)}
+        >
+          <FontAwesomeIcon icon={faUser} size="1x" className="mr-2" />
+          My Praise
+        </Button>
+      </div>
+
       <Box className="p-0">
-        <PraiseTable />
+        {view === pageViews.praiseView ? <PraiseTable /> : <MyPraiseTable />}
       </Box>
     </Page>
   );

diff --git a/...ges/MyPraise/components/MyPraiseTable.tsx → .../pages/Start/components/MyPraiseTable.tsx b/...ges/MyPraise/components/MyPraiseTable.tsx → .../pages/Start/components/MyPraiseTable.tsx