zetkin/app.zetkin.org

Revamped Zetkin web interface.

app.zetkin.org's Issues

Related Organizations sub-page

This is a page that should exist as a sub-page to organization pages, when there are any active sub-organizations or parent organizations related to the current organization.

It should contain a link to the parent organization and a list of active sub-organizations.

Handle follow/connect to organization for non-members

There's a need to handle the case when a user is not a member of an organization and clicking on follow on this organizations org/events/campaigns page.

Steps to reproduce:

1. Login
2. Go to/o/5
3. Click Follow or Följ

Expected result: Since the development user is not a member of the organization with an id of 5 we expect some sort of message to indicate and handle this.
Actual result: No change in UI that indicates that the user is not a member of said organization.

Layout/Template framework

Most pages share a common UI framework (header, footer et c) with other pages. This can be solved two ways.

1. The simplest way is using basic composition, where every page component contains a new instance of shared <Header> and <Footer> components.
2. Another way is "reverse composition" (for lack of a better name) where the page itself is contained within a higher-order component which also contains a <Header> and a <Footer>

Option 2 is the preferred solution.

The reason for going with option 2 is that it will keep the header and footer "alive" across pages. This allows for transitions, consistent scroll states et c, whereas option 1 would reset the header and footer on every navigation.

Another benefit is that overall layout/template code lives in a single location, instead of every page component. Adding a new feature above the header only needs to happen in one place, not in every page.

The challenge with solution 2 is that different pages might have different layout requirements. The most obvious example is that organizer pages and public pages have vastly different layouts.

This means that the page component needs to somehow specify which layout to use, and the App component needs to use the correct one.

One approach to this is discussed here: #1

Zetkin Home Page

Implement UI for event page

Spring Cleaning 2

Another set of ideas for refactors and clean-ups:

• Enable prefer-const linting rule
• Enable no-trailing-spaces linting rule
• Move Zetkin API object interfaces to types/zetkin.ts module
• Rename components to remove unnecessary Org* prefixes
• Rename data-test attributes to data-testid
• Look over occurrences of eslint-disable @typescript-eslint/no-non-null-assertion and clean up usage of !
• Verify typing for props.children everywhere (especially along with <Flex/>)
• Enforce alphabetical order of TS interface members

More to come…

Show "Edit page" only for officials

Org logo in all org related page headers

Add org logo in page header on the following pages

• event
• [campId]
• [surId]
• [campId]/events
• contact

User Home Page

App-like section of the site where the user can:

