DN-4: User accounts and comments (#25)

* DN-4: Version bump.

* DN-4: Testing API connection.

* DN-4: Nicer rendering of test API page.

* DN-4: Added toast.

* DN-4: Better loading display.

* DN-4: Centralised db connections in DataBases class.

* DN-4: Modularising server status response.

* DN-4: Dynamically set the database connected to name via env var.

* DN-4: Minor adjustments; next() and last name optional.

* DN-4: Draft of login/register/magic link/forgot password modal.

* DN-4: Formatting.

* DN-4: Minor adjustments.

* DN-4: Sanitising user inputs.

* DN-4: Allow for admin role.

* DN-4: Auth middleware.

* DN-4: Send from correct address.

* DN-4: Spinner.

* DN-4: Comments system first draft.

* DN-4: First draft.

* DN-4: Formatting.

* DN-4: Display more information.

* DN-4: Display comments.

* DN-4: Draft 1 of user accounts system, and re-organisation.

* DN-4: Comments routes.

* DN-4: Testing new husky.

* DN-4: Fixed precommit?

* DN-4: Fixed precommit 2?

* DN-4: Fixed precommit - yes?

* Turn of logging.

* DN-4: Separate styles for cards so I can use them separate without my cards being links.

* DN-4: Working on test page demonstrating API integration.

* DN-4: Simplified and modularised auth views components, can now use the AuthViews component separately from Modal.

* DN-4: More clear callback name.

* DN-4: Demos page.

* DN-4: Fix spacing between containers.

* DN-4: Status indicator component.

* DN-4: Indicate current user status.

* DN-4: Return user's role as well.

* DN-4: Brighter colours.

* DN-4: View for currenlty logged in user.

* DN-4: Export the user obj.

* DN-4: User view.

* DN-4: Use client here.

* DN-4: Don't need use client here.

* DN-4: Switch modal to login when success register.

* DN-4: Working on leave a comment functionality.

* DN-4: Comments demo draft 1.

* DN-4: Success in creating and getting comments.

* DN-4: Clean up logic.

* DN-4: Refactored comments into modules and created API status component.

* DN-4: Mistake in setting placeholder.

* DN-4: Only call data from API one time.

* DN-4: Sending post path in query param since it was thinking it was an end point.

* DN-4: Testing ISR only pre-render some and the others are incrementally rendered as people visit the site.

* DN-4: Define fetchComments function inside to avoid missing deps.

* DN-4: Again avoid missing deps.

* DN-4: Use auth checkAuth as dep.

* DN-4: Revalidate never after first build.

* DN-4: Only if prod mode then build all pages.

* DN-4: Opposite logic oups.

* DN-4: Avoid deps.

* DN-4: Added as dep.

* DN-4: Improve AuthContext with periodic checks and error handling- Add periodic authentication checks to handle session expiration- Implement setUnauthenticated function for manual auth reset- Use useCallback to optimize checkAuth function- Improve error handling in login and logout functions- Update AuthContextType to include new setUnauthenticated function- Adjust AUTH_CHECK_INTERVAL to 6 hours- Add comments and documentation for better code understanding and usage

* DN-4: Is auth and verified protection.

* DN-4: Protect routes and correctly use new Comment with the user's objectID from the session.

* DN-4: Adjustments.

* DN-4: Format the date for display.

* DN-4: Rename will start to add styles.

* DN-4: Turn of comments feature.

* DN-4: Allow for comment delete and edit, maybe it's better to use a Map for the data.

* DN-4: Moved to ui.

* DN-4: Better imports.

* DN-4: Reworking comments.

* DN-4: Rename and mode modular no need to pass user or pathname.

* DN-4: Rename and mode modular no need to pass user or pathname.

* DN-4: Clean up and trying to display how many comments loaded vs how many exist.

* DN-4: Correct logic for getting next page and for showing comments loaded vs total.

* DN-4: Individual comment component.

* DN-4: Recursive populate author information.

* DN-4: Use var.

* DN-4: Working out models for db.

* DN-4: First draft of comments end points; refactored.

* DN-4: Profile end points and added path to comments end points.

* DN-4: Send to profile page.

* DN-4: Draft of comments section.

* DN-4: Profile page.

* DN-4: Wrong aliased path.

* DN-4: Don't add API to end of url.

* DN-4: First version.

* DN-4: Working version of comments section.

* DN-4: Use client.

.github/workflows/release_dev.yml

@@ -9,6 +9,7 @@ env:
   IMAGE_NAME_CLIENT: ${{ secrets.DOCKER_USERNAME }}/derecksnotes-client
   CONTAINER_NAME_SERVER: dev_linode_derecksnotes-server
   CONTAINER_NAME_CLIENT: dev_linode_derecksnotes-client
+  WORK_DIR: /root/dev_docker-compose-derecksnotes/
 
 jobs:
   push_to_registry_server:
@@ -30,9 +31,11 @@ jobs:
       - name: Create .env file
         run: |
           echo BUILD_ENV=DEV > ./server/.env
-          echo API_URL=https://dev.derecksnotes.com/api/ >> ./server/.env
+          echo API_URL=https://dev.derecksnotes.com/ >> ./server/.env
           echo SESSION_SECRET=${{ secrets.SESSION_SECRET }} >> ./server/.env
           echo MONGO_PASSWORD=${{ secrets.MONGO_PASSWORD }} >> ./server/.env
+          echo MONGO_DATABASE=dev_derecksnotes >> ./server/.env
+          echo SENDGRID_API_KEY=${{ secrets.SENDGRID_API_KEY_DEV }} >> ./server/.env
 
       - name: Build and push server image
         uses: docker/build-push-action@3b5e8027fcad23fda98b2e3ac259d8d67585f671
@@ -62,7 +65,7 @@ jobs:
         run: |
           echo NEXT_PUBLIC_BUILD_ENV=DEV > ./client/.env
           echo NEXT_PUBLIC_APP_URL=https://dev.derecksnotes.com/ >> ./client/.env
-          echo NEXT_PUBLIC_API_URL=https://dev.derecksnotes.com/api/ >> ./client/.env
+          echo NEXT_PUBLIC_API_URL=https://dev.derecksnotes.com/ >> ./client/.env
 
       - name: Build and push client image
         uses: docker/build-push-action@3b5e8027fcad23fda98b2e3ac259d8d67585f671
@@ -97,7 +100,7 @@ jobs:
           password: ${{ secrets.REMOTE_PASSWORD }}
           port: ${{ secrets.REMOTE_PORT }}
           source: './docker-compose.yml, .env'
-          target: '/root/dev_docker-compose-derecksnotes/'
+          target: ${{ env.WORK_DIR }}
 
       - name: Deploy to remote server
         uses: appleboy/[email protected]
@@ -108,7 +111,7 @@ jobs:
           port: ${{ secrets.REMOTE_PORT }}
           command_timeout: 20m
           script: |
-            cd /root/dev_docker-compose-derecksnotes/
+            cd ${{ env.WORK_DIR }}
             docker pull ${{ env.IMAGE_NAME_SERVER }}:latest_dev
             docker pull ${{ env.IMAGE_NAME_CLIENT }}:latest_dev
             docker container prune -f

.github/workflows/release_prod.yml

@@ -32,6 +32,8 @@ jobs:
           echo API_URL=https://derecksnotes.com/api/ >> ./server/.env
           echo SESSION_SECRET=${{ secrets.SESSION_SECRET }} >> ./server/.env
           echo MONGO_PASSWORD=${{ secrets.MONGO_PASSWORD }} >> ./server/.env
+          echo MONGO_DATABASE=prod_derecksnotes >> ./server/.env
+          echo SENDGRID_API_KEY=${{ secrets.SENDGRID_API_KEY_PROD }} >> ./server/.env
 
       - name: Build and push server image
         uses: docker/build-push-action@3b5e8027fcad23fda98b2e3ac259d8d67585f671

.husky/pre-commit

@@ -1,11 +1,23 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npm run format # prettier
+# Get list of initially staged files
+initially_staged_files=$(git diff --cached --name-only --diff-filter=ACM | tr '\n' ' ')
+
+# Run Prettier on the entire project
+npm run format
+
+# If there were initially staged files, re-stage only those files
+if [ -n "$initially_staged_files" ]; then
+    echo "$initially_staged_files" | xargs git add
+else
+    echo "No files were initially staged."
+fi
+
+# Run any tests if needed
 # npm test
 # cd server
 # npm run test
 # cd ..
 
-git push
-echo "pre-commit hook complete."
+echo "pre-commit hook complete."

client/next.config.mjs

@@ -2,16 +2,7 @@
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
 
-// only used with dynamic rendering, not compatible with output: 'export' | 'standalone'
-// used locally for rewriting api calls to X server
-async function rewrites() {
-    return [
-        {
-            source: '/api/:path*',
-            destination: `${API_URL}/api/:path*`
-        }
-    ];
-}
+console.log(`Proxying API requests to ${API_URL}`);
 
 const nextConfig = {
     // output: 'export',
@@ -20,6 +11,17 @@ const nextConfig = {
     // },
     // output: 'standalone',
     // assetPrefix: process.env.NEXT_PUBLIC_APP_URL || '', // if standalone
+    // ---
+    // only used with dynamic rendering, not compatible with output: 'export' | 'standalone'
+    // used locally for rewriting api calls to X server
+    async rewrites() {
+        return [
+            {
+                source: '/api/:path*',
+                destination: `${API_URL}/:path*`
+            }
+        ];
+    },
     compiler: {
         styledComponents: true
     }

client/package.json

@@ -2,7 +2,7 @@
   "name": "client",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 6969",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -19,7 +19,9 @@
     }
   },
   "dependencies": {
+    "axios": "^1.7.2",
     "gray-matter": "^4.0.3",
+    "lucide-react": "^0.396.0",
     "mdast-util-toc": "6.0.0",
     "next": "^14.2.4",
     "next-mdx-remote": "^5.0.0",
@@ -41,6 +43,7 @@
     "sass": "^1.77.5",
     "sharp": "^0.33.4",
     "shiki": "^1.6.5",
+    "sonner": "^1.5.0",
     "styled-components": "^6.1.11",
     "unist-util-visit": "^5.0.0"
   },

client/src/app/blog/[slug]/page.tsx

@@ -1,20 +1,17 @@
 import fs from 'fs';
 import path from 'path';
-import {
-    APPLICATION_DEFAULT_METADATA,
-    ROOT_DIR_APP
-} from '@components/lib/constants';
-import { processMdx } from '@components/utils/mdx/processMdx';
+import { APPLICATION_DEFAULT_METADATA, ROOT_DIR_APP } from '@lib/constants';
+import { processMdx } from '@utils/mdx/processMdx';
 import { notFound } from 'next/navigation';
-import { Post } from '../../../components/pages/Post';
+import { Post } from '@components/pages/Post';
 import {
     PostMetadata,
     extractSinglePostMetadata,
     getPostsWithSection
-} from '@components/utils/mdx/fetchPostsMetadata';
-import { accessReadFile } from '@components/utils/accessReadFile';
+} from '@utils/mdx/fetchPostsMetadata';
+import { accessReadFile } from '@utils/accessReadFile';
 import { Metadata } from 'next';
