Kendo Diagram Connection Schema

I am trying to create a diagram with Telerik kendo diagram. Since I get every shape and its connection from my database the attributes of my data source object to not match the required naming. To fix this problem I used “schema” for the shapes as you can see in my screenshot:

enter image description here

Since it is working for the shapes, I tried to use the same strategy for the connections, but it is not working. I did some research and found the following which does not use schema at all.

enter image description here

Is there any way to use schema for the connection?

Client not receiving session data from server using Node, Passport JS, and cookie-session

so i’ve been using development servers this entire time, and everything’s worked fine. Now, as I’ve deployed my client and backend, i’m running into an issue where my client cannot grab the sessional data from the cookie. i’ve checked both the backend and client cookies, and it seems like the session and session.sig are identical, so i don’t know what’s the deal… here’s the relevant code:

my backend:
server.js:

dotenv.config({ path: "./.env" });
const cookieKey = process.env.COOKIE_KEY;
const express = require("express");
const cookieSession = require("cookie-session");
const connectDB = require("./config/db");
const passport = require("passport");
const PORT = process.env.PORT || 4500;
const cors = require("cors");

connectDB();

const app = express();
//middleware
app.use(express.json());
app.use(
  cors({
    origin: true, // replace with your frontend domain
    credentials: true,
  })
);

app.use(
  cookieSession({
    maxAge: 24 * 60 * 60 * 1000, // 1 day
    keys: [cookieKey],
    cookie: {
      secure: true,
      sameSite: "none",
    },
  })
);

app.use(passport.initialize());
app.use(passport.session());

const authentication = require("./routes/Authentication.js");
app.use("/api/v1/auth", authentication);

const tabs = require("./routes/Tabs.js"); // Adjust the path as necessary
app.use("/api/v1/tabs", tabs);

const preferences = require("./routes/Preferences.js");
app.use("/api/v1/preferences", preferences);

const google = require("./routes/Google.js"); // Adjust the path as necessary
app.use("/api/v1/google", google);
app.listen(PORT, () => console.log("Server is connected"));

authentication.js:

dotenv.config({ path: "./.env" });
const sucessRedirectURL = process.env.SUCCESS_REDIRECT_URL;
const express = require("express");
const passport = require("passport");
require("../services/Passport");
const router = express.Router();

router.get(
  "/google",
  passport.authenticate("google", {
    scope: ["profile", "email", "https://www.googleapis.com/auth/calendar"],
    accessType: "offline",
    approvalPrompt: "force",
  })
);

router.get(
  "/google/callback",
  passport.authenticate("google", {
    successRedirect: sucessRedirectURL,
  })
);

router.get("/me", (req, res) => {
  if (req.user) {
    res.send(req.user);
  } else {
    res.status(401).json({ message: "Not authenticated" });
  }
});

router.get("/logout", (req, res) => {
  console.log("logging out");
  req.logout();
  res.redirect("/");
});

module.exports = router;

and my own service file, passport.js:

dotenv.config({ path: "./.env" });
const googleClientID = process.env.GOOGLE_CLIENT_ID;
const googleClientSecret = process.env.GOOGLE_CLIENT_SECRET;
const backendAppURL = process.env.BACKEND_APP_URL;

const passport = require("passport");
const GoogleStrategy = require("passport-google-oauth20");
const User = require("../models/User");

//when a user logs in, we get a 'user object' which is serialized to our session by storing a user's ID,
//which is called automatically after logging
passport.serializeUser((user, done) => {
  done(null, user.id);
});
//now, when we want to take the data stored in our session, we use the ID to recreate the full user object on
//each request, which is automatically done on each request
passport.deserializeUser((id, done) => {
  User.findById(id).then((user) => {
    done(null, user);
  });
});
//this code happens first to find/create a user object
passport.use(
  new GoogleStrategy(
    {
      clientID: googleClientID,
      clientSecret: googleClientSecret,
      callbackURL: backendAppURL + "/api/v1/auth/google/callback", //FULL CALLBACK URL IN PRODUCTION VS RELATIVE PATH IN DEVELOPMENT
    },
    async (accessToken, refreshToken, profile, done) => {
      try {
        const existingUser = await User.findOneAndUpdate(
          { googleId: profile.id },
          {
            accessToken,
            refreshToken,
            name: profile.displayName,
            avatarUrl: profile.picture,
            isVerified: profile.emails[0].verified,
          }
        );

        if (existingUser) {
          console.log("Existing user found:", existingUser);

          return done(null, existingUser);
        }

        const user = await new User({
          accessToken,
          refreshToken,
          name: profile.displayName,
          email: profile.emails[0].value,
          googleId: profile.id,
          avatarUrl: profile.picture,
          isVerified: profile.emails[0].verified,
        }).save();
        console.log("New user saved:", user);

        done(null, user);
      } catch (error) {
        console.error("Error during authentication: ", error);
        done(error);
      }
    }
  )
);

