[FR] Migrate to NEXTJS

[DarkIntaqt]

The page should be rewritten in next, because...

• Better SEO (SSR)
• Better structure

I hate myself for using React in the first place.

Try to migrate the old code as good as possible, make it nextjs-friendly and more structured and then redesign the site.

New features planned:

• [x] Match history tracking for everyone (enabling using RSO)
• [ ] More statistics
• [ ] More ways to customise filters
• [ ] Compare profiles
• [ ] More languages
• [ ] ø points per match
• [ ] Mark bugged challenges (partially done, hardcoded it works, api for this is still missing)
• [x] Search for challenges and titles directly using the search bar on the front page
• [ ] Pin challenges to a users profile (locally) for better tracking - remove them, if a selected tier was reached
• [ ] Highlight the best challenge of a player for a further showcase
• [ ] Average progress of a player per day in a specific challenge - only works with match history

[DarkIntaqt]

Branch challenges/next for any further development.

Im going to rewrite the whole code base, even tho it will be based on the old one. Helper functions will be better documented and probably merged, as these are working fine. Only the frontend should be rebuild.

[BlossomiShymae]

What section/task can I start out with for helping with the migration? :o

[DarkIntaqt]

As the current version is almost empty, except for the start page, you can add whatever section you want. What's pretty important now is a provider which fetches the titles and the challenge list.

So, if you want, just tell me what you are working on and it should be good to go :)

[BlossomiShymae]

I think I'll start with the Communities page. I haven't worked with Next.js before so this will be fun. :3

[BlossomiShymae]

So for the provider you mentioned, how do you want it implemented? I'm thinking of implementing it as a service class with methods like challengeService.list("na1", "en"), challengeService.listTitles(), etc. This should make it convenient to use in components and encapsulates domain logic (e.g. getting data from endpoints).

I'm looking into doing the Titles page thingie. :>

[DarkIntaqt]

So for the provider you mentioned, how do you want it implemented? I'm thinking of implementing it as a service class with methods like challengeService.list("na1", "en"), challengeService.listTitles(), etc. This should make it convenient to use in components and encapsulates domain logic (e.g. getting data from endpoints).

Yes exactly. The problem is that I am not sure on how to handle these, probably by using async.

Both titles and challengeNames should be preloaded (in English at least) on the first startup to support searching challenges and titles by using the (non existent) search bar.

[DarkIntaqt]

Additionally, this should be sticky https://github.com/DarkIntaqt/challenges/blob/dcb54a4503f72b372bd7f9cbac698dc9e1b431b0/styles/challenge.module.scss#L153 but isn't.

[BlossomiShymae]

Should I try to migrate the Challenges page? I'm looking at the current one but there is some stuff that is dark magic to me. I remember seeing an endpoint being called somewhere that brought an array of values for challenges that are used for ChallengeObject, I think. I just can't remember where it is now. (,,>﹏<,,)

[DarkIntaqt]

The old code is dark magic for me too. That's what the rework is for ^^ Im not sure if I understood that wrong, but you could use await ChallengeService.list() to at the very least get the challenge list.

You meant probably this ChallengeObject. You could either use the old object code OR you just output a div with, for example, the challenge name by now, because the ChallengeObject is one of the things I would love to rewrite, since it is just poorly coded. You could also say that you wait a few more days and I will re-code this Component first. Thanks for your help ^^

[BlossomiShymae]

Yeah, it was something to do with the ChallengeObject for the totes' dark magic stuff. >.<

I'll see if I can start on the Challenges page and just use a div as a placeholder for the ChallengeObject for now. :3

[DarkIntaqt]

Im so happy to announce that you can finally select multiple regions in the leaderboards.

TODO: Make the buttons highlighted if the page was opened with filters already. Margin between head and object is not equal

[DarkIntaqt]

@BlossomiShymae is it ok if I name you on an /about page and link to your GitHub or would you rather stay within the dark of GitHub's commit history?

[BlossomiShymae]

I will be delighted if you did put an acknowledgment. Gladly! (..◜ᴗ◝..)