-import { decodeSlug } from '@components/utils/helpers';
+import { decodeSlug } from '@utils/helpers';
 
 const section: string = 'blog';
 const relDir = path.join(section, 'posts');

client/src/app/courses/[slug]/page.tsx

@@ -1,20 +1,17 @@
 import fs from 'fs';
 import path from 'path';
-import {
-    APPLICATION_DEFAULT_METADATA,
-    ROOT_DIR_APP
-} from '@components/lib/constants';
-import { processMdx } from '@components/utils/mdx/processMdx';
+import { APPLICATION_DEFAULT_METADATA, ROOT_DIR_APP } from '@lib/constants';
+import { processMdx } from '@utils/mdx/processMdx';
 import { notFound } from 'next/navigation';
-import { Post } from '../../../components/pages/Post';
+import { Post } from '@components/pages/Post';
 import {
     PostMetadata,
     extractSinglePostMetadata,
     getPostsWithSection
-} from '@components/utils/mdx/fetchPostsMetadata';
-import { accessReadFile } from '@components/utils/accessReadFile';
+} from '@utils/mdx/fetchPostsMetadata';
+import { accessReadFile } from '@utils/accessReadFile';
 import { Metadata } from 'next';
-import { decodeSlug } from '@components/utils/helpers';
+import { decodeSlug } from '@utils/helpers';
 
 const section: string = 'courses';
 const relDir = path.join(section, 'posts');

