Merge pull request #91 from Dans-Plugins/feat/track-and-show-visits

Feat/track and show visits

Author: dmccoystephenson

.gitignore

@@ -33,3 +33,12 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+
+# data
+/data
+
+#iml
+*.iml
+
+#xml
+*.xml

Dockerfile

@@ -12,6 +12,7 @@ RUN npm install
 COPY components ./components
 COPY pages ./pages
 COPY public ./public
+COPY services ./services
 COPY styles ./styles
 COPY utils ./utils
 COPY next-env.d.ts ./

components/BottomBar.tsx

@@ -33,18 +33,38 @@ const VersionNumber: React.FC<{ version: string }> = ({version}) => (
 );
 
 interface BottomBarProps {
-    version: string
+    version: string;
+    visits?: number;
+    startDate?: string;
 }
 
-const BottomBar: React.FC<BottomBarProps> = ({version}) => {
+const BottomBar: React.FC<BottomBarProps> = ({version, visits, startDate}) => {
     const colorMode = useContext(ColorModeContext);
     const theme = useTheme();
 
+    const formattedDate = startDate ? new Date(startDate).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+    }) : null;
+
     return (
         <AppBar position="static" sx={(theme) => bottomAppBarStyle(theme)}>
             <Toolbar sx={(theme) => toolbarStyle(theme)}>
                 <Box sx={(theme) => flexContainerStyle(theme)}>
-                    <VersionNumber version={version}/>
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                        <VersionNumber version={version}/>
+                        {visits !== undefined && startDate && (
+                            <>
+                                <Typography variant="body2" color="inherit">
+                                    •
+                                </Typography>
+                                <Typography variant="body2" color="inherit">
+                                    {visits} visits since {formattedDate}
+                                </Typography>
+                            </>
+                        )}
+                    </Box>
 
                     <Box sx={(theme) => flexContainerStyle(theme, {gap: 1})}>
                         <FooterButton

components/VisitCounter.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Typography, Box } from '@mui/material';
+
+interface VisitCounterProps {
+    visits: number;
+    startDate: string;
+}
+
+const VisitCounter: React.FC<VisitCounterProps> = ({ visits, startDate }) => {
+    const formattedDate = new Date(startDate).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+    });
+
+    return (
+        <Box
+            sx={{
+                position: 'fixed',
+                bottom: '80px',
+                right: '20px',
+                padding: '8px',
+                borderRadius: '4px',
+                backgroundColor: 'background.paper',
+                boxShadow: 1
+            }}
+        >
+            <Typography variant="body2">
+                Page Visits: {visits}
+            </Typography>
+            <Typography variant="body2" sx={{ fontSize: '0.8em', opacity: 0.8 }}>
+                Since {formattedDate}
+            </Typography>
+        </Box>
+    );
+};
+
+export default VisitCounter;

compose.yml

@@ -6,5 +6,5 @@ services:
       - "3000:3000"
     volumes:
       - ./node_modules:/app/node_modules
-    restart: always
-    
+      - ./data:/app/data
+    restart: always

pages/api/visits.ts

@@ -0,0 +1,16 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import { initializeVisitStorage, getVisitData, incrementVisitCount } from '../../utils/visitStorage';
+
+initializeVisitStorage();
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+    if (req.method === 'POST') {
+        const data = incrementVisitCount();
+        res.status(200).json(data);
+    } else if (req.method === 'GET') {
+        const data = getVisitData();
+        res.status(200).json(data);
+    } else {
+        res.status(405).json({ message: 'Method not allowed' });
+    }
+}

pages/index.tsx

@@ -5,6 +5,7 @@ import Blurb from '../components/Blurb'
 import PluginCard from '../components/PluginCard'
 import React from 'react';
 import BottomBar from '../components/BottomBar'
+import { getVisits, incrementVisits } from '../services/visitService';
 
 interface PluginData {
     mostPopular: string[];
@@ -80,7 +81,24 @@ const AllPlugins: React.FC = () => (
     </Box>
 )
 
-const Home: NextPage = () => {
+interface HomeProps {
+    visits: number;
+    startDate: string;
+}
+
+export const getServerSideProps = async () => {
+    await incrementVisits();
+    const data = await getVisits();
+
+    return {
+        props: {
+            visits: data.visits,
+            startDate: data.startDate
+        }
+    };
+};
+
+const Home: NextPage<HomeProps> = ({ visits, startDate }) => {
     return (
         <Box sx={pageStyle}>
             <TopBar/>
@@ -91,7 +109,11 @@ const Home: NextPage = () => {
                 <SectionDivider/>
                 <AllPlugins/>
             </Container>
-            <BottomBar version={version}/>
+            <BottomBar
+                version={version}
+                visits={visits}
+                startDate={startDate}
+            />
         </Box>
     );
 };

services/visitService.ts

@@ -0,0 +1,15 @@
+interface VisitData {
+    visits: number;
+    startDate: string;
+}
+
+const getBaseUrl = () => process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
+
+export const incrementVisits = async (): Promise<void> => {
+    await fetch(`${getBaseUrl()}/api/visits`, { method: 'POST' });
+};
+
+export const getVisits = async (): Promise<VisitData> => {
+    const response = await fetch(`${getBaseUrl()}/api/visits`);
+    return response.json();
+};

utils/visitStorage.ts

@@ -0,0 +1,35 @@
+import fs from 'fs';
+import path from 'path';
+
+const DATA_DIR = path.join(process.cwd(), 'data');
+const VISITS_FILE = path.join(DATA_DIR, 'visits.json');
+
+interface VisitData {
+    visits: number;
+    startDate: string;
+}
+
+export const initializeVisitStorage = () => {
+    if (!fs.existsSync(DATA_DIR)) {
+        fs.mkdirSync(DATA_DIR, { recursive: true });
+    }
+
+    if (!fs.existsSync(VISITS_FILE)) {
+        const initialData: VisitData = {
+            visits: 0,
+            startDate: new Date().toISOString()
+        };
+        fs.writeFileSync(VISITS_FILE, JSON.stringify(initialData));
+    }
+};
+
+export const getVisitData = (): VisitData => {
+    return JSON.parse(fs.readFileSync(VISITS_FILE, 'utf8'));
+};
+
+export const incrementVisitCount = (): VisitData => {
+    const data = getVisitData();
+    data.visits += 1;
+    fs.writeFileSync(VISITS_FILE, JSON.stringify(data));
+    return data;
+};