[DarkIntaqt]

In Commit the Challenge Provider URLs were changed to a new api structure. Currently, I am not sure how to cache this request. The only thing I know is that I have to cache this request, otherwise it could be very redundant. Some of the old pages might break as the url structure changed a bit. Sorry for that

@BlossomiShymae , if you have time, could you take a look at the typedef file in the commit mentioned? I tried to modify it conforming to the new api response, but I'm not sure if I used typedef correctly, as I never really worked with it. A quick look would be enough ^^

[BlossomiShymae]

@BlossomiShymae , if you have time, could you take a look at the typedef file in the commit mentioned? I tried to modify it conforming to the new api response, but I'm not sure if I used typedef correctly, as I never really worked with it. A quick look would be enough ^^

Yep! It appears you grasped it nicely. :3

There is one line I noticed right here: https://github.com/DarkIntaqt/challenges/commit/1e69fe3c1c45c9d42a1c0c031952e1e7b18713be#diff-7a23f56e38cbeefce0fc0348d43ef03cb02c88e5655c22c7cc20648ad831196aR48

I think it should be {Object.<number, ChallengeDto>} instead of {Array.<ChallengeDto>} based on its usage below: https://github.com/DarkIntaqt/challenges/commit/1e69fe3c1c45c9d42a1c0c031952e1e7b18713be#diff-4e53b6c898668d5a1f81a7c38d0722a48304c871b8fb52635532a966f2fb112aR41-R52 https://challenges.darkintaqt.com/api/challenges/na1/en_US.json

The property of the returned JSON, challenges, seems to be a map/dictionary/object of ChallengeDto and not an array. Hopefully I didn't misunderstand anything here. (｡・//ε//・｡)

[DarkIntaqt]

Thanks a lot

[DarkIntaqt]

So there is a new feature: you can pin challenges. Im not sure why and where to use it, but good to have. Also, a (very optimistic) release date is planned: April 28th 🥳 Lets see if that is possible

[renja-g]

Is there anything I could work on here?

[DarkIntaqt]

Is there anything I could work on here?

Currently the only big part missing is the user page. You could either add a basic SSR (getInitialProps) user fetching or try to make the /challenges page usable and the challengeList and filter options to components. The new user page should be the same as the /challenges page with more filters and populated with the user specific data.

The functionally of the user page is required to add all the other pending feature requests, but you don't have to add the user page and wait until someone else adds it (me) and then add a smaller feature request :)

[renja-g]

Alright, then I will start with making myself familiar with the project.

Btw. why are you not using TS 😭

[DarkIntaqt]

I have no clue but I regret it too :/

[renja-g]

There we have the next refactor after this one 😂

[renja-g]

So there is a new feature: you can pin challenges. Im not sure why and where to use it, but good to have. Also, a (very optimistic) release date is planned: April 28th 🥳 Lets see if that is possible

How optimistic are you feeling 15 days away?

[DarkIntaqt]

How optimistic are you feeling 15 days away?

Let's say its okay ^^ Technically only the user page is missing and the functionality already exists. Looking forward to like finish (or at least migrate all functionalities from the old page) the project in the next 2 weekends

[renja-g]

Good to hear

[DarkIntaqt]

The /challenge page was moved into a component to be also used on the user page. Now user challenge data can be "applied" to the Challenge component as well to ensure displaying all challenges with or without progress. Filters aren't working yet

[DarkIntaqt]

Rewriting the /next branch in /next-next to typescript and upgraded to NextJS 13 app directory. There was a problem which wasn't fixed in the current version used

[BlossomiShymae]

Rewriting the /next branch in /next-next to typescript

T-typescript rewrite!?

Is it the same problem with tabs reloading data or something else? o.o

[DarkIntaqt]

Yesn't... This project requires another version of nextJS and if everything is going to start from scratch anyways, why not just rewrite it in typescript.

*Of course I am not going to rewrite everything from scratch. I thought about migrating the new code to typescript, which could be a bit challenging as some of the code is a bit "illegal" but overall I think that would be the best approach for the future instead of having it un-typed again