bolt04 / unicommunity

A system that enables students and teachers to communicate easily, through announcements, posts in a Forum, etc.

UniCommunity

A project idea for our Final Year Project (Projeto e Seminário) at ISEL (Instituto Superior de Engenharia de Lisboa).

Introduction

This project aims to offer an application to support both the students and teachers, in their academic journey. By supplying features that eases communication and the exchange of ideas (through a forum) or resources, in a academic community. The project also aims to facilitate the access to relevant information to the student, like replies to a question of his interest or teacher announcements.

An identified need in the student community is the ability to ask a question without any repercussions, for example being ashamed to ask a particular question, because people might think that they are not up to date with the class topics. For this particular issue, the application allows an anonymous mode when creating a post on a forum or any other place that they are allowed to. With this feature people can ask questions or even answer questions of other members of the community, removing the fear factor that might exist.

Commit message standards

We are trying to use the Angular standards as a guideline in most commits. Since the Conventional Commits specification is something new to us this is not a strict rule that we must follow, just something that helps when writting some commit messages.

key	value	notes
type	ci	Changes to our CI configuration files and scripts (e.g. circleCI)
type	feat	A new feature
type	fix	A bug fix
type	refactor	A code change that neither fixes a bug nor adds a feature. Usually code clean-ups
type	style	Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
type	test	Adding missing tests or correcting existing tests
scope	client	Regarding the Web client module
scope	android	Regarding the Android client module
scope	server	Regarding the Server/API module

Further information and documentation

If you are interested in learning more about this project, check our Wiki page:

unicommunity's Issues

Add ability to comment a Forum Post

Show feed to the user at home page

• Make the React component Feed. Shows a list of feed items and to get this list it makes an API request on the method componentDidMount().
• Make the React component FeedItem. It receives the model (feed item object)

Redirect from CreateBoard to BoardDetails

Implement redirect to another component (BoardDetails) from the onclick handler of the create button using React Router history.

Example:
App.js

 <Route 
        path='/target'
        render={ props => <BoardDetails {...props} />}
/>

CreateBoard.js

this.props.history.push(`/target`, {test: 1})

Forum: List posts (small representation) in BoardView

• Make the component ForumModule maybe
• Alter the response to Get Board since it changed in the API

Add the MyBoards and All Boards buttons to Navbar

MyBoards should be a dropdown that shows all the current boards of the user. It should also have a button or some way to navigate to a page where it shows all the user boards. Maybe divided by: previous semester, then the semester before that, etc.

All Boards should just be a button that redirects the user to a page where is shown a list with all the boards in the system (the list of boards the API responds with).

The NavBar component isn't responsible

In this image we can see that at some point, the logout button disappears:

If we expand the window again to a certain point, it re-appears:

Myboards dropdown on Navbar

State in a React Component isn't private!

The following image can be encountered on the React docs about State and Lifecycle:

It states that the state of a component is private to a component. My interpretation of this is that no other component can have access and/or manipulate this field called state, meaning a parent component can't affect the internal state of its children, since the field state is private... I later found out that this is not true, at least as far as my interpretation of what is said and claimed by the official React docs goes.

View Post details when clicked in a item of the Forum

Move the server impl. to Spring WebFlux

At the moment, we have some understanding of how Spring MVC works, and its threading model is very important since it affects the programming model. Having a new thread per user request turns our code concurrent, what I mean by that is that we can't change mutable state on the service layer for example, unless we use some type of synchronization like a lock.
This solution is not very scalable... but when we say that it means vertical scalability i believe. If we actually want to scale horizontally we might not need Spring WebFlu, which fixes the vertical scale problem of Spring MVC, since it uses asynchronous and reactive programming I think.

Text Editor in CreatePost component gets on top of Footer

Examples of "Post" button on top of some text on the Footer:

The problem appears to be when the edit text box gets too big or maybe its because the Footer isn't sticking to the bottom...

Refactor CreateBoard and CreateBoardApi

Right now the createBoardAsync() function doesn't take any parameters, so that needs to be added.

Duvida

UniCommunity/client/src/components/App.js

