DEV Community: It's Just Nifty

Creating Extensions In Opera For Beginners

It's Just Nifty — Wed, 25 Sep 2024 23:27:47 +0000

Opera is my favorite browser! I mean, I'm using it right now. If you don't know, now you know. Besides being awesome, Opera makes it easy to create extensions...which is pretty awesome. So, why not share this easy guide on how to do it? This is gonna be quick, so let's dive in!

(Image Source)

Create your project directory, and then a manifest.json file by running:

code -r manifest.json

touch manifest.json

BTW, code -r manifest.json is used in VSCode (Visual Studio Code). Let's continue!

Add this code to your manifest.json file:

{
    "manifest_version": 2,
    "name": "First Opera Extension",
    "description": "example extension",
    "version": "1.0",
    "browser_action": {
        "default_popup": "index.html",
        "default_icon": "icon.png",
        "default_title": "My first extension"
    }
}

Excellent!

Now, create a index.html file and add code, similar to this:

<!DOCTYPE html>
<html style="width: 357px; height: 300px; border: 1px solid #e7e9eb; border-radius: 10px;">
    <body>
        <div>
            <h1>Hello, world!</h1>
        </div>
    </body>
</html>

Make sure you grab an icon from somewhere, or you can create one. Either way, add an icon for your extension and title it icon.png .

In Opera, type into the browser's address bar opera://extensions or use the shortcut cmd/ctrl + shift + E. Then enable developer mode. You should see a switch...

Click on "Load Unpacked Extension" and select the folder of your project.

And then...you're done.

Congrats on your extension.

If you like me, and I know you do, subscribe to my newsletter!

Until next time, nerds...

Happy Coding!

Love ya ❤️

Creating Dynamic Routes With Metadata in Next.Js

It's Just Nifty — Mon, 16 Sep 2024 02:50:57 +0000

This is for the app router

I learned a lot while creating my own blog website. One of the things I learned that stuck in my head was how to create dynamic routes with metadata.

Nifty Little Me was not a walk in the park. Those dynamic routes was a pain. And after I figured that out, I had to fight the magic dragon, aka metadata.

I gained a nifty little blog and something to write about.

Learn how to create dynamic routes with metadata for Next.js app router!

Downloading Webpages As PDFs With PHP And JavaScript

It's Just Nifty — Sun, 15 Sep 2024 22:16:48 +0000

Converting HTML to a PDF in PHP was easy. Let's bring it up a notch and convert a webpage to a PDF file using PHP and JavaScript.

To do this, you will need to install Composer and Node.

After installing those things, you will need to install Dompdf using Composer and Puppeteer using npm (Node package manager):

composer require dompdf/dompdf

npm install puppeteer

