dgd03146/anabada-refactoring

This is a repository for a surfing community website that connects passionate surfers, offering an interactive platform to discover new surf spots, share experiences, and contribute to a vibrant online community.

anabada-refactoring's Issues

Migrate Mypage page components with Typescript and Next.js

Description

A clear and concise description of what the problem is.

To-do

A clear and concise description of what you have to do.

• Add type to catch errors at compile-time, ensuring safer and more reliable code.
• Separate react-query hooks for separate concerns
• Make reusable components for maintainability and scalability

Additional context

Add any other context or screenshots about the feature request here.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Migration of notification components to TypeScript with Next.js

Description

A clear and concise description of what the problem is.

To-do

A clear and concise description of what you have to do.

• Separate react-query hook for separate concerns and reusable.
• JavaScript to Typescript
• Create a useStomp hook to reuse socket in other components easily.

Additional context

Add any other context or screenshots about the feature request here.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Migration of chat room page components to TypeScript with Next.js

Description

A clear and concise description of what the problem is.
The goal of this issue is to migrate chat Room pages to TypeScript with Next.js. This will involve converting existing JavaScript code to TypeScript, which will help catch type errors and improve the maintainability of the codebase. Additionally, I will separate the React-Query hook for separate concerns and to reduce complicated code.

To-do

A clear and concise description of what you have to do.

• Add type to catch errors at compile-time, ensuring safer and more reliable code.
• Separate react-query hooks for separate concerns
• Make reusable components for maintainability and scalability

Additional context

Add any other context or screenshots about the feature request here.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Migration of notification page components to TypeScript with Next.js

Description

A clear and concise description of what the problem is.
The goal of this issue is to migrate notification components to TypeScript with Next.js. This will involve converting existing JavaScript code to TypeScript, which will help catch type errors and improve the maintainability of the codebase. Additionally, I will separate the React-Query hook for separate concerns and to reduce complicated code.

To-do

A clear and concise description of what you have to do.

• Convert existing JavaScript code to TypeScript
• Separate React-Query hook for separate concerns
• Refactor code to reduce complexity
• Separate stomp hook to reuse

Additional context

Add any other context or screenshots about the feature request here.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Migrate app component to typescript with Next.js

Description

A clear and concise description of what the problem is.

To-do

A clear and concise description of what you have to do.

Additional context

Add any other context or screenshots about the feature request here.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Migrate Meet detail page to Next.js with Typescript

Description

A clear and concise description of what the problem is.

To-do

A clear and concise description of what you have to do.

• Separate react-query hooks for separate concerns.
• JavaScript to Typescript
• Fetch pre-rendered data with next.js props

Additional context

Add any other context or screenshots about the feature request here.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Migrate posts page to Next.js with Typescript

Description

A clear and concise description of what the problem is.
Migrate posts page to Next.js with Typescript

To-do

A clear and concise description of what you have to do.

• Convert usePosts react-query custom hook to typeScript
• Convert posts page to typeScript
• Implement pre-rendering with getStaticProps in Next.js
• Make reusable components to avoid duplicate code

Additional context

Add any other context or screenshots about the feature request here.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Migration of chat page components to TypeScript with Next.js

Description

A clear and concise description of what the problem is.
The goal of this issue is to migrate chat pages to TypeScript with Next.js. This will involve converting existing JavaScript code to TypeScript, which will help catch type errors and improve the maintainability of the codebase. Additionally, I will separate the React-Query hook for separate concerns and to reduce complicated code.

To-do

A clear and concise description of what you have to do.

• Add type to catch errors at compile-time, ensuring safer and more reliable code.
• Separate react-query hooks for separate concerns
• Make reusable components for maintainability and scalability

Additional context

Add any other context or screenshots about the feature request here.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Migrate Meets page to Next.js with Typescript

Description

A clear and concise description of what the problem is.

To-do

A clear and concise description of what you have to do.

• Separate react-query hooks for separate concerns.
• JavaScript to Typescript

Additional context

Add any other context or screenshots about the feature request here.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Migrate layout components to TypeScript and Next.js

Description

Migrate layout components and applied in my next.js project.

To-do

A clear and concise description of what you have to do.