client/src/app/courses/page.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 
-import { APPLICATION_DESCRIPTION } from '@components/lib/constants';
+import { APPLICATION_DESCRIPTION } from '@lib/constants';
 import { Metadata } from 'next';
 
 import {
     PostMetadata,
     getPostsWithSection
-} from '@components/utils/mdx/fetchPostsMetadata';
-import { Index } from '@components/components/pages/index/Index';
+} from '@utils/mdx/fetchPostsMetadata';
+import { Index } from '@components/pages/index/Index';
 
 export const metadata: Metadata = {
     title: 'Dn | Courses',

client/src/app/dictionaries/biology/[slug]/page.tsx

@@ -1,30 +1,33 @@
 import fs from 'fs';
 import path from 'path';
-import { Post } from '@components/components/pages/Post';
-import {
-    APPLICATION_DEFAULT_METADATA,
-    ROOT_DIR_APP
-} from '@components/lib/constants';
+import { Post } from '@components/pages/Post';
+import { APPLICATION_DEFAULT_METADATA, ROOT_DIR_APP } from '@lib/constants';
+import { NEXT_PUBLIC_BUILD_ENV_BOOL } from '@lib/env';
 import {
     DefinitionMetadata,
     extractSingleDefinitionMetadata,
     fetchDefintionsMetadata
-} from '@components/utils/dictionaries/fetchDefinitionMetadata';
-import { accessReadFile } from '@components/utils/accessReadFile';
+} from '@utils/dictionaries/fetchDefinitionMetadata';
+import { accessReadFile } from '@utils/accessReadFile';
 import { notFound } from 'next/navigation';