Create a HTML file (Example: index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpage to Pdf</title>
</head>
<body>
    <main>
        <form action="web-pdf.php" method="get">
            <label for="url">Website URL:</label>
            <input type="text" id="url" name="url" required>
            <button type="submit">Download Content</button>
        </form>
    </main>
</body>
</html>

Create a PHP file (Example: web-pdf.php):

<?php
require 'vendor/autoload.php';

use Dompdf\Dompdf;

if (isset($_GET['url'])) {
    $url = escapeshellarg($_GET['url']);
    $content = shell_exec("node download.js {$url}");

    try {
        convertHTML($content);
    } catch (Exception $e) {
        echo "Some error: " . $e->getMessage();
    }
} else {
    echo "No URL provided.";
}

function convertHTML($content) {
    $dompdf = new Dompdf();
    $dompdf->loadHtml($content);

    // Setup the paper size and orientation
    $dompdf->setPaper('A4', 'landscape');

    // Render the HTML as PDF
    $dompdf->render();

    ob_end_clean();

    // Output the generated PDF
    $dompdf->stream();
}
?>

Lastly, create a JavaScript File to use Puppeteer (Example: download.js):

const puppeteer = require('puppeteer');

// Get URL from command-line arguments
const url = process.argv[2];

(async () => {
  try {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(url); // Use the URL passed from PHP
    await page.waitForSelector('main', { timeout: 10000 }); // Adjust selector and timeout as needed

    const content = await page.content();
    console.log(content);

    await browser.close();
  } catch (error) {
    console.error('Error:', error);
  }
})();

Note: Remove the ten second timeout or change the element (main) if the content is not what you expect.

There you go! Just like that, you have a webpage to PDF converter.

Happy Coding Folks!

Converting HTML To PDF With HTML Button

It's Just Nifty — Sun, 15 Sep 2024 19:24:59 +0000

It's easy to convert HTML into a PDF with the help of libraries. Sometimes starting a download once you've navigated to a page is needed; however, let's give people the option to download the PDF or not. You can do that by adding HTML to your converter. Here's how.

HTML code (Example: index.php):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html to Pdf</title>
</head>
<body>
    <?php
        $content = '<h1>Hello World</h1>';
        echo $content;
    ?>
    <main>
        <a href='html-php.php?download=true&content=<?php echo addslashes($content); ?>'>Create PDF</a>
    </main>
</body>
</html>

PHP code (Example: html-php.php):

<?php
    require 'vendor/autoload.php';

    // reference the Dompdf namespace
    use Dompdf\Dompdf;


    if (isset($_GET['download'])) {
        $content = $_GET['content'];
        try {
            convertHTML($content);
        } catch ( Exception $e) {
            echo "some error:" . $e->getMessage();
        }
    }

    function convertHTML($content){

        // instantiate and use the dompdf class
        $dompdf = new Dompdf();
        $dompdf->loadHtml($content);

        // (Optional) Setup the paper size and orientation
        $dompdf->setPaper('A4', 'landscape');

        // Render the HTML as PDF
        $dompdf->render();

        ob_end_clean();

        // Output the generated PDF to Browser
        $dompdf->stream();
    }
    ?>

How To Convert HTML To PDF With PHP

It's Just Nifty — Sun, 15 Sep 2024 02:30:00 +0000

(Guide For Windows. Not Mac or Linux)

(Image Source)

There's more than one way to convert HTML to a PDF in PHP. You can use Dompdf or Mpdf; however, there is a difference in how these two libraries are doing it.

Note: Not all solutions will be in this article.

To use both these libraries, you will need Composer.

Converting HTML To PDF With Dompdf

I also show the code in the article discussing why the PDF sometimes won't open when using Dompdf.

    <?php
        require 'vendor/autoload.php';

        // reference the Dompdf namespace
        use Dompdf\Dompdf;

        $content = '<h1>Hello World</h1>';

        // instantiate and use the dompdf class
        $dompdf = new Dompdf();
        $dompdf->loadHtml($content);

        // (Optional) Setup the paper size and orientation
        $dompdf->setPaper('A4', 'landscape');

        // Render the HTML as PDF
        $dompdf->render();

        ob_end_clean();

        // Output the generated PDF to Browser
        $dompdf->stream();
    ?>

With this code, the PDF is downloaded.

Converting HTML To PDF With Mpdf

<?php
    require_once __DIR__. '/vendor/autoload.php';
    use Mpdf\Mpdf;
    $mpdf = new Mpdf();
    $mpdf->WriteHTML('<h1>Hello world! Hi</h1>');
    $mpdf->Output();
?>

With this code, the PDF is opened in the browser when you navigate to your file (Example: localhost/test1.php)

Unable To Open Dompdf PDF File? Here's The Solution

It's Just Nifty — Sun, 15 Sep 2024 00:03:10 +0000

(Image Source)

To open a PDF made with Dompdf, you might want to add

ob_end_clean();

before

$dompdf->stream();

In your PHP project.

ob_end_clean — Clean (erase) the contents of the active output buffer and turn it off

(Quote Source)

Full Example Code:

    <?php
        require 'vendor/autoload.php';

        // reference the Dompdf namespace
        use Dompdf\Dompdf;

        $content = '<h1>Hello World</h1>';

        // instantiate and use the dompdf class
        $dompdf = new Dompdf();
        $dompdf->loadHtml($content);

        // (Optional) Setup the paper size and orientation
        $dompdf->setPaper('A4', 'landscape');

        // Render the HTML as PDF
        $dompdf->render();

        ob_end_clean();

        // Output the generated PDF to Browser
        $dompdf->stream();
    ?>

For potentially more answers, go here.

How To Use Tailwind CSS With A Plain PHP Project

It's Just Nifty — Wed, 11 Sep 2024 20:29:23 +0000

(Image Source)

To start using Tailwind CSS with your plain PHP project, you can install Tailwind CSS in your project. This is how:

Run npm init -y in the terminal.
Install Tailwind dependencies: npm install tailwindcss postcss autoprefixer
Generate Tailwind configuration file: npx tailwindcss init
Create a postcss.config.js file and add this code:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
};

