Improve past sessions query performance

README.md

@@ -21,7 +21,7 @@ This is a Retrospective Idea board, powering [retrospected.com](http://www.retro
 
  
 
-![Retrospected.com](/content/screenshot-v2.png?raw=true 'Retrospected.com')
+![Retrospected.com](/content/screenshot-v3.png?raw=true 'Retrospected.com')
 
 This project is both an actual product, and also a technology demo using the latest and greatest JavaScript/TypeScript libraries of the month.
 
@@ -39,6 +39,9 @@ It features the following technologies:
 - [Styled Components](https://www.styled-components.com/)
 - [Multilingual](https://stackoverflow.com/questions/33413880/react-redux-and-multilingual-internationalization-apps-architecture) / Internationalization
 - [Postgres](https://www.postgresql.org/) (optional), defaults to [NeDB](https://github.com/louischatriot/nedb) (in-process)
+- [Passport](http://www.passportjs.org/) for authentication
+- [Giphy](https://giphy.com/) because adding a bit of fun to your retro can't hurt!
+- [React Beautiful DND](https://github.com/atlassian/react-beautiful-dnd) to allow re-ordering and grouping by drag-and-drop
 - [Jest](https://facebook.github.io/jest) for Unit Testing
 - [React Testing Library](https://testing-library.com/docs/react-testing-library/intro), for Integration Tests
 - [Yarn](https://yarnpkg.com/en/), replacing NPM
@@ -134,11 +137,19 @@ To know more about Kubernetes, see the [readme](/k8s/readme.md) file in the `k8s
 
 ## Roadmap and ideas 🚗 💡
 
-- Adding a real (but optional) login mechanism (Google/GitHub etc.)
 - Highlight posts where the user voted
+- Bluring posts to start with
 
 ## Versions History
 
+### Version 3.0.0
+
+- Brand new landing page, and much improved look and feel
+- Authentication using your favourite social media account (GitHub, Google or Twitter)
+- Ability to re-order posts by drag-and-drop
+- Ability to group posts together
+- Save your session settings as a default template
+
 ### Version 2.2.4
 
 - 🇷🇺 Russian Translation improvements (👏 Thanks [@regmagik](https://github.com/regmagik))

k8s/backend-deployment.yaml

@@ -14,7 +14,7 @@ spec:
     spec:
       containers:
         - name: rb-backend
-          image: antoinejaussoin/retro-board-backend:2.1.4
+          image: antoinejaussoin/retro-board-backend:latest
           ports:
             - containerPort: 3201
               name: backend-port
@@ -60,3 +60,33 @@ spec:
               value: production
             - name: SQL_LOG
               value: 'false'
+            - name: SENTRY_URL
+              value: 'https://1234567890abcdef12345@sentry.io/1234567'
+            - name: SESSION_SECRET
+              valueFrom:
+                secretKeyRef:
+                  name: retrospected-secrets
+                  key: SESSION_SECRET
+            - name: TWITTER_KEY
+              value: ''
+            - name: TWITTER_SECRET
+              valueFrom:
+                secretKeyRef:
+                  name: retrospected-secrets
+                  key: TWITTER_SECRET
+            - name: GOOGLE_KEY
+              value: ''
+            - name: GOOGLE_SECRET
+              valueFrom:
+                secretKeyRef:
+                  name: retrospected-secrets
+                  key: GOOGLE_SECRET
+            - name: GITHUB_KEY
+              value: ''
+            - name: GITHUB_SECRET
+              valueFrom:
+                secretKeyRef:
+                  name: retrospected-secrets
+                  key: GITHUB_SECRET
+            - name: BASE_URL
+              value: 'https://www.retrospected.com'

k8s/frontend-deployment.yaml

@@ -26,3 +26,5 @@ spec:
               value: ''
             - name: SENTRY_URL
               value: ''
+            - name: GIPHY_API_KEY
+              value: ''

retro-board-app/src/views/game/Column.tsx

@@ -214,7 +214,7 @@ const PostsWrapper = styled.div<{
   background-color: ${(props) =>
     props.draggingOver ? props.draggingColor : 'unset'};
   flex: 1;
-  min-height: 500px;
+  min-height: 100px;
 `;
 
 const Groups = styled.div``;

retro-board-app/src/views/game/post/Post.tsx

@@ -213,7 +213,6 @@ const PostItem = ({
                   open={giphyMenuOpen}
                   onOpen={openGiphyMenu}
                   onClose={closeGiphyMenu}
-                  onPointerLeaveCapture={closeGiphyMenu}
                   FabProps={{
                     size: 'small',
                     color: 'secondary',

retro-board-app/src/views/home/PreviousGames.tsx

@@ -18,8 +18,12 @@ const PreviousGames = ({ games }: PreviousGamesProps) => {
   );
   return (
     <Container>
-      {games.map(session => (
-        <PreviousGameItem session={session} onClick={redirectToGame} />
+      {games.map((session) => (
+        <PreviousGameItem
+          key={session.id}
+          session={session}
+          onClick={redirectToGame}
+        />
       ))}
     </Container>
   );

retro-board-server/src/db/postgres.ts

@@ -20,9 +20,7 @@ import {
   SessionMetadata as JsonSessionMetadata,
   SessionOptions,
   defaultSession,
-  defaultOptions,
   VoteType,
-  PostGroup,
 } from 'retro-board-common';
 import { Store } from '../types';
 import getOrmConfig from './orm-config';
@@ -53,7 +51,7 @@ const create = (
           id,
           options: { ...template.options },
           columns: template.columns!.map(
-            c =>
+            (c) =>
               ({
                 ...c,
                 id: v4(),
@@ -68,7 +66,7 @@ const create = (
       const newSession = await sessionRepository.saveFromJson(
         {
           ...defaultSession,
-          columns: defaultSession.columns.map(c => ({
+          columns: defaultSession.columns.map((c) => ({
             ...c,
             id: v4(),
           })),
@@ -257,22 +255,35 @@ const getOrSaveUser = (userRepository: UserRepository) => async (
 const previousSessions = (sessionRepository: SessionRepository) => async (
   userId: string
 ): Promise<JsonSessionMetadata[]> => {
-  const sessions = await sessionRepository
-    .createQueryBuilder('session')
-    .printSql()
-    .leftJoinAndSelect('session.createdBy', 'createdBy')
-    .leftJoinAndSelect('session.posts', 'posts')
-    .leftJoinAndSelect('posts.user', 'postAuthor')
-    .leftJoinAndSelect('posts.votes', 'votes')
-    .leftJoinAndSelect('votes.user', 'voteAuthor')
-    .where('session.createdBy.id = :id', { id: userId })
-    .orWhere('posts.user.id = :id', { id: userId })
-    .orWhere('votes.user.id = :id', { id: userId })
-    .orderBy('session.created', 'DESC')
-    .getMany();
+  const ids: number[] = await sessionRepository.query(
+    `
+  (
+		select distinct id from sessions where "createdById" = $1
+	)
+	union
+	(
+		select distinct sessions.id from sessions 
+		left join posts on sessions.id = posts."sessionId"
+		where posts."userId" = $1
+	)
+	union
+	(
+		select distinct sessions.id from sessions 
+		left join posts on sessions.id = posts."sessionId"
+		left join votes on posts.id = votes."userId"
+		where votes."userId" = $1
+	)
+  `,
+    [userId]
+  );
+
+  const sessions = await sessionRepository.findByIds(ids, {
+    relations: ['posts', 'posts.votes'],
+    order: { created: 'DESC' },
+  });
 
   return sessions.map(
-    session =>
+    (session) =>
       ({
         created: session.created,
         createdBy: session.createdBy,
@@ -291,21 +302,21 @@ function getParticipans(session: Session) {
   return uniqBy(
     [
       session.createdBy,
-      ...session.posts!.map(p => p.user),
-      ...flattenDeep(session.posts!.map(p => p.votes!.map(v => v.user))),
+      ...session.posts!.map((p) => p.user),
+      ...flattenDeep(session.posts!.map((p) => p.votes!.map((v) => v.user))),
     ].filter(Boolean),
-    u => u.id
+    (u) => u.id
   );
 }
 
 function numberOfVotes(type: VoteType, session: Session) {
   return session.posts!.reduce<number>((prev, cur) => {
-    return prev + cur.votes!.filter(v => v.type === type).length;
+    return prev + cur.votes!.filter((v) => v.type === type).length;
   }, 0);
 }
 
 function numberOfActions(session: Session) {
-  return session.posts!.filter(p => p.action !== null).length;
+  return session.posts!.filter((p) => p.action !== null).length;
 }
 
 export default async function db(): Promise<Store> {