stanriders / circleforms Goto Github PK

For all your circle-clicking related questions

C# 25.37% JavaScript 0.73% Dockerfile 0.34% SCSS 2.20% TypeScript 71.34% Shell 0.02%

circleforms's Issues

wysiwyg doesnt expand after pressing the preview button twice

Open page with wysiwyg editor, press enter a bunch of times -> the area expands.
Press preview twice, it doesnt expand anymore and is stuck at its initial size.

User hovercard

With user data in it to complement the Player data present in a form submission:

Multiple players per respond for team submissions

Will need some kind of invite system - "captain" responds with a list of players, other players have to confirm that respond for it to go through

User should be able to see results of a poll

Sorting by different data points
Selectable representation of answers (by poll creator?)
Hiding unnecessary data (by poll creator?)
Exporting (#7)
Different result accessibility (#6)

Backend
Frontend
Design

Saves form data to local storage in case the user accidentally closes the tab

Multiple admins per post

There should be possible to assign additional authors to each post

Add user role in /me

Maybe add some other actions only for mods?

Replace `IsActive` with `ActivePeriodStart` and `ActivePeriodEnd`

Don't think this should be editable? We should replace this with DateTime? ActivePeriodStart and DateTime? ActivePeriodEnd later

Originally posted by @stanriders in #130 (comment)

Currently working on

Single form
Create form

Waiting for design

Edit form
Filling a form

Done

Create UI skeletons for loading state

User should be able to link discord account

Discord API integration
Confirmation bot
Frontend

User should be able to log in using osu! auth api

https://osu.ppy.sh/docs/index.html#authorization-code-grant

Keep user in the database after first login
Profile caching

Different accessibility of polls

Poll types
- Public poll (can be accessed directly)
- Link-only poll (poll link should have a key for accessing it)
- (low-prio) Poll limited to a set of users (won't be accessible unless user is in the set, pretty much invites)
- (low-prio) Friends-only poll? (friend list can be taken from API)

use hook useSWRInfinite for pagination

"skip to content" accessibility

User should be able to create new polls

Multiple pages of answers for when there are too many of them?

Frontend
- BBCode

Design

User should be able to lock the post

For example, a tournament registration form should only be available until a certain date. Currently, there's no way to stop people from adding additional answers to the form.

When they want to
Timed
Frontend
Design

Anti-bruteforce for private link posts

Originally posted by @stanriders in #52 (comment)

Outputs frontends logs in a file

Toolbar buttons can be clicked even though they are invisible and trigger an error

Buttons `primary` and `tertiary` dont have a keyboard focused visible state

Create a breakpoint for >2k screens

User should be able to leave comments on posts

Frontend
Design
API endpoint

User should be able to retract votes

Backend
Frontend
Design

Backend doesnt return Global and Country ranking for players

Use TypeScript

Use interfaces generated from swagger
https://github.com/drwpow/openapi-typescript#readme

Currently we are only generating types from swagger schema, but it`s possible to generate full api client as well. With the current workflow, after the backend changed some of the api types it proved to be quite difficult to adjust to all of the changes.

The new workflow of interacting with api would ideally look something like this:
[requirement 1]

// we would also get autocomplete on all possible backend actions with type safety
apiClient.postsPOST(myjson)

[requirement 2]
Another important requirement is to be able to set credentials: include (and custom headers in general) on the fetch api call. Because otherwise the auth cookie is not sent and the request fails with CORS errors. (shivers)

openapi-typescript

Currently we are using openapi-typescript package, which only generates types, but recommends to use openapi-typescript-fetch for generating the client.

openapi-typescript-fetch supports custom headers config, but the api client workflow looks like this:

// declare fetcher for paths
const fetcher = Fetcher.for<paths>();

// create fetch operations
export const apiClient = {
  postsPOST: fetcher.path("/posts").method("post").create(),
  postsIdGET: fetcher.path("/posts/{id}").method("get").create()
};

So we end up creating every single method by hand, which in my opinion is too much of an overhead.

Other options

Upon further research i stumbled upon this great article. Some of the best scoring generators in their opinion are Nswag and Typewriter.

Typewriter

So first things first, Typewriter while scoring extremely high, requires modifying c# backend code, which sounds quite questionable. I wasn`t really able to test this solution. No comments here.

Nswag

Pros:

Well maintained (5k stars)
One of the few tools which can not only generate api client/types from swagger.json, but from c# code itself! (Could be used to generate types on backend build)
Cool thing is that they actually have a GUI for this tool. There are like a dozen options on how you want to generate your TS code.

Cons:

I briefly tested the code that it generates and I actually wasnt able to figure out how to modify the request options easily
Docs while massive are not the best imo
Generates one huge 3k LOC file.
Code quality is kinda meh.

openapi-typescript-codegen

I stumbled upon this thing myself. Its relatively small (only ~700 stars), but i was pleasantly surprised!

Pros:

Very easy to customize the headers/options
Docs are nice. I was able to get up and running in no time. (In fact default config options already include credentials: "include" option!)
Generated code is nicely split and looks clean

Cons:

Small user base

I was ready to end my searches here, as it seemed like a suitable solution, but i ended up not noticing an elephant in the room.

Openapi Generator

This one is something else. Really massive (12k stars). Supports almost every language in existance. But lets focus on typescript. First of all it generates a bunch of files, with good structure: models & services. Here comes the mind blowing part. So our original type generator uses strings for dates, and while that technically correct (since that is what the api response returns), we would have to convert dates to strings manually everytime. Openapi Generator actually includes conversion code. So you need to pass a Date object into the PostsService.postPosts({... , activeTo: new Date()}) it will then convert it to iso string internally! Also out of the box it allows us to use camelCase for client-side state and it automatically transforms it into snake_case for backend to consume.
Have i mentioned that the code quality is just next level? To be completely honest i didnt even think about code quality much before looking at this (since its all just generated stuff, who cares), but this is just incredible. It meets both of the requirements and imo it looks like one of the best solutions we could use, but i`d love to hear your thoughts as well!