Create a folder called src and a styles.css file with this code:

@tailwind base;
@tailwind components;
@tailwind utilities;

Add a build script to your package.json:

  "scripts": {
    "build:css": "npx postcss src/styles.css -o public/styles.css"
  },

Run npm run build:css in the terminal.
Include a link to the public/styles.css in your page’s file (example: index.php):

<link href="./public/styles.css" rel="stylesheet">

Make sure you run npm run build:css after making changes.
Also, make sure your tailwind.config.js includes the paths to your .php and .html files:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class', // or 'media'
  content: [
    "./**/*.php",
    "./**/*.html"
  ],
  theme: {
    extend: {
...
    }
  },
  plugins: [],
}

Happy Coding Folks!

Creating Reusable HTML Components In PHP

It's Just Nifty — Mon, 09 Sep 2024 04:34:44 +0000

Image Source

If you’re creating your website with PHP and HTML, you’ll want to reuse some components. For example, instead of creating identical headers for all the pages, you can create one header component and use it on multiple pages. Reusable PHP components will save you time.

In PHP web development, you can create these php components by creating a new file (example: header.component.php). Creating a folder for the file to go in is optional, but in this article, we will do it anyway (components/header.component.php).

Inside the header.component.php file, add the code for your header:

<?php
function createHeader() {
    return '
          <header>
       ...
          </header>
    ';
  }  
?>

Then add this to your page’s code (Not the component. Example: index.php ):

        <?php
            include "./components/header.component.php";
            echo createHeader();
        ?>

Happy Coding Folks!

Whoever Said You Need An IDE To Program In C?

It's Just Nifty — Fri, 23 Aug 2024 16:56:33 +0000

Note: This guide is for Windows only and the steps might differ for Mac and Linux users

Let’s face it, IDEs can take up a lot of unnecessary room. So, forget all the noise you heard about using an IDE and just give me a minute of your time. In my life, C has been a language thrown around in semi-crowded rooms. Kinda like that one building you pass all the time on your way somewhere important to you. I never took a second to look into it. Mainly because I thought you needed an IDE or to install more stuff on your already full computer.

When I tried C for the first time, I was shocked. No, I didn’t download and install an IDE. I did something else instead. Something that you can do too 🙂. So what did I do? Well, I downloaded GCC, installed the C/C++ extension in VSCode, and started programming. Here are the steps:

Go to this website to download a GCC zip file
Download the latest version
Extract the zip file
Rename the extracted folder (make the name shorter, ex: gcc-14.1.0 )
Move the folder to the (C:) directory in files
Inside the folder, go to the bin folder
Copy the path to the bin folder
Go to your environment variables
Click on Path in System Variables
Add the path to the GCC bin directory to Path (System Variables)
Open the CMD ( Command Prompt )
Run gcc –version
Once you have verified GCC, make a folder ( ex: testing-c )
Open the folder in VSCode
Create a C file ( ex: testing1.c )
Copy and Paste this code:
Open CMD ( Command Prompt )
Go to your folder in CMD ( ex: testing-c )
Run gcc testing1.c
Run a or a.exe

Congrats, you are now on the bus that goes down C road. Have a seat and get ready for the bumps, wrong turns, and potholes. What makes this bus different is we’re going to be getting off at EVERY STOP because there is always a lot to learn on this trip.

With that being said, I can’t wait to learn C.

Happy Coding Folks!

You Created A React Native Android App? Cool. How Do You Publish It?

It's Just Nifty — Wed, 21 Aug 2024 18:43:53 +0000

Note: This guide is for Windows only

So, I’ve been creating mobile apps. What have you been doing? Probably the same thing if you clicked on this article. Or maybe you’re just curious; however, I’m going to assume that you have created your React Native Android app already, and are ready to start tackling publishing it to Google Play.

So, how do you do that? Well, if you’re like younger me and think it’s as easy as the ABCs, you’re wrong. Let me just tell ya, I had one heck of a time trying to do this. But the struggle was worth it because now I get to share the steps. Without further ado, let’s jump right in!

The Image Above: Photo by Pathum Danthanarayana on Unsplash