Issue with sending email using SendGrid module in a contact form

Problem:
I’m trying to create a contact form for a website where users can enter their name, email, and message. Upon clicking the “Send” button, the form data should be sent to a specific email address using the SendGrid module. However, I’m encountering an issue where the email is not being sent, and I receive the following error in my console:

Error:

POST http://localhost:3000/send-email 404 (Not Found)
Card.tsx:58 Error: Request failed with status code 404
    at createError (createError.js:16:1)
    at settle (settle.js:17:1)
    at XMLHttpRequest.onloadend (xhr.js:66:1)

Code:
Here’s the client-side code for Card.tsx, which represents the contact form:

import React, { useState, useEffect, useRef } from "react";
import cardcss from "./Card.module.css";
import axios from "axios";

interface CardProps {
  imageUrl: string;
  title: string;
  body: string;
}

function Card(props: CardProps) {
  // State and ref initialization

  useEffect(() => {
    // Focus and selection logic
  }, []);

  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
    // Handle focus event
  };

  const submitHandler = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    // Form data retrieval and preparation

    axios
      .post("http://localhost:3000/send-email", contactData)
      .then((response) => {
        console.log("Received email request");
        // Handle success response
      })
      .catch((error) => {
        console.error(error);
        // Handle error response
      });
  };

  return (
    // JSX code for the contact form
  );
}

export default Card;

And here’s the server-side code for server.js, responsible for handling the email sending:

const express = require("express");
const sgMail = require("@sendgrid/mail");
const { resolve } = require("path-browserify");

// Set up SendGrid API key
sgMail.setApiKey("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");

// Create Express app
const app = express();

// Middleware to parse JSON requests
app.use(express.json());

app.get("/", (req, res) => {
  res.send("Hello, server!");
});

// Route to handle sending emails
app.post("/send-email", (req, res) => {
  // Extract form data

  const msg = {
    to: "[email protected]",
    from: "[email protected]",
    subject: "Example Subject",
    text: `Name: ${Name}nEmail: ${Email}nMessage: ${Message}nSubmit Button: ${submitbutton}`,
    html: `<p>Name: ${Name}</p><p>Email: ${Email}</p><p>Message: ${Message}</p><p>Submit Button: ${submitbutton}</p>`,
  };

  sgMail
    .send(msg)
    .then(() => {
      res.status(200).json({ message: "Email sent successfully" });
    })
    .catch((error) => {
      console.error(error.toString());
      res.status(500).json({ error: "Failed to send email" });
    });
});

// Set up fallback for path module
resolve.fallback = { path: require.resolve("path-browserify") };

// Start the server
app.listen(3000, () => {
  console.log("Server started on port 3000");
});

The code for the entire contact page is available in Contact.tsx:

import React, { useRef } from "react";
import contactcss from "./Contact.module.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Card from "../../components/ui/Card";
import {
  faInstagram,
  faFacebook,
  faLinkedin,
  faDiscord,
} from "@fortawesome/free-brands-svg-icons";
import emaillogo from "../../resources/email-logo.png";

