✨ add visit count to admin event view

src/components/pages/events/eventPage/validEvent/ValidEvent.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import styles from './validEvent.module.scss';
 import { Event } from 'models/apiModels';
 import {
@@ -7,10 +7,12 @@ import {
 } from 'components/molecules/event/eventBody/EventBody';
 import { AuthenticateContext, Roles } from 'contexts/authProvider';
 import EventHeader from 'components/molecules/event/eventHeader/EventHeader';
-import { Button } from '@chakra-ui/react';
+import { Button, Center, Flex, Heading, Text } from '@chakra-ui/react';
 import Icon from 'components/atoms/icons/icon';
 import { useHistory } from 'react-router-dom';
 import useTitle from 'hooks/useTitle';
+import { useMobileScreen } from 'hooks/useMobileScreen';
+import { getPageVisit } from 'api';
 
 export interface EventPageProps {
   eid: string;
@@ -23,50 +25,102 @@ const ValidEventLayout: React.FC<{ event: Event }> = ({ event }) => {
   const history = useHistory();
 
   return (
-    <div className={styles.eventBody}>
+    <Flex
+      flexDir="column"
+      w="100%"
+      borderRadius="20px"
+      bg="#222136"
+      textAlign="center">
       <EventHeader id={event.eid} className={styles.header} />
-
       <EventInfo event={event} role={role} />
-
       {role === Roles.admin && (
-        <div className={styles.settingsIcon}>
+        <Flex w="100%" m="1%">
           <Icon
             type={'cog'}
             size={2}
             onClick={() => history.push(`${event.eid}/admin`)}></Icon>
-        </div>
+        </Flex>
       )}
-    </div>
+    </Flex>
   );
 };
 export default ValidEventLayout;
 
+export const ViewCount: React.FC<{ page: string }> = ({ page }) => {
+  const [views, setViews] = useState<number | undefined>();
+
+  const fetchPageVisist = async () => {
+    const response = await getPageVisit(page);
+    setViews(response.visits);
+  };
+
+  useEffect(() => {
+    fetchPageVisist();
+  }, []);
+
+  return (
+    <Center
+      w="75%"
+      height="15%"
+      borderRadius="20px"
+      border="1px"
+      borderColor="#fffff"
+      textAlign="center"
+      flexDir="column">
+      <Heading size="sm" m=".5rem">
+        Antall besøk
+      </Heading>
+      <Center dir="column" textAlign="center">
+        <Icon size={2} type="eye" />
+        <Text p={0} m={0} ml=".5rem">
+          {views ?? 'N/A'}
+        </Text>
+      </Center>
+    </Center>
+  );
+};
+
 export const ValidEventEditLayout: React.FC<{ event: Event }> = ({ event }) => {
   const { role } = useContext(AuthenticateContext);
+  const isMobile = useMobileScreen();
   const [edit, setEdit] = useState(false);
 
   const setEventEdit = () => {
     setEdit(!edit);
   };
 
   return (
-    <div className={styles.eventBody}>
-      <EventHeader id={event.eid} className={styles.header} />
-      {!edit ? (
-        <EventInfo event={event} role={role} />
-      ) : (
-        <EditEvent event={event} setEdit={setEventEdit} />
-      )}
-      {role === Roles.admin && !edit && (
-        <div className={styles.editContainer}>
-          <Button
-            variant="primary"
-            onClick={setEventEdit}
-            className={styles.adminButtons}>
-            Rediger
-          </Button>
-        </div>
-      )}
-    </div>
+    <Flex w="100%" flexDir={isMobile ? 'column' : 'row'}>
+      <Center
+        w="100%"
+        pb="1rem"
+        flexDir="column"
+        bg="#222136"
+        borderRadius="20px"
+        textAlign="center">
+        <EventHeader id={event.eid} className={styles.header} />
+        {!edit ? (
+          <EventInfo event={event} role={role} />
+        ) : (
+          <EditEvent event={event} setEdit={setEventEdit} />
+        )}
+        {role === Roles.admin && !edit && (
+          <Center>
+            <Button
+              variant="primary"
+              onClick={setEventEdit}
+              className={styles.adminButtons}>
+              Rediger
+            </Button>
+          </Center>
+        )}
+      </Center>
+      <Center
+        w={{ base: '100%', md: '12.5vw' }}
+        dir="column"
+        my={{ base: '1rem' }}>
+        <ViewCount page={`/event/${event.eid}`} />
+      </Center>
+    </Flex>
   );
 };

src/components/pages/events/eventPage/validEvent/validEvent.module.scss

@@ -1,32 +1,10 @@
-.eventBody {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  border-radius: 20px;
-  background-color: #222136;
-  text-align: center;
-}
-
-.editContainer {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-}
-
 .header {
   min-height: 35vh;
   border-radius: 20px 20px 0px 0px;
 }
 
 .adminButtons {
   margin: 1% 0 1% 0;
-  width: 25%;
-}
-
-.settingsIcon {
-  margin: 1% 1% 1% 1%;
-  width: 100%;
-  display: flex;
 }
 
 @media screen and (max-width: 768px) {