Creating An AAB File

So what is an AAB file? To my understanding, it’s a file the Google Play Store prompts you for when trying to publish an app there. By the way, the AAB file is what Google Play calls the App Bundle.

Anyway, how do you generate one?

Well, the first step is creating an upload key keystore. I expect you to have a version of JDK installed because you need it to have a React Native Android app developed in the first place.

Have JDK Installed
Open CMD (Command Prompt) As Administrator
Navigate To JDK Bin Directory: C:\Program Files\Java\jdkx.x.x_x\bin
Run this Command: keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
Enter Keystore Password When Prompted
Keep The Keystore File Private
Place the Keystore File In Your android/app Folder
Add This Code To Your android/gradle.properties file:
Add this code to your android/app/build.gradle:
Open CMD (Command Prompt) Again
Navigate To android/app
Run This Command: ./gradlew.bat bundleRelease

And after all of that, you should have an app-release.aab file. Make sure it’s in the android\app\build\outputs\bundle\release directory.

Inside The Google Play Console

After you did all of that there is more. Go to your Google Play Console, and yes, pay the $25. After you make that little investment, let’s get your Android app out there.

Create A New App In Your Google Play Console
Setup App By Completing All The Steps Listed
Manage Your App Listing
When Creating Releases, Upload The AAB File You Have Created For App Bundles
Go Through With Testing
Make Sure You Meet The Requirements

Additional Steps

You might want to update your app to fix bugs, errors, etc…

Change Version, Version Code, and Version Name In package.json and android/app/build.gradle
Open CMD (Command Prompt) Again!
Navigate To android/app
Run This Command: ./gradlew.bat bundleRelease
Create A New Release In The Google Play Console

And just like that, you are done, your app is published, and everyone is happy. Yay, splendid, and congrats! These are the steps I took, so follow them to a T and you should be fine.

Check out my other Articles! Learn how to set up Firebase in your React Native project. To find out what I'm writing next, subscribe to my newsletter. Also, check out my Medium if you like me so much.

Happy Coding Folks!

Adding Chat Functionality To Your Next.Js Project With Firebase

It's Just Nifty — Sun, 18 Aug 2024 23:28:05 +0000

Compared to all the other things you can add to your Next.Js projects, chat functionality has to be one of the easiest things you can implement. Why? Because there are a bunch of solutions out there for good reasons. A lot of websites are popping up with live chat features, more often than not for help, support, and to talk to a representative, which is why it’s important to know how to code a chat feature.

But, of course, you already know that, right? Why else would you click on this tutorial walking you through how to do it? And you’re probably gonna skip this introduction anyway to get into the nitty-gritty. So, let’s get into coder mode and get started!

Getting Started

Learn all about Firebase on the website. You might fall in love with it. And if you don’t know what Next.Js is…seriously, what are you doing here? But you can learn more about this great React framework in its documentation.

To follow this tutorial, create a Firestore collection called ‘users’ with a name field. Then, create a collection called ‘chats’ with the fields being a timestamp called ‘createdAt’ and an array called ‘participants’. Inside the document, create a collection called ‘messages’ with fields ‘senderId’, ‘text’, and ‘timestamp’.

You also need to ensure you have a firebase.js file in the app directory of your project. Inside should be your Firebase config:

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";
import { getStorage } from 'firebase/storage';

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "AUTH_DOMIAN",
  projectId: "PROJECT_ID",
  storageBucket: "STORAGE_BUCKET",
  messagingSenderId: "MESSAGE_SENDER_ID",
  appId: "APP_ID"
};

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);

const auth = getAuth(app);

const storage = getStorage(app);

export { db, auth, storage };

Before we can start on the chat component, we can make life easier by creating a users file with the following code:

import { collection, getDocs } from 'firebase/firestore';
import { db } from '@/app/firebase';

interface User {
  id: string;
  name: string;
}

async function fetchUsers(): Promise<User[]> {
  const usersCollection = collection(db, 'users');
  const usersSnapshot = await getDocs(usersCollection);
  const usersList = usersSnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() } as User));
  return usersList;
}

export {
  fetchUsers
};

With that setup, let’s get started with the actual chat code.

Breaking Down The Chat Code

Now, we can create a file in the folder with all the rest of our components (this folder may vary depending on your setup or you might need to create a components folder in your app directory) and let’s name the file chat.jsx.