Lines 52 to 72 in 5757bc0

	<Router>
	<CreatePost />
	<div className="App">
	<div className="ui container">
	<NavBar api={new NavBarApiMock()} />
	<Route exact path="/login" component={Login} />
	<Route exact path="/board/create" component={CreateBoard} />
	{/* //TODO: this boardDummy will not be here bc we dont have the board object here, only
	when the user clicks on button createBoard of CreateBoard component...so this lambda
	below will probably be removed */}
	<Route exact path="/board" render={(props) => <BoardView {...props} board={boardDummy} />} />
	</div>
	<Route exact path="/" component={Home} />
	<Footer />
	<BackToTopButton />
	</div>
	</Router>

Eu ja vi casos em que se usava depois dos Link To. pq escolheste nao usar? Estou a falar de algo desse gênero

<Router>
        <div>
          <h2>Welcome to React Router Tutorial</h2>
          <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <ul className="navbar-nav mr-auto">
            <li><Link to={'/'} className="nav-link"> Home </Link></li>
            <li><Link to={'/contact'} className="nav-link">Contact</Link></li>
            <li><Link to={'/about'} className="nav-link">About</Link></li>
          </ul>
          </nav>
          <hr />
          <Switch>
              <Route exact path='/' component={Home} />
              <Route path='/contact' component={Contact} />
              <Route path='/about' component={About} />
          </Switch>
        </div>
</Router>

Finish User Profile Page

/board isn't bookmarkable. Issue with component BoardView

Adding redirect (issue #5 ) to this component introduced a new bug which is: This component can't be accessed from anywhere else but the "create board" button.

When the user refreshes the page of a Board, it should update everything

Right now, if the user refreshes the page where the Board is shown, no data is being fetched so if a new post or summary or any content was updated or added, it is not being shown to the user!

This should be fixed by adding a prop with the api object for the BoardView component to use and make a request to fetch data, if the data is invalid by the cache or some other reason i think.

Replace fields with type String to a more meaningful type

Problem: Unbounded types, like String, make it more difficult or impossible to limit state representations.
Solution: Prefer binding unbounded or expansive types to bounded types.

By wrapping a String that is supposed to be the email of the user, for example, in a type Email, we can add more logic and validations to it and control the possible values. This is especially usefull when we want to make sure an email string has the character '@', or the maximum length, etc. I believe some of these rules are related to the business so they should be validated there, and not elsewhere like on the database tables or on a Web UI, etc.

Example:

Reference: KotlinConf 2018 - Representing State: the Kotlin Edition by Christina Lee

Subscribe and Unsubscribe to a board as a student

• Add a component to display on the list of boards
• This component will make a request to the endpoint that represents the board members resource

Change the UI presentation of a ForumItem

In the following picture each element is too close to each other, and can't be distinguished:

The objective is to add more colors (perhaps, if its helpful) and change the font size of the date for example (along with its format, so that its shorter, an example would be 2 days ago).

Good example:

The client breaks when blackboards is not present on embedded response (Get board)

Problem:
If the server takes out the blackboards of the embedded part of the HAL media type, for example:

Then the client has this error:

This happens because the mapper function that takes the output model and maps it to a model representation for the UI, assumes the blackboards array is on the response!

Solution:
Since one of the goals of HATEOAS is to allow the Web API to evolve independently, without breaking the client, the mapper function needs to check the links property in case the array isn't embedded. If the link isn't present either, then all the client can do is show a message to the user like 'The information isn't available'.

Clicking below the link on the Navbar doesn't change pages

Problem:
The image below shows that it was possible to click below the link (HTML anchor tag) saying 'Create Board', without changing pages:

Edit Blackboard

Add a button near the CreateModuleButton in ModulesView that enables an authority of the board to edit that blackboard's information, like notificationLevel or description.
When the button is clicked a modal shows up, containing a form that the user can fill, submitting at the end a request to 'Edit blackboard' endpoint on the Web API.

Refactor code to separate state management from UI render

An improvement to the client code structure is using a react pattern know as: Presentational and Container components.
Keep presentational components (pure) separate from stateful components (Redux docs).

Reference: React patterns video

Check if the currently signed in user is expired

If the current token on the browser is expired, redo the autorization flow.

Suggester for issues and users (board members) using # and @ like GitHub Issues

The suggestion list is capped at 5 elements.

Add tests to React Components

Maybe start with smoke tests, then build some unit tests (maybe API calls to test and verify the response), and perhaps look into integration tests.

Text Editor w/ Markdown support

Make a React component that render a text editor similar to GitHub when createing a page for the wiki (this is part of the Create a Post feature, since it is the text content of the post).