spytec / modshark Goto Github PK
View Code? Open in Web Editor NEWOn-the-go subreddit moderation that works on both mobile and desktop. Utilizes toolbox config.
License: MIT License
On-the-go subreddit moderation that works on both mobile and desktop. Utilizes toolbox config.
License: MIT License
As a moderator I want to configure settings for
I have a server we can host ModShark on. Just need to set it up for hosting once v0.1 is released.
Only applies if the user is using a server.
If a new version is available the user should be notified instantly instead of having to restart the app. This can be done the easiest through WebSockets where we send a message as soon as a new version is available.
Once server is live and running on modshark.app, we need a way to automatically deploy it to the server
I propose we do following:
It might not be as straightforward and needs some experimentation
We should make it possible for the user to favorite their subreddits. This should bring them to the top of the list
Maybe replace the current subreddit icon with a star?
This should be two parts
The design of the info of a comment. That is to say it’s content, upvotes, user, and how long ago it was posted, and see user notes
And the moderation actions to it for approving, removing with toolbox, marking as spam, view reports, and other stuff
If the comment is in modqueue: show all actions with the comment
If the comment is in a submission the user is viewing: have a button that shows the actions as a pop up or underneath the comment
We should have a changelog page to tell what has been changed. Best would probably be to use Vuetify timelines.
ModShark needs an icon, preferably a custom one that one can associate with a shark. Most shark icons are scary, maybe go for a goofy hammerhead look?
Whitetip sharks go into small areas to find prey, might be a good fit too
Upon loading for the first time, send a GET request to api/authenticate
. If response code is 200 OK
, the payload should have the token needed. If response code is 401 Unauthorized
, redirect to Login page.
If newly authenticated and client has a new token, send a POST request to api/authenticate
with a field token containing the Reddit token. Server should respond with a 204 No content
How submissions should be displayed as.
As a moderator I want to quickly see:
As a moderator I want to be able to take the following actions:
Right now all modmails will display in modmail tab. Including new, and in progress conversations.
We should figure out a way to toggle subreddits in modmail on the fly
This can be a pull to refresh and a button for refreshing. Button can probably be disabled for anything below md to not clutter
Logged in user's view:
TypeScript would be an interesting choice here. Not something neither of us have dabbled in previously from my knowledge so it will be a challenge.
vue add @vue/typescript
vue add
Server should store a Reddit token and username in an encrypted cookie.
[GET]
api/authenticate
200 OK
and payload object: { token: <token> }
401 Unauthorized
with empty payload.[POST]
api/authenticate
token
.token
field.204 No content
We should retrieve and cache subreddit toolbox config for the same duration as toolbox caches it. This can be stored in Vuex state under some subreddits_config
object
The main question now is: how do we retrieve the data in the simplest and most reliable way?
We might be able to utilize async Vuex getters that fetch the data either from cache or Reddit. But getters might not be able to dispatch actions or commit mutations.. if so we need to do some sort of check somewhere
In commit 326dc9e LoginForm was changed. This did not include changes to the tests.
An about page describing the application, how to report issues, how to report security issues, as well as how to contribute or see source code.
Should also display a list of contributors/maintainers by name, avatar, short bio, and links.
Vue's reactivity is working against us. snoowrap has a "feature" which in this case is a bug, where it would trigger requests when Vue walks over the object for reactivity reasons.
Moving this out of Vuex and Vue into a singleton would help us a lot. Since we do not change the snoowrap instance when it is created having a singleton means we can use it everywhere without moving it around. And we do not need to worry about Vue's reactivity creating requests.
We should add Sentry as our logging platform. To focus on privacy we should make this opt-in through settings rather than opt-out.
For back-end we can add Sentry as well, which wouldn't log anything related to specific users.
Right we utilize SQLite for development purposes, but for production environment we should use PostgreSQL.
This will need some back-end work and local testing to make sure it works as intended.
No testing or linting is being done to PRs atm. Should be easily done with GH Actions
We want modmail functionality. There’s two ways of using modmail right now. I’m not sure if we can support both the old and new modmail.
For new modmail though I have created this feature for snoowrap but it is under code review. Once it’s live we can create a conversation type interface between us mods and the user
Biggest reason for doing this is so that we can load in the settings from both Vue and ANC.
The environment variables moved to .env file should be referenced in the Vuex store so they are included in compilation
When we are getting close to initial alpha release we should document what the project does and how to contribute in a good way.
Right now we are using GitHub issues integrated with ZenHub for issue management.
We get With
useBuiltInsoption, required direct setting of
corejs option
outputted to terminal whenever we run tests. It clutters up everything.
Does not seem to break anything, but it should be fixed nonetheless
The main authorization flow should be as follows:
Not authenticated:
api/authenticate
.401 Unauthorized
.Authenticated:
api/authenticate
.200 OK
with an object as payload. Object should have property token
which contains the Reddit token.User has a new token:
token
to server to api/authenticate
.204 No Content
401 Unauthorized
.204 No Content
For users and posts we should display
This is the primary focus of ModShark and we should have removal reasons and user notes in alpha release.
This requires some insight into PWA and how it works. Whenever the user is without connectivity and cannot load the app we should display a ModShark icon, and name with info about connectivity and a loading circle.
Retrieve user notes and cache it upon loading a specific subreddit. We should cache it for the same period as toolbox itself does
Whenever a user launches a new version of ModShark we should display a popup describing the new features. This can be the latest changelog available or a list of changelogs since they last logged in.
If done without a server we check localStorage ModShark version and compare it with the loaded JS ModShark version. Then we fetch the changelog.
If done with a server, we check with the server what their last reported version and the latest ModShark versino. Then we can compare it with the JavaScript version and either display a new version is available or a list of changelogs
When the app is refreshed, we need show a splash screen whilst we authenticate and setup the relevant objects. This is especially true if the user uses server-orientated system as we need to request, and retrieve the refreshToken
from the server.
Splash screen should contain:
This is something we should do as soon as we have gotten some pieces of code and tests written which we believe will go into the initial release.
Create two or three GitHub Actions to run unit and e2e tests for front-end and potentially back-end. These should all be separate GitHub actions so we can more clearly see which part is failing.
JS
C#
Whenever a change to a setting is made, this should be stored on localStorage as well as sent to the server. localStorage should take precedent but should ultimately kept in sync with server
Bold marks what needs to be in for initial release
Without internet:
/offline
(default) ModShark icon and name with info about connectivity and a loading circle.Any:
/about
About page/settings
Settings page. In this we have settings for changing authentication type (server, localstorage), server URL, colour theme.Not authenticated:
/login
(default) ModShark icon, name, description and Login button. Only visible to not authenticated.Authenticated
/r/{subreddit}
last selected subreddit from Vuex state. If none was ever selected default to mod
/modqueue
(default) Contains list of comments and submissions/unmoderated
Contains list of unmoderated submissions/modmail
Contains a list of modmail threads
/{id}
List of replies to a thread. Reply button at the bottom of the thread./moderators
List of moderators/submission/{id}
Detail of submission and comments below that
/comment/{id}
Linked comment with context if it is a reply to another comment./u/{user}
Shows account age, karma, and buttons for submissions and comments
/submitted
List of submissions, clicking goes to /r/{subreddit}/submission/{id}
/comments
List of comments, clicking goes to /r/{subreddit}/submission/{id}comment/{id}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.