Creating an upvote system with React and Socket.io 🥳 🔝

//\ud83d\udc47\ud83c\udffbindex.js
const express = require("express");
const app = express();
const PORT = 4000;

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app.get("/api", (req, res) => {
    res.json({
        message: "Hello world",
    });
});

app.listen(PORT, () => {
    console.log(`Server listening on ${PORT}`);
});

const express = require("express");
const app = express();
const PORT = 4000;

//\ud83d\udc47\ud83c\udffb New imports
const http = require("http").Server(app);
const cors = require("cors");

app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(cors());

app.get("/api", (req, res) => {
    res.json({
        message: "Hello world",
    });
});

http.listen(PORT, () => {
    console.log(`Server listening on ${PORT}`);
});

//\ud83d\udc47\ud83c\udffb New imports
.....
const socketIO = require('socket.io')(http, {
    cors: {
        origin: "http://localhost:3000"
    }
});

//\ud83d\udc47\ud83c\udffb Add this before the app.get() block
socketIO.on('connection', (socket) => {
    console.log(`\u26a1: ${socket.id} user just connected!`);

    socket.on('disconnect', () => {
      socket.disconnect()
      console.log('\ud83d\udd25: A user disconnected');
    });
});

const handleRegister = (e) => {
    e.preventDefault();
    if (username.trim() && password.trim() && email.trim()) {
        //\ud83d\udc47\ud83c\udffb triggers a register event
        socket.emit("register", { username, email, password });
        setPassword("");
        setUsername("");
        setEmail("");
    }
};

socketIO.on("connection", (socket) => {
    console.log(`\u26a1: ${socket.id} user just connected!`);

    //\ud83d\udc47\ud83c\udffb Create a listener to the event
    socket.on("register", (data) => {
        /*
        \ud83d\udc47\ud83c\udffb data will be an object containing the data sent from the React app
        */
        console.log(data);
    });
    socket.on("disconnect", () => {
        socket.disconnect();
        console.log("\ud83d\udd25: A user disconnected");
    });
});

//\ud83d\udc47\ud83c\udffb outside the socket.io block
const database = [];
const generateID = () => Math.random().toString(36).substring(2, 10);

const database = [];
const generateID = () => Math.random().toString(36).substring(2, 10);

socket.on("register", (data) => {
    //\ud83d\udc47\ud83c\udffb Destructure the user details from the object
    const { username, email, password } = data;

    //\ud83d\udc47\ud83c\udffb Filters the database (array) to check if there is no existing user with the same email or username
    let result = database.filter(
        (user) => user.email === email || user.username === username
    );
    //\ud83d\udc47\ud83c\udffb If none, saves the data to the array. (the empty images array is required for the image uploads)
    if (result.length === 0) {
        database.push({
            id: generateID(),
            username,
            password,
            email,
            images: [],
        });
        //\ud83d\udc47\ud83c\udffb returns an event stating that the registration was successful
        return socket.emit("registerSuccess", "Account created successfully!");
    }
    //\ud83d\udc47\ud83c\udffb This runs only when there is an error/the user already exists
    socket.emit("registerError", "User already exists");
});

const handleSignIn = (e) => {
    if (username.trim() && password.trim()) {
        e.preventDefault();
        //\ud83d\udc47\ud83c\udffb triggers a login event
        socket.emit("login", { username, password });
        setPassword("");
        setUsername("");
    }
};