These are the self-explanatory imports you should have:

'use client';
import { useEffect, useState, useRef } from 'react';
import { getFirestore, collection, addDoc, Timestamp, query, onSnapshot, orderBy, getDocs } from 'firebase/firestore';
import { useRouter, useSearchParams } from 'next/navigation';
import { fetchUsers } from './users';

We also need to declare quite a bit:

  const searchParams = useSearchParams();
  const router = useRouter();
  const [messages, setMessages] = useState([]);
  const [newMessage, setNewMessage] = useState('');
  const chatContainerRef = useRef(null); // Ref for chat container

  const user1Id = searchParams.get('user1Id'); // Get user1Id from URL parameters
  const user2Id = searchParams.get('user2Id'); // Get user2Id from URL parameters
  const [user1, setUser1] = useState(null);
  const [user2, setUser2] = useState(null);
  const [isReversed, setIsReversed] = useState(false);
  const [currentUserId, setCurrentUserId] = useState(null);
  const [chatId, setChatId] = useState(null);

  const db = getFirestore();

We also need to set the current user id:

  useEffect(() => {
    const id = searchParams.get('user1Id');
    setCurrentUserId(id);
  }, []);

Next, let’s create a chat session:

  const createChatSession = async (participants) => {
    try {
      const chatDocRef = await addDoc(collection(db, 'chats'), {
        participants,
        createdAt: Timestamp.fromDate(new Date()),
      });
      return chatDocRef.id;
    } catch (error) {
      console.error("Error creating chat session:", error);
      throw error;
    }
  };

We also need to fetch all of the necessary data, such as the user’s info, and retrieve the chat session if there is one:

  useEffect(() => {
    const fetchData = async () => {
      const users = await fetchUsers();
      const user1Data = users.find(user => user.id === user1Id);
      const user2Data = users.find(user => user.id === user2Id);

      setUser1(user1Data || null);
      setUser2(user2Data || null);

      if (currentUserId === user1Id) {
        setIsReversed(false);
      } else if (currentUserId === user2Id) {
        setIsReversed(true);
      }

      const chatDocRef = collection(db, 'chats');
      const chatQuery = query(chatDocRef, orderBy('createdAt'));
      const chatSnapshot = await getDocs(chatQuery);
      const chatDoc = chatSnapshot.docs.find(doc => doc.data().participants.includes(user1Id) && doc.data().participants.includes(user2Id));

      if (chatDoc) {
        setChatId(chatDoc.id);
      } else {
        const newChatId = await createChatSession([user1Id, user2Id]);
        setChatId(newChatId);
      }
    };

    fetchData();
  }, [user1Id, user2Id, currentUserId, db]);

We also will get the messages:

  useEffect(() => {
    if (!chatId) return;
    const q = query(collection(db, `chats/${chatId}/messages`), orderBy('timestamp'));
    const unsubscribe = onSnapshot(q, (snapshot) => {
      const newMessages = snapshot.docs.map(doc => doc.data());
      setMessages(newMessages);
    });

    console.log('Messages')

    return () => unsubscribe();
  }, [chatId, db]);

After we get the messages, we need to ensure that the messages appear on the bottom first, and a part of doing that will be thanks to adding this code:

  useEffect(() => {
    // Scroll to the bottom of the chat container when new messages are added
    if (chatContainerRef.current) {
      chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
    }
  }, [messages]);

Handle sending messages:

  const handleSendMessage = async (messageText) => {
    if (messageText.trim() && chatId) {
      await addDoc(collection(db, `chats/${chatId}/messages`), {
        senderId: currentUserId,
        text: messageText,
        timestamp: Timestamp.fromDate(new Date()),
      });
      setNewMessage('');
    }
  };

Then let’s generate the chat link so the other user can join:

  const generateChatLink = () => {
   const currentUrl = window.location.origin;
   const chatUrl = `${currentUrl}?user1Id=${user2.id}&user2Id=${user1.id}&chatId=${chatId}`;
   return chatUrl;
  };

  const chatLink = generateChatLink();

Display the link:

        <div className='p-4'>
          <p>Share this link with {user2.name} to join the chat:</p>
          <input type="text" value={chatLink} className="text-black" readOnly style={{ width: '100%', padding: '8px', marginBottom: '10px' }} />
          <button onClick={() => navigator.clipboard.writeText(chatLink)} className='bg-blue-500 text-white p-2 rounded'>Copy Link</button>
        </div>