• Discover content tailored for them in their feed (#42)
• See events that they have signed up for (#43)
• Manage their connections to organizations (#44)
• Edit settings (#45)

Wireframe:

Campaign page

Campaign page containing:

• Campaign title
• Name of organization
• Campaign intro/description
• Event list (#22)

Organization Page

The organization page is the home of an organization that uses Zetkin. This is where they direct their members to find content, sign up to things and interact with the organization using Zetkin.

The page should contain:

• Title and logo of organization
• Follow button
• Sign-up form to register a Zetkin user account and connect (#47)
• Feed of upcoming events, campaigns et c (#46)

In the future it will also link to sub-pages:

• Related organizations page (#48)
• Custom organization sub-pages (#27)
• Donate page (#49)

Below are two relevant but very rough wireframes.

Link from campaign list to campaign page

Organization info on campaign page

Pull request #55 fixed most of #41, but does not include the organization name or logo on the campaign page.

They should be included on the page. How we solve that will need to be discussed further.

Internationalization

Research and implement internationalization for all components in the app.

Event List Component

Event lists will be used in many different places, like org pages, the home/discover page and the user home page.

Should display a list of event cards, where each card includes at least the following information about an event:

• Title or activity
• The name of the organization
• The name of the campaign
• Date and time
• Location
• Sign-up button

Clean up layouts

Focus on making development and testing easier, not beautiful design.

Spring cleaning

We need to do some spring cleaning and refactoring:

• Separate library imports from local imports throughout
• Change import sorting to ignoreCase
• Move layouts to components directory
• Decide on ' vs "
• Enforce sorting of JSX properties
• Disable @typescript-eslint/explicit-function-return-type
• Enable TS strict mode?

Reusable prefetch functions

Externalize Zetkin API URL

The URL to the Zetkin API should be externalized eventually, so that we can toggle between using the development environment and the live environment.

Originally posted by @richardolsson in #10 (comment)

Configure CSP

Configure HTTP Content Security Policy to further protect against XSS and more. More info at MDN: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

Link from EventList to event

User Connections Page

A page containing a list of organizations to which the user is connected and/or is following. The user should be able to unfollow organizations from within the list.

This is what the equivalent page looks like in Gen 2:

Disable /api/coverage in production

When NODE_ENV is 'production', i.e. the site is running live in production, the /api/coverage route should return 404.

User Settings Page

This page should allow the user to:

• Change their language preference
• Change their password

User Home Layout

Layout template for the user home set of pages (as defined in #25). The layout should contain the regular header and a set of top-level tabs (bottom-aligned on mobile) as outlined in the wireframe:

Localize all existing strings

Find all existing strings and replace them with localized versions using FormattedMessage.

Event Page

Single-event page with unique URL. Should contain at least:

• Title or activity
• The name of the organization, linking back to org page
• The name of the campaign, linking to campaign page
• Date and time
• Location
• Information text
• Sign-up button

Main Registration Page

Main Registration Page for creating a user account in Zetkin without automatically connecting to any organization.

The actual form is described in #47.

Don't pass irrelevant props to page component

Related to line 12 here:

app.zetkin.org/src/pages/_app.tsx

Lines 9 to 15 in f97c86a

	return (
	<QueryClientProvider client={ queryClient }>
	<Hydrate state={ pageProps.dehydratedState }>
	<Component { ...pageProps } />
	</Hydrate>
	<ReactQueryDevtools initialIsOpen={ false } />
	</QueryClientProvider>

An unnecessary effect of spreading pageProps like this is that the page component (e.g. OrgEventsPage) will receive the dehydratedState property even though it doesn't need and should never use it directly. The purpose of the dehydratedState property, created on the server by getServerSideProps(), is to provide state to the <Hydrate> component. Once passed to <Hydrate>, the dehydratedState is no longer relevant.

We should exclude dehydratedState from pageProps before passing it to the page component.

A neat looking way to do this would be to use the spread syntax described here (be sure to read the comments as well) to create two variables, dehydratedState and restProps. The former can then be passed to <Hydrate> and ...restProps to <Component>.

Originally posted by @richardolsson in #4 (comment)

Lint integration tests

Add linting for integration tests, which are currently not included in the path passed to eslint. The npm lint command should include both relevant paths, i.e. eslint src cypress.

The integration tests contain a bunch of errors that will need to be fixed as a part of this.

Organization Sub-pages

Consistently show user in header

Make sure that the user is shown consistently in the header, while logged in. After logging in, the user name and avatar should be visible in the header on every page.

Hook up login button

User To Do Page

This page should contain a list of upcoming events that the user has signed up to, as well as call assignments that they have been assigned to.

In the future it can also contain other things that the user is expected to do, such as assigned Tasks.

Organization Feed

Part of the organization page (#26) which retrieves and renders a list of upcoming events, on-going campaigns and other important content belonging to the organization.

Set up Zetkin API authorization

To Do:

• Configure client on api.dev.zetkin.org
• Add client credentials to .env.development and instructions to README
• Add session support (for browser ⇄ server communicatoin)
• Add Zetkin SDK (for server ⇄ Zetkin API communication)

Render survey form on Survey page

The survey page at /o/{org_id}/surveys/{survey_id} does not currently render a survey form. It should interpret the data retrieved from the API and render the survey elements as defined.

Compare with how it works in today's Zetkin, e.g: https://www.zetk.in/o/1/surveys/1

The existing activist portal uses the SurveyForm component from zetkin-common which can be used for inspiration, but it has many issues and is built using legacy React and should therefor not be considered a reference implementation.

Convert existing layouts to Adobe Spectrum

Implement Adobe Spectrum layouts and components for:

• DefaultLayout
• DefaultHeader
• OrgLayout
• OrgHeader

Donate page

A page under the organization page, where the user can donate to the organization.

Refactor as monorepo

Add Zetkin SDK and express-zetkin-auth to this repo, using npm or yarn workspaces.

User Home Feed

Show a tailored feed of upcoming events and other content relevant to the user.

Org Page Template

Create a template for organization pages. The template should contain the general header, as well as the organization logo, cover image (use placeholder for now), title, buttons and tabs.

The relevant places are outlined in red in the wireframe below.

Apply OrgLayout throughout

Use org layout on all organization sub-pages (including events et c).

Add an option on OrgLayout allowing it to be minimized, and toggle it for different pages.

API proxy

Consider adding a proxy endpoint for the Zetkin API, so that requests can be made to the same host that the front-end is running on, e.g. http://localhost:3000/api/orgs/1 will proxy the request to https://api.zetk.in/v1/orgs/1.

Pros:

• Avoids CORS issues (and the configuration necessary to fix them)
• Lets developers run the app on localhost:3000 or any other port
• Single solution for Zetkin API calls and bespoke app endpoints
• Zetkin API access token never has to be exposed to users

Cons:

• Requires all traffic to pass through single point of failure
• CORS security issues? Shouldn't be a problem but needs more research
• Not distinguishing between bespoke app endpoints and Zetkin API could be confusing to new devs

Disable video and screenshots in Cypress CI

https://docs.cypress.io/guides/guides/screenshots-and-videos.html#Screenshots

Org logo in campaign page header

Header with User Info

A common header for all (public) pages should display the Zetkin logo and user information, or a login button if the user is not authenticated.

Registration Form

A form to register a user account with Zetkin, including fields for

• First name
• Last name
• E-mail address
• Phone number
• Password

Externalize app URL

The domain (as well as scheme/protocol and port) of the app should be externalized eventually, so that it can be run with other settings in production.

Originally posted by @richardolsson in #10 (comment)

Better data mocking

The integration tests use cy.intercept() to mock back-end data, but because of SSR it's not possible to intercept many of the API calls being made (from the back-end). This means that to avoid 404's the initial requests made by cy.visit() must be for a resource that can be accessed via the live (or dev) API, which changes over time, making the tests brittle.

Consider running a small API proxy for integration testing, and substituting it by re-configuring the devserver under test. See #11 for API externalization.