DEV Community: Finn

Discord OAuth2 redirect uri invalid

Finn — Sat, 30 Apr 2022 13:57:57 +0000

Hey there! I tried creating a discord login for my website, but it always gives me the Invalid OAuth2 redirect_uri for my webpage even though it should be correct. My website is currently locally under localhost:3000 and I added the uri as localhost:3000/api/auth/callback/discord. Does anyone know what I did wrong here? I am using latest Next auth afaik.

How do I clean up my json response?

Finn — Fri, 22 Apr 2022 22:12:38 +0000

Hey there! I am trying to store a json response in a mongodb database, but that isn't working because of the annoying format that looks like this: { '0': '9M0FY9GXM0' }

Does anyone know how to make it just output the second string instead of all of it when using for example "console.log(res.data)"?

Thank you very much!

The top-level-await experiment is not enabled

Finn — Thu, 21 Apr 2022 10:33:01 +0000

Hey there! Every time I try to run my dev server or create a production build, this error pops up:

I have no idea why this is happening, especially because I can't remember changing anything in there. I hope someone can help me!

Greetings, Finn

NextJS Key not working

Finn — Wed, 20 Apr 2022 13:47:44 +0000

Hey there! I tried creating an array with nextjs but I always get the error Missing "key" prop for element in iterator. Does anyone know how to fix that error? I really don't know what I did wrong

The code:

My data: (These aren't real ip adresses)

StyledFirebaseUI not working

Finn — Sat, 26 Mar 2022 15:09:37 +0000

Hey everyone!

I tried using firebase auth, and it all works fine, but it only works when I remove a line from a package from node_modules, or else I get the error

./node_modules/firebaseui/dist/firebaseui.css Global CSS cannot be imported from within node_modules.

Does anyone know a fix to this or do I have to fork the package and then use it with vercel?

React router page just disappearing

Finn — Sun, 20 Mar 2022 22:42:23 +0000

Hey there! I recently tried using react for a website that lists all freelancers, but now when I try to access a specific freelancer's site, it just shows a blank page. My code is here:

App.js

import Navbar from './Navbar';
import Home from './Home';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Create from './Create';
import Freelancerdetails from './FreelancerDetails';

function App() {

  return (
    <Router>
      <div className="App">
        <Navbar />
        <div className="content">
          <Switch>
            <Route exact path="/">
              <Home />
            </Route>
            <Route exact path="/create">
              <Create />
            </Route>
            <Route path="/freelancers/:username" >
              <Freelancerdetails />
            </Route>
          </Switch>
        </div>
      </div>
    </Router>
  );
}

export default App;

FreelancerDetails.js

import { useParams } from "react-router-dom";

const Freelancerdetails = () => {
    const { username } = useParams();

  return (
    <div className="freelancer-details">
      <h2>Freelancer details - { username }</h2>
    </div>
  );
}

export default Freelancerdetails;

Home.js

import { useState, useEffect } from "react";
import BlogList from "./BlogList";

const Home = () => {
  const [freelancers, setFreelancers] = useState([
    { skills: 'Not loading', name: 'mario', id: 1, homepage: "https://zetax.dev" },
  ])
  const [isPending, setisPending] = useState(true);

  useEffect(() => {
        const fetchData = async () => {
          const response = await fetch("https://149-56-112-99.my.local-ip.co/", {
          });
            const data = await response.json();
            const newFreelancers = data.slice(0, 50);
            setFreelancers(newFreelancers);
            setisPending(false);
        }
        fetchData();
    }, []);

  return (
    <div className="home">
      { isPending && <div>Fetching data...</div> }
      <BlogList freelancers={freelancers} title="All Freelancers" />
      <a href="https://zetax.dev" className="watermark">Made by Zetax</a>
    </div>
  );
}

export default Home;

BlogList.js

import { faTrash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Link } from 'react-router-dom';

const BlogList = ({ freelancers, title, }) => {

    return (
        <div className="blog-list">
            <h2>{title}</h2>
            {freelancers.map(blog => (
                <div className="blog-preview" key={blog.id} >
                    <h2><Link to={ "/freelancers/" + blog.name}>{blog.name}</Link></h2>
                    <p>Skills: {blog.skills}</p>
                    <a href={blog.homepage}>Visit Homepage</a>
                </div>
            ))}
        </div>
    );
}

export default BlogList;

I really hope someone would be willing to help me as it's a really frustrating issue to deal with! Greetings, Finn