Add the container for the messages:

        <div
          className="chat-container bg-opacity-55 bg-slate-900 m-4 p-4"
          ref={chatContainerRef}
          style={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'flex-end',
            overflowY: 'auto',
            height: 'calc(80vh - 220px)',
            marginTop: '10px',
            border: '1px solid red',
          }}
        >
          {messages.map((message, index) => (
            <div
              key={index}
              className={`message ${message.senderId === user1.id ? (isReversed ? 'received' : 'sent') : (isReversed ? 'sent' : 'received')}`}
              style={{
                backgroundColor: message.senderId === user1.id
                  ? (isReversed ? 'lightgray' : 'blue')
                  : (isReversed ? 'blue' : 'lightgray'),
                color: message.senderId === user1.id ? 'white' : 'black',
                borderRadius: '10px',
                padding: '10px',
                marginBottom: '10px',
                alignSelf: message.senderId === user1.id ? 'flex-end' : 'flex-start',
                maxWidth: '60%',
              }}
            >
              <div className="bubble text-black">{message.text}</div>
            </div>
          ))}
        </div>

Lastly, add a way to type the message:

const MessageInput = ({ onSendMessage }) => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleSend = () => {
    if (inputValue.trim() !== '') {
      onSendMessage(inputValue);
      setInputValue('');
    }
  };

  return (
    <div className="message-input" style={{ position: 'absolute', bottom: 0, width: '100%', display: 'flex', alignItems: 'center', padding: '10px', backgroundColor: 'rgba(0, 0, 0, 0.5)' }}>
      <input
        type="text"
        value={inputValue}
        onChange={handleChange}
        style={{ flex: 1, marginRight: '10px', padding: '10px', borderRadius: '5px', border: '1px solid #fff', color: '#000' }}
      />
      <button
        onClick={handleSend}
        style={{ padding: '10px', borderRadius: '5px', backgroundColor: '#007BFF', color: '#fff', border: 'none' }}>
        Send
      </button>
    </div>
  );
};

Now, let’s put the pieces together!

The Full Code

This is the full code:

'use client';
import { useEffect, useState, useRef } from 'react';
import { getFirestore, collection, addDoc, Timestamp, query, onSnapshot, orderBy, getDocs } from 'firebase/firestore';
import { useRouter, useSearchParams } from 'next/navigation';
import { fetchUsers } from './users';

