Have you fixed, if not tell me I ll ask some things for it

I have still not figured it out yet

are you seeing any errors at browser console, or terminal

Yes.

are you seeing anything related with cors

No, but my concern is that the problem is with the cors configuration in backend

looks like not, cuz you need to see CORS error at console

The whole console looks like this

But had the same errors before setting up cors in backend

check your terminal, you can see some errors related with node with LARGE FONTS

like Error: TLS_HANDSHAKE ....

There's all sorts of messages, but I don't see no HANDSHAKE

oh yes

that green errors

now open your dotnet terminal

no, at vs developer console

Oh, the same terminal? I see the handshake now

That terminal before, is the one that starts when I run my backend app

dont care handshake

you need to vs developer console

if you are using vs code for dotnet, open terminal you run dotnet app

then run this dotnet dev-certs https --clean

and this dotnet dev-certs https --trust

then run both sides again and try fetch

Okay, I'm gonna try that. brb

This command: dotnet dev-certs https --trust

Gives this error message

not powershell, cmd

also dotnet dev-certs https --clean

I did that which worked, but should I do it again in cmd?

if worked its okay

first clean, then trust

I the trust command worked this time. Tried restarting the backend, but I still get the same errors in the frontend as before

okay, now open your client folder root

do you have .env file

Yes, an .env.local, but it's unused rn

This is the only env variable I have in it: NEXT_PUBLIC_WEB_API='http://localhost:7253'

okay, create an .env file then write this in NODE_TLS_REJECT_UNAUTHORIZED=0

then run both sides again

It apparently comes with the new error now

its usual error, just check its existence first like if (calendars) ...

Oh a null check?

no undefined check

like {calendars && calendars?.map(...

its better

I'm not sure I understand it.

<tbody>
{calendars && calendars.map(calendar => <tr key={calendar.id}>
<td>{calendar.title}</td>
<td>{calendar.description}</td>
</tr>)}
</tbody>

I guess it's not like this?

Of course. But I still get the same error

can you do console.log(calendars) to make sure you are fetching and its not empty

I don't see it in the browser inspect, but I see it in my powershell terminal

I see all my "Calendars" in my database, which looks like it should

oh yes, they are not array

so you cant .map to object

Oh, so I gotta change the way its formatted in my backend

I just tried with another endpoint that's an array, and the fetching worked. So I just gotta fix whatevers going on with the Calendars. At least I know where the problem lies

no, just write this {calendars && [calendars]?.map

[calendars] makes your object as array like [ {...} ]

I get this error on my properties:
Property 'id' does not exist on type 'Calendar[]'

yea, its also different concern, the fun part 😄

your data dont have id, it have $id, Id

also its not only that

your data shape is different than your Calendar type

Yes it looks so weird...

is it mongodb

No, Microsoft SQL Server

basically your calendar is sth like this { $id: string; $values: [ { } ] }

so first you need to calendars.$values.map(val => ...

and type Calendar = { $id: string; $values: [ {} ]

Can you code it in this editor? Cause I'm not sure which lines I'm coding your suggestions

can you copy your response at blue terminal

no not this

. this

{
'$id': '1',
'$values': [
{
'$id': '2',
Id: 1,
DisplayImage: 'Some Link',
Title: 'First Test',
Description: 'A Description Of My First Test',
CreatedAt: '2023-11-11T11:06:13.5834967',
UserId: 'f565a5ea-9039-4dc1-afeb-198154f366b6',
User: null,
CalendarImages: [Object],
UsersWithAccess: [Object]
},
{
'$id': '7',
Id: 2,
DisplayImage: 'Another link',
Title: 'Second test',
Description: 'Description of second test',
CreatedAt: '2023-11-11T11:16:49.7255382',
UserId: 'f565a5ea-9039-4dc1-afeb-198154f366b6',
User: null,
CalendarImages: [Object],
UsersWithAccess: [Object]
},
{
'$id': '10',
Id: 3,
DisplayImage: 'test imagelink',
Title: 'third test',
Description: 'the third test description',
CreatedAt: '2023-11-11T11:38:45.7992837',
UserId: '00e1f88f-a55b-4c82-884a-a26ef8955f62',
User: null,
CalendarImages: [Object],
UsersWithAccess: [Object]
}
]
}

Got you

hope you got it

I'm gonna try that

Why type instead of interface?

better for me

i like & instead extends

Oh okay. I get some errors, but shouldn't calendar && calendar? be in plural like before? And I also get this error: Parameter 'cal' implicitly has an 'any' type.

oh you need to assign type to calendar

import React from 'react'
import Link from 'next/link';

type Calendar = {
$id: string;
$values: [
{
$id: number;
Id: number;
DisplayImage: string;
Title: string;
Description: string;
}
]
}

const CalendarsPage = async () => {
const res = await fetch('https://localhost:7253/api/Calendar/', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});

if (!res.ok){
throw new Error("Failed to fetch the stupid data");
}
const calendars: Calendar[] = await res.json();
console.log(calendars)
return (
#Unknown Channel
<h1>Available calendars</h1>
<table className='table-zebra-zebra'>
<thead>
<tr>
<th>Title</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{calendar && calendar?.$values.map(cal => <tr key={cal.id}>
<td>{cal.title}</td>
<td>{cal.description}</td>
</tr>)}
</tbody>
</table>
<Link href="/">
<div className="btn btn-primary">
Back to home
</div>
</Link>
</>
)
}

export default CalendarsPage

Now it says this: Property '$values' does not exist on type 'Calendar[]'. Did you mean 'values'?

not calendar[]

there is no array

I noticed, but couldn't remove my comment. Now there's no errors in code, but I get this in the blue terminal

It apparently failed to fetch

i need to see it live

do you know live share extension at vscode

Yes, I have it

send me a link

The extension apparently doesn't work. Can I DM you tomorrow?

It doesn't show

press f1 > start a collab session

I gotta go :((

if you are seeing that error from throw, means sth wrong with your backend

or network, or client

if that url opens at your browser and you can see data there, problem is your client

like localhost:7231/api/Calendars etc

ah okay, good luck

Thank you. I decided to fix the weird array format I had to a more normal approach. Still didn't work, but then tried another one of my endpoints, which actually worked. So I'm looking into what might be wrong with my code. I can fetch data with the other endpoint, but apparently only one object is fetched, when I know I have multiple in my database. Here's the code if you wanna help me again! But forgot to thank you for helping me earlier - you helped me a lot!

Tell me when you available for live share editor

I ll show you by writing and explaining

If you can, open both sides on same Editor, if not you need to send another live share link in visual studio

Yes, I’ll let you know