const Contact: React.FC = () => {
  return (
    <div>
      <div>
        <div className={contactcss.background}>
          <img
            className={contactcss.emaillogo}
            src={emaillogo}
            alt="Contact Us"
          />
          <div className={contactcss.contact}>Contact Us</div>
        </div>
      </div>

      <Card
        title="We're keen to hear from you!"
        imageUrl="https://images.app.goo.gl/D6m6hHMnP1gjsKKV7"
        body=""
        /* onSubmitForm={submitFormHandler} */ // Placeholder comment
      />

      <div className={contactcss.whitebackground}>
        <div className={contactcss.socials}>
          <h1>Follow Our Socials</h1>
          <p className={contactcss.socialmedia}>
            Stay connected with GDSC USYD by following us on our social media
            channels:
          </p>
          <div>
            <a href="https://www.instagram.com/gdscusyd/">
              <FontAwesomeIcon
                className={contactcss.instagram}
                icon={faInstagram}
              />
            </a>

            <a href="https://www.facebook.com/gdsc.usyd">
              <FontAwesomeIcon
                className={contactcss.facebook}
                icon={faFacebook}
              />
            </a>

            <a href="https://discord.com/channels/872033047652990986/872033047652990989">
              <FontAwesomeIcon
                className={contactcss.discord}
                icon={faDiscord}
              />
            </a>

            <a href="https://www.linkedin.com/company/gdsc-usyd/">
              <FontAwesomeIcon
                className={contactcss.linkedin}
                icon={faLinkedin}
              />
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Contact;

Additional Information:

  • I have verified that the SendGrid API key is correctly set up.
  • Both the client and server are running locally.
  • The server is listening on port 3000, and the client is making a POST request to http://localhost:3000/send-email.

Expected Behavior:
Upon clicking the “Send” button in the contact form, the form data should be sent to the server, and the email should be delivered to the specified email address.

Actual Behavior:
After clicking the “Send” button, I receive a 404 error in the console, and the email is not sent.

What I’ve Tried:

  • I have double-checked the server-side code and ensured that the /send-email route is properly defined.

  • I have verified that the server is running and listening on the correct port (3000).

  • I have confirmed that the form data is correctly retrieved and prepared before making the POST request.

Question:
What could be causing the 404 error when attempting to send the email using the SendGrid module? Is there something wrong with my code or configuration? Any help would be greatly appreciated.

angular dependency installation issue (npm install)?

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/compiler-cli
npm ERR! dev @angular/compiler-cli@”^15.2.9″ from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler-cli@”^16.0.0″ from @angular-devkit/[email protected]
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@”^16.1.3″ from the root project

If i give npm install all necessary packages should install.

How to highlight the pdf page text based upon the line number in reactjs

This is the data,based upon the metadata, i need to highlight the text

 const data = {
    text: "The requirements include...",
    sourceDocuments: [
      {
        pageContent:"Functionality requirements, backend functionalitynUser data informationnAbility to collect and sort...",
        metadata: { "loc.lines.from": 161, "loc.lines.to": 173 }
      },
    ],
  };

This is my react code to open the pdf

import { Worker, Viewer } from "@react-pdf-viewer/core";
import { defaultLayoutPlugin } from "@react-pdf-viewer/default-layout";
import "@react-pdf-viewer/core/lib/styles/index.css";
import "@react-pdf-viewer/default-layout/lib/styles/index.css";

export default function App() {
   const data = {
    text: "The requirements include...",
    sourceDocuments: [
      {
        pageContent:"Functionality requirements, backend functionalitynUser data informationnAbility to collect and sort...",
        metadata: { "loc.lines.from": 161, "loc.lines.to": 173 }
      },
    ],
  };

  const defaultLayoutPluginInstance = defaultLayoutPlugin();

  return (
    <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js">
      <div style={{ height: "720px" }}>
        <Viewer fileUrl={"Brief.pdf"} plugins={[defaultLayoutPluginInstance]} />
      </div>
    </Worker>
  );
}

(Discord.js) Discord emojis break when used in a server different from their original server

I am developing a trading cards bot, but a problem I ran into was not being able to fit all of the card emojis into the main development server because of the emoji limit, so I chose to add all of them to a different server and invite the bot there so they can use them. I tested my commands in the server I made to house the emojis, and all the menus worked just fine as I switched pages, with all the emojis properly displaying. However when I switched to the development server, the emojis would only display properly the first time I initiated a command, and whenever I switched pages (aka updating the interaction reply) the emojis would break into their literal names. Screenshots below:

Triggering the shop command, page 1

shop page 1

After going to page 2, then going back to page 1

shop page 1 edited

The command being executed in the emoji server and development server is the exact same (No, its not one of them being a global command and being slow to update, both are guild commands), the syntax for using emojis from other servers is right (<:DeathRare:1125267015867846686>, <:PilotedRare:1125267035572682783>), so why is it that it works in one and doesn’t in the other? Is there even a solution to this besides boosting my development server so it can fit all of the card emojis without a need for another server?

Vue Transition does not apply the transition classes

I have a simple VueJS project, and when I add some transitions, nothing works. I copied the example from the Vue documentation, but it still doesn’t work.

This is my App.vue file

<script setup>
import { ref } from "vue";

const show = ref(true);
</script>

<template>
  <button @click="show = !show">Toggle Slide + Fade</button>
  <Transition name="slide-right" appear>
    <div v-if="show">hello</div>
    <div v-else>world</div>
  </Transition>
</template>

<style>
.slide-right-enter-active {
  transition: all 5s ease-out;
}

.slide-right-leave-active {
  transition: all 5s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-right-enter-from,
.slide-right-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>

When I click on the toggle button, the text below will change. However, no transition classes (like slide-right-enter-active, slide-right-leave-active, …) are applied.

mongoose error: model.find() no longer accepts a callback

I am using latest version mongoose 7.3.1 and express latest version

C:UsersrahulblogersBlog-with-Database-Step1-Answernode_modulesmongooselibmodel.js:2072
throw new MongooseError(‘Model.find() no longer accepts a callback’);
^

MongooseError: Model.find() no longer accepts a callback
at Function.find (C:UsersrahulblogersBlog-with-Database-Step1-Answernode_modulesmongooselibmodel.js:2072:11)
at Object. (C:UsersrahulblogersBlog-with-Database-Step1-Answerapp.js:114:6)
at Module._compile (node:internal/modules/cjs/loader:1255:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1309:10)
at Module.load (node:internal/modules/cjs/loader:1113:32)
at Module._load (node:internal/modules/cjs/loader:960:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)
at node:internal/main/run_main_module:23:47

Node.js v20.2.0

please help me for this code

React.StrictMode and createRoot influence my UI render

I am new to react. This is a generated code block in my project by create-react-app

const container = document.getElementById("root");
const root = createRoot(container);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Now I am using gsap to render anime. There is a disgusting blank block at the top of the page. Finally I found out the reason is these code, I also find out the solutions, but I do not know why.

1. ReactDOM.render could success.
2. createRoot.render(<App />) success.
3. createRoot.render() with <React.StrictMode> FAILED.

Here is the project
Can anyone explain these differences?

How can I get the selected array index onChange in the Listbox Headless UI component?

Below is the boilerplate code for Headless UI’s ListBox. I need to access the selected array index from the parent component. The Listbox value is just the selected object. I have tried using event listeners in the Listbox.Option component to listen for keydown events (space and enter) and click events and the only one that works is the onClick event. Adding the KeyDown in Listbox.Option does not trigger the event.

export default function Example() {
  const [selected, setSelected] = useState(people[0])

  return (
    <div className="fixed top-16 w-72">
      <Listbox value={selected} onChange={setSelected}>
        <div className="relative mt-1">
          <Listbox.Button className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
            <span className="block truncate">{selected.name}</span>
            <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
              <ChevronUpDownIcon
                className="h-5 w-5 text-gray-400"
                aria-hidden="true"
              />
            </span>
          </Listbox.Button>
          <Transition
            as={Fragment}
            leave="transition ease-in duration-100"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
              {people.map((person, personIdx) => (
                <Listbox.Option
                  key={personIdx}
                  className={({ active }) =>
                    `relative cursor-default select-none py-2 pl-10 pr-4 ${
                      active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
                    }`
                  }
                  value={person}
                >
                  {({ selected }) => (
                    <>
                      <span
                        className={`block truncate ${
                          selected ? 'font-medium' : 'font-normal'
                        }`}
                      >
                        {person.name}
                      </span>
                      {selected ? (
                        <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600">
                          <CheckIcon className="h-5 w-5" aria-hidden="true" />
                        </span>
                      ) : null}
                    </>
                  )}
                </Listbox.Option>
              ))}
            </Listbox.Options>
          </Transition>
        </div>
      </Listbox>
    </div>
  )
}