const ChatPage = () => {
  const searchParams = useSearchParams();
  const router = useRouter();
  const [messages, setMessages] = useState([]);
  const [newMessage, setNewMessage] = useState('');
  const chatContainerRef = useRef(null); // Ref for chat container

  const user1Id = searchParams.get('user1Id'); // Get user1Id from URL parameters
  const user2Id = searchParams.get('user2Id'); // Get user2Id from URL parameters
  const [user1, setUser1] = useState(null);
  const [user2, setUser2] = useState(null);
  const [isReversed, setIsReversed] = useState(false);
  const [currentUserId, setCurrentUserId] = useState(null);
  const [chatId, setChatId] = useState(null);

  const db = getFirestore();

  useEffect(() => {
    // Get the user ID from local storage
    const id = searchParams.get('user1Id');
    setCurrentUserId(id);
  }, []);

  const createChatSession = async (participants) => {
    try {
      // Add a new chat document to the 'chats' collection
      const chatDocRef = await addDoc(collection(db, 'chats'), {
        participants,
        createdAt: Timestamp.fromDate(new Date()), // Add creation timestamp
      });
      return chatDocRef.id; // Return the new chat document ID
    } catch (error) {
      console.error("Error creating chat session:", error);
      throw error;
    }
  };

  useEffect(() => {
    const fetchData = async () => {
      const users = await fetchUsers(); // Fetch all users
      const user1Data = users.find(user => user.id === user1Id);
      const user2Data = users.find(user => user.id === user2Id);

      setUser1(user1Data || null);
      setUser2(user2Data || null);

      // Determine user roles
      if (currentUserId === user1Id) {
        setIsReversed(false); // Normal color scheme for user1
      } else if (currentUserId === user2Id) {
        setIsReversed(true); // Reverse colors for user2
      }

      // Create or retrieve chat session
      const chatDocRef = collection(db, 'chats');
      const chatQuery = query(chatDocRef, orderBy('createdAt'));
      const chatSnapshot = await getDocs(chatQuery);
      const chatDoc = chatSnapshot.docs.find(doc => doc.data().participants.includes(user1Id) && doc.data().participants.includes(user2Id));

      if (chatDoc) {
        setChatId(chatDoc.id);
      } else {
        const newChatId = await createChatSession([user1Id, user2Id]);
        setChatId(newChatId);
      }

    };

    fetchData();
  }, [user1Id, user2Id, currentUserId, db]);

  useEffect(() => {
    if (!chatId) return;

    const q = query(collection(db, `chats/${chatId}/messages`), orderBy('timestamp'));
    const unsubscribe = onSnapshot(q, (snapshot) => {
      const newMessages = snapshot.docs.map(doc => doc.data());
      setMessages(newMessages);
    });

    console.log('Messages')

    return () => unsubscribe();
  }, [chatId, db]);

  useEffect(() => {
    // Scroll to the bottom of the chat container when new messages are added
    if (chatContainerRef.current) {
      chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
    }
  }, [messages]);

  const handleSendMessage = async (messageText) => {
    if (messageText.trim() && chatId) {
      await addDoc(collection(db, `chats/${chatId}/messages`), {
        senderId: currentUserId,
        text: messageText,
        timestamp: Timestamp.fromDate(new Date()),
      });
      setNewMessage(''); // Clear the input field
    }
  };

  if (!user1 || !user2 || !chatId) {
    return <div>Loading...</div>;
  }

  const generateChatLink = () => {
   const currentUrl = window.location.origin;
   const chatUrl = `${currentUrl}?user1Id=${user2.id}&user2Id=${user1.id}&chatId=${chatId}`;
   return chatUrl;
  };

  const chatLink = generateChatLink();

  return (
    <div>
      <div style={{ position: 'relative', zIndex: 1, height: '100vh' }}>
        <h2 className='text-purple-300 text-xl'>Chat with {user2.name}</h2>

        <div className='p-4'>
          <p>Share this link with {user2.name} to join the chat:</p>
          <input type="text" value={chatLink} className="text-black" readOnly style={{ width: '100%', padding: '8px', marginBottom: '10px' }} />
          <button onClick={() => navigator.clipboard.writeText(chatLink)} className='bg-blue-500 text-white p-2 rounded'>Copy Link</button>
        </div>

        <div
          className="chat-container bg-opacity-55 bg-slate-900 m-4 p-4"
          ref={chatContainerRef}
          style={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'flex-end',
            overflowY: 'auto',
            height: 'calc(80vh - 220px)',
            marginTop: '10px',
            border: '1px solid red',
          }}
        >
          {messages.map((message, index) => (
            <div
              key={index}
              className={`message ${message.senderId === user1.id ? (isReversed ? 'received' : 'sent') : (isReversed ? 'sent' : 'received')}`}
              style={{
                backgroundColor: message.senderId === user1.id
                  ? (isReversed ? 'lightgray' : 'blue')
                  : (isReversed ? 'blue' : 'lightgray'),
                color: message.senderId === user1.id ? 'white' : 'black',
                borderRadius: '10px',
                padding: '10px',
                marginBottom: '10px',
                alignSelf: message.senderId === user1.id ? 'flex-end' : 'flex-start',
                maxWidth: '60%', // Ensure messages do not stretch too far horizontally
              }}
            >
              <div className="bubble text-black">{message.text}</div>
            </div>
          ))}
        </div>

        <MessageInput onSendMessage={handleSendMessage} />
      </div>
    </div>
  );
};

const MessageInput = ({ onSendMessage }) => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleSend = () => {
    if (inputValue.trim() !== '') {
      onSendMessage(inputValue); // Pass the inputValue to the onSendMessage function
      setInputValue('');
    }
  };

  return (
    <div className="message-input" style={{ position: 'absolute', bottom: 0, width: '100%', display: 'flex', alignItems: 'center', padding: '10px', backgroundColor: 'rgba(0, 0, 0, 0.5)' }}>
      <input
        type="text"
        value={inputValue}
        onChange={handleChange}
        style={{ flex: 1, marginRight: '10px', padding: '10px', borderRadius: '5px', border: '1px solid #fff', color: '#000' }}
      />
      <button
        onClick={handleSend}
        style={{ padding: '10px', borderRadius: '5px', backgroundColor: '#007BFF', color: '#fff', border: 'none' }}>
        Send
      </button>
    </div>
  );
};