-import { processMdx } from '@components/utils/mdx/processMdx';
+import { processMdx } from '@utils/mdx/processMdx';
 import { Metadata } from 'next';
-import { decodeSlug } from '@components/utils/helpers';
+import { decodeSlug } from '@utils/helpers';
 
 const dictionary: string = 'biology';
 const relDir: string = path.join('dictionaries', dictionary, 'definitions');
 const absDir: string = path.join(ROOT_DIR_APP, relDir);
 
 export async function generateStaticParams(): Promise<{ slug: string }[]> {
-    const filenames: string[] = fs.readdirSync(absDir).filter((filename) => {
+    let filenames: string[] = fs.readdirSync(absDir).filter((filename) => {
         return filename.endsWith('.mdx');
     });
 
+    // if NEXT_PUBLIC_BUILD_ENV_BOOL then return all
+    if (!NEXT_PUBLIC_BUILD_ENV_BOOL) {
+        filenames = filenames.slice(0, 3);
+    }
+
     return filenames.map((filename) => {
         const slug = path.basename(filename, '.mdx');
         return { slug };

client/src/app/dictionaries/biology/page.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import path from 'path';
-import { ROOT_DIR_APP } from '@components/lib/constants';
-import { Dictionary } from '@components/components/pages/dictionaries/Dictionary';
-import { fetchAllDefintions } from '@components/utils/dictionaries/fetchDefinitionMetadata';
+import { ROOT_DIR_APP } from '@lib/constants';
+import { Dictionary } from '@components/pages/dictionaries/Dictionary';
+import { fetchAllDefintions } from '@utils/dictionaries/fetchDefinitionMetadata';
 import { Metadata } from 'next';
 
 const dictionary: string = 'biology';