"this has a different output than in the specified language you're translating to" (show the different outputs from each language)

it'll tell our users where the compilation error is

On the main page, our fix for the /api/handler URLs work fine written as so (left as @FusionStreak and I ended with yesterday):

line 787 of index.tsx:

let res = await fetch(process.env.API_PREFIX+"/api/handler", {
    method: "GET",
    headers: {
        "Content-Type": "application/json",
    },
});

line 363 of index.tsx:

        axios
            .get("/api/handler", {
                responseType: "text",
                transformResponse: [(v) => v],
            })
            .then((res) => {
                setComplaintsState(res.data.split("]")[0].replaceAll("[", ""));
                console.log(res.data);
            })
            .catch(function (error) {
                console.log(error);
            });

However, when submitting a complaint (to reproduce: from the main screen -> hit "translate" -> click "submit a complaint" -> click "submit for validation"), it produces a 404 Page Not Found Error by using this code:

let res = await fetch(process.env.API_PREFIX + "/api/handler", {
        method: "POST",
        body: JSON.stringify({
            username: user,
            // title: title,
            submissionCode: submissionCode,
            additionalNotes: additionalNotes,
            rating: rating,
            time: new Date(),
            isAccepted: false,
        }),
    });

With the following being produced in the Network section in chrome developer tools:

Additionally, there's this error that I've been ignoring but may want to address. I recall being able to submit complaints to the database in spite of this error popping up but it's most likely best to address it:

All pages

• email-like ui where the title of the complaint, relative time and absolute time and a small preview
• time should be relative to current time (ex. Wed, July 27 3:47 PM (3 hours ago))
• open button to view (functionality will differ depending on inbox, accepted complaints and submitted complaints)
• Sort by newest / oldest

Inbox

• Viewing shows the original complaint as well as any comments the super user adds
• Mark all as read and delete from inbox buttons
• See likes on posts (the post formatting is the same as the most recent accepted complaints section)

Submitted Complaints

• Viewing shows the original complaint with the user's text
• Edit and delete buttons

Accepted Complaints

• Viewing shows the same as inbox
• No marking as read or deleting

Example from gmail:

I'm using the slate library for making a rich text editor which isn't for the code editor, but for another one I would like for additional notes users want to put.

The issues I'm having are surrounding the styling and creation of custom components (much like HTML tags). Currently this is what it looks like:

This is what resulted from creating the text_editor_components.tsx file wherein I define the components myself as can be seen below:

export const Icon = React.forwardRef(
    (
        { className, ...props }: PropsWithChildren<BaseProps>,
        ref: Ref<OrNull<HTMLSpanElement>>
    ) => (
        <span
            {...props}
            ref={ref}
            className={cx(
                "material-icons",
                className,
                css`
                    font-size: 18px;
                    vertical-align: text-bottom;
                `
            )}
        />
    )
);

Need to get something similar to this working:

Fields that we need to get working with mongoDB are:

• a "faulty lines" list to correspond with this selector:

• in the opposite manner, since there is a title field in the mongoDB, we need to make a feature within our app to type one to go along with the complaint submission which would be near the top of all this (this is easy so @DaoTimothy can do this):

Firstly, make it so the login button is on the top right, and once signed in there should be:

• inbox
• submitted complaints

Resources:

https://mui.com/material-ui/react-app-bar/

• change colour from red (ugly)
• add google logo to the right side of the button's text
• same thing for github with its logo
• highlight the "Register Now" and "Forgot Password" buttons to make it more obvious in a colour such as blue

Same Adjustments for the Register Screen:

• highlight the "Login now" button

• put display name next to profile picture
• fix profile picture not displaying (I've asked this StackOverflow question)

• github repo link
• personal links (under "connect with creator(s)" or some title)
  • personal github
  • personal LinkedIn

Currently, I'm adding users and complaints straight to mongoDB collections, but need to make use of Mongoose and the MongoDB models I can create for each of those to actually utilize graphQL.

I've created typeDefs as such:

export const typeDefs = gql`
    scalar Date 

    type User {
        id: ID!
        displayName: String!
        authProvider: String!
        email: String!
        superuser: Boolean!
    }

    type Complaint {
        userInfo: User! #! unsure about the type here
        time: Date!
        isAccepted: Boolean!
        submissionCode: String!
        additioanlNotes: String
        title: String
        rating: Int!
        faultyLines: Array
    }

    type Query {
        getUser: User
        getComplaint: Complaint
    }
`;

Additionally, my graphql.ts file looks solid. However, I need to put the final piece of the puzzle in by changing this fetch action to one with graphQL rather than straight to MongoDB:

(example from complaint.tsx)

let res = await fetch("/api/complaintHandler", {
            method: "POST",
            body: JSON.stringify({
                userInfo: user,
                title: title,
                submissionCode: submissionCode,
                additionalNotes: additionalNotes,
                rating: rating,
                faultyLines: faultyLinesSelected,
                time: new Date(),
                isAccepted: false,
            }),
        });

After that fetch is called, it simply adds straight to a mongoDB collection like so:

const client = await clientPromise;
    const db = client.db("Database");
    switch (req.method) {
        case "POST":
            let bodyObject = JSON.parse(req.body);
            let newComplaint = await db
                .collection("RequestsAndResponses")
                .insertOne(bodyObject);
            res.json(newComplaint.ops[0]);

• change the name from Most Recent Complaint to "Most Recent Accepted Complaint"

Fix the Most Recent Complaint section to only include:

• the title of the complaint
• the display name of the user who submitted it
• an option to view it (along with the comments)
• the time it was submitted (relative time e.g. 3 hours ago / 2 days ago)

Have a button to see all accepted complaints:

• these complaints will have all of the same elements as the most recent accepted complaint but in a list similar to that in the inbox, submitted complaints, and accepted complaints pages

Extra Features that don't matter but would make the site cooler:

• like feature for these complaints

Make it like this

This rating selector currently works through database entries, with its value now being able to be read:

However, I'd simply like the style to be changed from stars to another icon that's more suited for "urgency" rather than the default:

Replace the Rating tag with the commented StyledRating one

Using this code as a reference (taken from this website's "customization" section), change it from hearts to another icon:

this is already commented on line 373

Perhaps something similar to this idea could be implemented, with varying icons for each rating setting (this is found in the "Radio group" section of that same aforementioned website):

I could use various compilers upon entry of the user putting in their code input to actually test if that works, to avoid further errors in translation to other languages.

this other code translation website does that by verifying syntax of Java and Python, so I could possibly have a Selenium bot run through and utilize their tool for my own program.

Alternatively, and what I'm referring as an idea, I'll write scripts such as the one in this StackOverflow answer to manually compile the code inputs that the user of my tool enters.

done login, just need registration and reset password (+ sending link to do so through user's email)

Once code is output after the 'translation' (which doesn't have any real functionality yet), it is not modifiable which is what was desired

However, before outputting this 'translated' code, it is editable for some reason I need to figure out how to disable.

https://firebase.google.com/docs/auth/web/github-auth

This is a sign-in provider that I haven't used in the past with this project but that I think would prove useful to have, seeing as this application is meant for developers.

The places we'll need a logo in are as follows:

• small logo in the nav bar here:

• the tab logo up here:

I've done this in a previous project by using the following <icon> tag inside of the <head> part of the HTML code I had as such:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anthology - Daniel Agapov</title>
    <link rel="icon" href="external/books.png">
    <link rel="stylesheet" href="style.css">
</head>

• may want to have a big banner instead of this text reading "translang - the programming language converter":

Perhaps we could incorporate similar text in a banner with logos of Python, Java, and JavaScript while also putting some symbolization of translating between them