export default ChatPage;

Modify The Code

The code I provided is not a one-size-fits-all solution. It’s more like a starting point to push you in the right direction.

You just learned how to code a basic chat page with Firebase and Next.js. That’s one simple thing you can cross off your to-do list. Well, that’s about it for this article.

Make sure you follow me on Medium and subscribe to my newsletter.

Happy Coding Folks!

Spicing Up Your Next.Js Projects With 3D: What Are Your Options?

It's Just Nifty — Sat, 17 Aug 2024 21:44:33 +0000

In the past, I have experimented with 3D modeling. My knowledge of how to do it goes as far as downloading the software, so my expertise is merely surface-level. I always knew, based on some websites, that you can incorporate 3D elements into web development, but only recently have I dipped my toe in the water.

What can you do with 3D? A lot. Even that sounds like an understatement. But if there’s one thing I’m certain of it’s this: adding 3D elements to a website is the easiest way to create a unique browsing experience. I mean, there are better ways to describe the effect 3D elements have. Like, I can say it makes an interactive and immersive experience for your users. But, in my opinion, that means the same thing and also fails to explain the impact a little 3D has. When I showed off a website with 3D elements, mouths dropped and I just knew the bar was going to be higher for my company and me.

So, how can you add 3D to your Next.js projects? Well, let’s take a look.

Using Three.Js In Your Next.Js Project

When I was experimenting with Remix, I used Three.js, and when I realized the learning curve with Remix, I took my 3D creations over to Next.js. I chop my reasoning down to Next.js being easier and more understandable. Sorry Remix, but not sorry. BTW, I secretly hate you and will never use you again. Hope we’re still friends, XX.

Run npm i three in your project and import import * as THREE from 'three'.

After that, the instructions break off into one million strands. It all depends on what you are creating, which is why I was so conflicted about making this article. What I write depends on what I’m working on and I’m working on 3D in web design; however, there’s not a one-size-fits-all guide to what you’re trying to create in 3D.

I will tell you this much though. Three.js is an excellent choice. My 3D creations turned out wonderful and the complexity level is low for beginners. It’s also one of the popular choices, which means more resources.

Could Babylon.Js Be Used Instead?

Babylon.js is a neat Three.js alternative; however, resources on how to actually use it with Next.js are pretty limited. Because of the lack of resources, you should lean towards Three.js instead; however, if you like a challenge and desperately need an alternative for some reason give Babylon.js a shot.

Discovering react-three-fiber

This handy dandy library is for using Three.js in React components. I didn’t even know this existed when I was using Three.js, which makes me question react-three-fiber’s existence. Is it needed? No, but let’s talk about this library anyway.

Just like with Three.js, I was shaken by how easy react-three-fiber was. To get started, run npm install three @types/three @react-three/fiber and then for a basic 3D animation, create a new component in your project and copy this code:

'use client';
import { createRoot } from 'react-dom/client'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'

function Box(props) {
  const ref = useRef();
  const [hovered, hover] = useState(false);
  const [clicked, click] = useState(false);
  useFrame((state, delta) => (ref.current.rotation.x += delta));

  return (
    <mesh
      {...props}
      ref={ref}
      scale={clicked ? 1.5 : 1}
      onClick={(event) => click(!clicked)}
      onPointerOver={(event) => hover(true)}
      onPointerOut={(event) => hover(false)}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
  )
}

export default function MainComponent () {
    return (
        <div>
        <Canvas>
            <ambientLight intensity={Math.PI / 2} />
            <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
            <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
            <Box position={[-1.2, 0, 0]} />
            <Box position={[1.2, 0, 0]} />
        </Canvas>
        </div>
    )
}

Looking Into Drei

No doubt that I’m not the only one who has never heard of Drei before. I figure that a lot of you haven’t as well. Basically, Drei is a collection of useful helpers for react-three-fiber. If you are interested, check out the GitHub repository.

With all that being said and checked off the list, the article is coming to a close. Thank you for reading…or skimming. I hope you got something out of this and you can start adding 3D elements to your next.js projects.

Happy Coding Folks!