• Apply higher-order component with getLayout to avoid duplicate code for Chat, Room and Notifications components.
• Implement a common layout component with a header in the project

Additional context

Add any other context or screenshots about the feature request here.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Migrate layout folder to TypeScript and Next.js

Description

A clear and concise description of what the problem is.

To-do

A clear and concise description of what you have to do.

• Migrate JavaScript file to TypeScript.
• Refactor code to remove unnecessary logic, extract reusable logic, and create components as needed.
• Separate styles into their own files.
• Apply getLayout to create reusable layouts and add common components .

Additional context

Add any other context or screenshots about the feature request here.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Migrate map components to TypeScript and Next.js

Description

Refactor map components to reduce code duplication and improve maintainability and scalability. Identify common patterns and create reusable components to avoid modifying the same code in multiple places.

To-do

A clear and concise description of what you have to do.

• Make a common ExtraInfo Component component showing information on the weather.
• Make reusable map components to reduce code duplication
• Separate react-query hooks for separation of concerns
• Apply pre-rendering to reduce the time for the loading page

Additional context

Add any other context or screenshots about the feature request here.

Migrate login page to Next.js with Typescript

Description

A clear and concise description of what the problem is.

To-do

A clear and concise description of what you have to do.

• Create a reusable React Hook Form input component
• Define TypeScript types to ensure safe usage
• Store access token in react-query cache

Additional context

Add any other context or screenshots about the feature request here.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Migrate post detail page to Next.js with Typescript

Description

A clear and concise description of what the problem is.

To-do

A clear and concise description of what you have to do.

• Add the required type
• Separate react query hooks
• Separate common components to make reusable

Additional context

Add any other context or screenshots about the feature request here.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Migrate meetadd page to typescript with Next.js

Description

A clear and concise description of what the problem is.

To-do

A clear and concise description of what you have to do.

• Update all relevant files in the meet add a feature to use TypeScript, including the main meet add a page, any related components, and any supporting files such as stylesheets or utility functions.
• Separate custom hooks for separation of concerns
• Add type annotations to JavaScript code can help make it more robust, easier to understand and maintain, and potentially faster.

Additional context

Add any other context or screenshots about the feature request here.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Migrate Comments Component JavaScript to TypeScript

Description

A clear and concise description of what the problem is.

To-do

A clear and concise description of what you have to do.

• Add the required type
• Separate common components to make reusable
• Separate comments component from posts components

Additional context

Add any other context or screenshots about the feature request here.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Migrate postadd page from JavaScript to TypeScript

Description

A clear and concise description of what the problem is.

The postadd page is currently written in JavaScript, but we would like to migrate it to TypeScript for better type safety and maintainability. This issue involves updating all relevant files and dependencies to use TypeScript, including [insert specific details here]. Please review and merge the migration as soon as possible to ensure the codebase is up-to-date and maintainable

To-do

• Update all relevant files in the postadd feature to use TypeScript, including the main postadd page, any related components, and any supporting files such as stylesheets or utility functions.
• Separate custom hooks for separation of concerns
• Add type annotations to JavaScript code can help make it more robust, easier to understand and maintain, and potentially faster.

Migrate signUp page to Next.js with Typescript

Description

A clear and concise description of what the problem is.

To-do

A clear and concise description of what you have to do.

• Separate components to reduce complications of component
• Utilize React-Toastify for displaying alerts and messages.
• Reduce duplicate types in components by utilizing utility types.

Additional context

Add any other context or screenshots about the feature request here.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Resolved hydration error and refresh error

Describe the bug

• Issue with hydration and access token after page refresh
• Hydration error and access token retrieval problem on page refresh
• Page refresh causing hydration error and access token unavailability
• Unable to hydrate and retrieve access token on page refresh

To Reproduce

• To solve the issue of losing the accessToken when refreshing the page, you have set it in the local storage of the browser.
• To avoid server-side rendering (SSR) for a particular component, you have used next/dynamic.
• This component involves some margin changes based on the scroll height of the page.

Expected behaviour

The expected behaviour is that the application should be able to access the accessToken even after the page is refreshed and there should be no hydration error.

Screenshots

Resolved hydration error

Changed accessToken storage

Additional context
Add any other context about the problem here.