search

timofeysie / redux-typescript-example

A small social media feed app based on the Redux essentials code using TypeScript and unit tests.
12 stars 8 forks source link

Open the repository via https://codesandbox.io/s/github/timofeysie/redux-typescript-example gives an TypeError error #3

Open dmitrybv opened 1 year ago

dmitrybv commented 1 year ago

When I try to open the repository via https://codesandbox.io/s/github/timofeysie/redux-typescript-example I am getting the following error

TypeError
Cannot read properties of undefined (reading 'substring')
PostExcerpt
/src/features/posts/PostsList.tsx:25:54
  22 |                <PostAuthor userId={post.user} />
  23 |                <TimeAgo timestamp={post.date} />
  24 |            </div>
> 25 |            <p className="post-content">{post.content.substring(0, 100)}</p>
     |                                                     ^
  26 | 
  27 |            <ReactionButtons post={post} />
  28 |            <Link to={`/posts/${post.id}`} className="button muted-button">
View compiled
▶ 11 stack frames were collapsed.
timofeysie commented 1 year ago

If you notice in the network tab, the posts API call is returning an HTML document, which I find also strange: image

Since the client.js and server.js are written in Javascript, they will not work in this Typescript app. I am replacing the mock server with axios calls to my Nodejs backend. As I mentioned in your previous issue, I raised this point to the official project maintainer and he also didn't know about this behavior.

To fix the above issue, you could do this in the postSlice.ts file:

export const fetchPosts: any = createAsyncThunk(
    "posts/fetchPosts",
    async () => {
        const response = await axios.get(API_URL+"/posts");
        console.log('response.data', response.data)
        if (response.data.includes("<!DOCTYPE html>")) {
            return []
        } else {
            return response.data;
        }
    }
);

But this is avoiding the point that you would need to replace the API call with a working one. If you notice, the call being made is: 

Request URL: https://fs856y.csb.app/undefined/posts
Request Method: GET
Status Code: 200

I have no idea why axios would not give an error instead of a 200 response for this call. I thought that it was the client.js problem, but I see now the issue lies elsewhere, so thanks for bringing this to my attention.

If you don't need Typescript, you can use the official repo run in codesandbox here

However, the point of this project is to explore converting that to Typescript. And since client.js is ".js" or plain Javascript, it's not going to work without some changes.

What is your purpose in running this app? For me this is an educational project. If you want to learn about Redux with Typescript, then I would be happy to help. I have written three articles on this, starting with [the Redux counter example[(https://timothycurchod.com/writings/react-redux-typescript-counter-example) written in Typescript. That's the beginning of this project and the best place to start.