socketIO.on("connection", (socket) => {
    //...other functions

    socket.on("login", (data) => {
        //\ud83d\udc47\ud83c\udffb data - contains the username and password
        console.log(data)
    })
}

socket.on("login", (data) => {
    //\ud83d\udc47\ud83c\udffb Destructures the credentials from the object
    const { username, password } = data;

    //\ud83d\udc47\ud83c\udffb Filters the array for existing objects with the same email and password

    let result = database.filter(
        (user) => user.username === username && user.password === password
    );
    //\ud83d\udc47\ud83c\udffb If there is none, it returns this error message
    if (result.length !== 1) {
        return socket.emit("loginError", "Incorrect credentials");
    }
    //\ud83d\udc47\ud83c\udffb Returns the user's email & id if the user exists
    socket.emit("loginSuccess", {
        message: "Login successfully",
        data: {
            _id: result[0].id,
            _email: result[0].email,
        },
    });
});

useEffect(() => {
    socket.on("loginSuccess", (data) => {
        toast.success(data.message);
        //\ud83d\udc47\ud83c\udffb Saves the user's id and email to local storage for easy identification & for making authorized requests
        localStorage.setItem("_id", data.data._id);
        localStorage.setItem("_myEmail", data.data._email);
        //\ud83d\udc47\ud83c\udffb Redirects the user to the Photos component
        navigate("/photos");
    });
    //\ud83d\udc47\ud83c\udffb Notifies the user of the error message
    socket.on("loginError", (error) => {
        toast.error(error);
    });
}, [socket, navigate]);

useEffect(() => {
    function authenticateUser() {
        const id = localStorage.getItem("_id");
        /*
        \ud83d\udc47\ud83c\udffb If ID is false, redirects the user to the login page
        */
        if (!id) {
            navigate("/");
        }
    }
    authenticateUser();
}, [navigate]);

const handleSubmit = (e) => {
    e.preventDefault();
    //\ud83d\udc47\ud83c\udffb Gets the id and email from the local storage
    const id = localStorage.getItem("_id");
    const email = localStorage.getItem("_myEmail");
    /*
    \ud83d\udc47\ud83c\udffb triggers an event to the server 
    containing the user's credentials and the image url 
    */
    socket.emit("uploadPhoto", { id, email, photoURL });
};

socket.on("uploadPhoto", (data) => {
    //\ud83d\udc47\ud83c\udffb Gets the id, email, and image URL
    const { id, email, photoURL } = data;
    //\ud83d\udc47\ud83c\udffb Search the database for the user
    let result = database.filter((user) => user.id === id);
    //\ud83d\udc47\ud83c\udffb creates the data structure for the image
    const newImage = {
        id: generateID(),
        image_url: photoURL,
        vote_count: 0,
        votedUsers: [],
        _ref: email,
    };
    //\ud83d\udc47\ud83c\udffb adds the new image to the images array
    result[0]?.images.unshift(newImage);
    //\ud83d\udc47\ud83c\udffb sends a new event containing the server response
    socket.emit("uploadPhotoMessage", "Upload Successful!");
});

useEffect(() => {
    socket.on("uploadPhotoMessage", (data) => {
        //\ud83d\udc47\ud83c\udffb Displays the server's response
        toast.success(data);
        navigate("/photos");
    });
}, [socket, navigate]);

useEffect(() => {
    //\ud83d\udc47\ud83c\udffb search can be anything
    socket.emit("allPhotos", "search");
}, [socket]);

socket.on("allPhotos", (data) => {
    //\ud83d\udc47\ud83c\udffb an array to contain all the images
    let images = [];
    //\ud83d\udc47\ud83c\udffb loop through the items in the database
    for (let i = 0; i < database.length; i++) {
        //\ud83d\udc47\ud83c\udffb collect the images into the array
        images = images.concat(database[i]?.images);
    }
    //\ud83d\udc47\ud83c\udffb sends all the images through another event
    socket.emit("allPhotosMessage", {
        message: "Photos retrieved successfully",
        photos: images,
    });
});

useEffect(() => {
    socket.emit("allPhotos", "search");
    //\ud83d\udc47\ud83c\udffb retrieve all the images from the server
    socket.on("allPhotosMessage", (data) => {
        setPhotos(data.photos);
    });
}, [socket]);

useEffect(() => {
    function authenticateUser() {
        const id = localStorage.getItem("_id");
        if (!id) {
            navigate("/");
        } else {
            //\ud83d\udc47\ud83c\udffb sends the user id to the server
            socket.emit("getMyPhotos", id);
        }
    }
    authenticateUser();
}, [navigate, socket]);

socket.on("getMyPhotos", (id) => {
    //\ud83d\udc47\ud83c\udffb Filter the database items
    let result = database.filter((db) => db.id === id);
    //\ud83d\udc47\ud83c\udffb Returns the images and the username
    socket.emit("getMyPhotosMessage", {
        data: result[0]?.images,
        username: result[0]?.username,
    });
});

useEffect(() => {
    socket.on("getMyPhotosMessage", (data) => {
        //\ud83d\udc47\ud83c\udffb sets the user's images
        setPhotos(data.data);
        //\ud83d\udc47\ud83c\udffb sets the user's profile link
        setUserLink(`http://localhost:3000/share/${data.username}`);
    });
}, [socket]);

useEffect(() => {
    function authenticateUser() {
        const id = localStorage.getItem("_id");
        if (!id) {
            navigate("/");
        } else {
            //\ud83d\udc47\ud83c\udffb user - is the username from the profile link
            socket.emit("sharePhoto", user);
        }
    }
    authenticateUser();
}, [socket, navigate, user]);

socket.on("sharePhoto", (name) => {
    //\ud83d\udc47\ud83c\udffb Filters the database via the username
    let result = database.filter((db) => db.username === name);
    //\ud83d\udc47\ud83c\udffb Returns the images via another event
    socket.emit("sharePhotoMessage", result[0]?.images);
});

useEffect(() => {
    socket.on("sharePhotoMessage", (data) => setPhotos(data));
}, [socket]);

const handleUpvote = (id) => {
    socket.emit("photoUpvote", {
        userID: localStorage.getItem("_id"),
        photoID: id,
    });
};

socket.on("photoUpvote", (data) => 
    const { userID, photoID } = data;
    let images = [];
    //\ud83d\udc47\ud83c\udffb saves all the images not belonging to the user into the images array
    for (let i = 0; i < database.length; i++) {
        //\ud83d\udc47\ud83c\udffb ensures that only other users' images are separated into the images array
        if (!(database[i].id === userID)) {
            images = images.concat(database[i]?.images);
        }
    }
    //\ud83d\udc47\ud83c\udffb Filter the images array for the image selected for upvote
    const item = images.filter((image) => image.id === photoID);
    /*
    \ud83d\udc47\ud83c\udffb Returns this error if the selected image doesn't belong to other users
    */
    if (item.length < 1) {
        return socket.emit("upvoteError", {
            error_message: "You cannot upvote your photos",
        });
    }
    //\ud83d\udc47\ud83c\udffb Gets the list of voted users from the selected image
    const voters = item[0]?.votedUsers;
    //\ud83d\udc47\ud83c\udffb Checks if the user has not upvoted the image before
    const authenticateUpvote = voters.filter((voter) => voter === userID);
    //\ud83d\udc47\ud83c\udffb If true (the first time the user is upvoting the image)
    if (!authenticateUpvote.length) {
        //\ud83d\udc47\ud83c\udffb increases the vote count
        item[0].vote_count += 1;
        //\ud83d\udc47\ud83c\udffb adds the user ID to the list of voters
        voters.push(userID);
        //\ud83d\udc47\ud83c\udffb triggers this event to reflect the change in vote count
        socket.emit("allPhotosMessage", {
            message: "Photos retrieved successfully",
            photos: images,
        });
        //\ud83d\udc47\ud83c\udffb Returns the upvote response
        return socket.emit("upvoteSuccess", {
            message: "Upvote successful",
            item,
        });
    }
    /*
    \ud83d\udc47\ud83c\udffb nullifies duplicate votes. (if the user ID already exists in the array of voted users)
    */
    socket.emit("upvoteError", {
        error_message: "Duplicate votes are not allowed",
    });

useEffect(() => {
    socket.on("upvoteSuccess", (data) => {
        toast.success(data.message);
        //\ud83d\udc47\ud83c\udffb logs the email of the user who owns the image.
        console.log(data.item[0]._ref);
    });
    socket.on("upvoteError", (data) => {
        toast.error(data.error_message);
    });
}, [socket]);

import emailjs from "@emailjs/browser";

const PhotoContainer = ({ photos, socket }) => {
    const handleUpvote = (id) => {
        socket.emit("photoUpvote", {
            userID: localStorage.getItem("_id"),
            photoID: id,
        });
    };

    //\ud83d\udc47\ud83c\udffb The function sends email to the user - (to_email key)
    const sendEmail = (email) => {
        emailjs
            .send(
                "YOUR_SERVICE_ID",
                "YOUR_TEMPLATE_ID",
                {
                    to_email: email,
                    from_email: localStorage.getItem("_myEmail"),
                },
                "YOUR_PUBLIC_KEY"
            )
            .then(
                (result) => {
                    console.log(result.text);
                },
                (error) => {
                    console.log(error.text);
                }
            );
    };

    useEffect(() => {
        socket.on("upvoteSuccess", (data) => {
            toast.success(data.message);
            //\ud83d\udc47\ud83c\udffb Pass the image owner email into the function
            sendEmail(data.item[0]._ref);
        });
        socket.on("upvoteError", (data) => {
            toast.error(data.error_message);
        });
    }, [socket]);
    return ...</div>;
};