[IMPROVE] refactor hard-coded component data into parameters (react component props)

.exrc

@@ -0,0 +1 @@
+set shiftwidth=2

.github/workflows/build_and_test.yml

@@ -1,16 +1,21 @@
-name: Build and Test
+name: "Build, Test, Deploy"
 
 on:
   pull_request: #{ types: [ready_for_review] }
   push: { branches: [master] }
   #release: { types: [published] }
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
+env:
+  BUILD_PATH: /tmp/archive.tgz
 jobs:
   bat:
     runs-on: ubuntu-latest
-    if: false
     strategy:
-      matrix: { node: [12, 14] }
+      matrix: { node: [14] }
 
     steps:
       - name: Clone repo
@@ -29,7 +34,7 @@ jobs:
 
       - name: Start cms
         run: cd cms; npm run develop &> /tmp/cms.log &
-        env: { INITIALIZE_DATA: 'true' }
+        env: { INITIALIZE_DATA: "true" }
 
       - name: Check cms running
         uses: actions/github-script@v5
@@ -41,7 +46,7 @@ jobs:
             const http = require('http');
             const {readFileSync} = require('fs');
             core.info('waiting 1 minute for strapi data initialization to complete ..');
-            await new Promise(zzz => setTimeout(zzz, 60 * 1000));
+            await new Promise(zzz => setTimeout(zzz, 2 * 60 * 1000));
             http
               .request(`http://localhost:${process.env.PORT}/_health`, { method: 'HEAD' }, r => {
                 if (r.statusCode === 204 && r.headers.strapi === 'You are so French!')
@@ -81,7 +86,10 @@ jobs:
         run: cd app && npm i --production
 
       - name: Start app
-        run: cd app; npm run dev &>/tmp/app.log &
+        run: |
+          cd app
+          npm run dev &>/tmp/app.log &
+          echo $! > /tmp/app.pid
 
       - name: Check app running
         uses: actions/github-script@v5
@@ -123,37 +131,77 @@ jobs:
       #     echo "app successfully started"
       #   env: { PORT: 3000 }
 
-      # - name: Build app (scalable)
-      #   run: cd app; npm run build
-      #   env: { NEXT_PUBLIC_STRAPI_API_URL: 'http://localhost:1337' }
-
-  #     - name: Build non-scalable app build archive
-  #       run: cd app; tar zcvf /tmp/site.tgz out
-
-  #     - name: Upload archive
-  #       uses: actions/upload-artifact@v2
-  #       with:
-  #         name: non_scalable_build
-  #         path: /tmp/site.tgz
-
-  # deploy:
-  #   runs-on: ubuntu-latest
-  #   if: github.event_name == 'release'
-  #   needs: [bat]
-
-  #   steps:
-  #     - name: Get non-scalable build
-  #       uses: actions/download-artifact@v2
-  #       with:
-  #         name: non_scalable_build
-  #         path: /tmp/
-
-  #     - name: Deploy
-  #       uses: debdutdeb/rc4community.deploy.action@main
-  #       with:
-  #         remote_host: ${{ secrets.REMOTE_HOST }}
-  #         remote_host_port: ${{ secrets.REMOTE_PORT }}
-  #         ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }}
-  #         remote_user: ${{ secrets.SSH_USER }}
-  #         source: /tmp/site.tgz
-  #         destination: ${{ secrets.DEPLOY_DESTINATION }}
+      - name: Build prod app
+        run: |
+          pkill -9 -F /tmp/app.pid
+          cd app; npm run build
+        env: { NEXT_PUBLIC_STRAPI_API_URL: "http://localhost:1337" }
+
+      - name: Generate archive
+        run: |
+          cd app
+          echo $GITHUB_SHA > /tmp/.github_sha
+          echo $GITHUB_REF > /tmp/.github_ref
+          tar zcvf ${{ env.BUILD_PATH }} \
+            .next \
+            ecosystem.config.js \
+            next.config.js \
+            package-lock.json \
+            package.json \
+            /tmp/.github_sha \
+            /tmp/.github_ref
+
+      - name: Upload archive
+        if: ${{ github.event_name == 'push' }}
+        uses: actions/upload-artifact@v3
+        with:
+          name: build
+          path: ${{ env.BUILD_PATH }}
+
+  deploy:
+    runs-on: ubuntu-latest
+    if: ${{ github.event_name == 'push' }} # don't wanna run on prs
+    needs: [bat]
+
+    steps:
+      - name: Download build archive
+        uses: actions/download-artifact@v3
+        with:
+          name: build
+          path: /tmp/
+
+      # - name: Push archive
+      #   uses: easingthemes/ssh-deploy@main
+      #   env:
+      #     SOURCE: ${{ env.BUILD_PATH }}
+      #     TARGET: ${{ secrets.TARGET }}
+      #     REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
+      #     REMOTE_USER: ${{ secrets.REMOTE_USER }}
+      #     REMOTE_PORT: ${{ secrets.REMOTE_PORT }}
+      #     SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
+      #
+      # - name: Start remote service
+      #   uses: appleboy/ssh-action@master
+      #   with:
+      #     host: ${{ secrets.REMOTE_HOST }}
+      #     port: ${{ secrets.REMOTE_PORT }}
+      #     username: ${{ secrets.REMOTE_USER }}
+      #     key: ${{ secrets.SSH_PRIVATE_KEY }}
+      #     script: |
+      #       target=${{ secrets.TARGET }}
+      #       build_path=${{ secrets.BUILD_PATH }}
+      #       cd $target
+      #       tar zxf $build_path
+      #       rm -f $build_path
+      #       npm install --production
+      #       pm2 reload ecosystem.config.js
+
+      - name: Push archive and start service
+        uses: debdutdeb/rc4community.deploy.action@main
+        with:
+          remote_host: ${{ secrets.REMOTE_HOST }}
+          remote_port: ${{ secrets.REMOTE_PORT }}
+          remote_user: ${{ secrets.REMOTE_USER }}
+          ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }}
+          source: ${{ env.BUILD_PATH }}
+          target: ${{ secrets.TARGET }}

README.md

@@ -3,6 +3,24 @@
 ![build and grow massive online communities with rocket.chat](./assets/readme-banner.png)
 
 ![build and grow massive online communities with rocket.chat](./assets/readme-hero.png)
+
+<h2 align='center'>🚀 Features 🚀</h2>
+<ul>
+  <li>every part of the system scalable to handle from one to over a million online community members</li>
+  <li>engage your community at Rocket.Chat, Github, Discourse, Discord - wherever they may be</li>
+  <li>innovative reactJS components enhanced with fullstack behaviors</li>
+  <li>choice of Identity Management - popular SaaS (auth0, firebase) and open source (gluu, keycloak OpenID Connect)</li>
+  <li>full virtual conference handling</li>
+  <li>modern profile and superprofile factoring</li>
+  <li>supports flauna for scaled persistence</li>
+  <li>fine-grained full-stack optimization control - static, server side generation, per-request</li>
+  <li>designed for world-scale computing at the edge from day one</li>
+  <li>JAMStack and beyond, "no compromises" design</li>
+  <li>supports NextJS and Vercel pay-as-you-grow scaled deployments</li>
+  <li>easy assembly of reusable components for flexible adaptive systems</li>
+  <li>ultra-light-weight and re-imagined UX for next generation community builder / developer experience</li>
+</uL>
+
 <h2 align='center'>🚀 Community Builder quick start 🚀</h2>
 <p align='center'> Customize - Deploy - Manage </p>
 
@@ -16,6 +34,7 @@ gitpod.io/#https://github.com/RocketChat/RC4Community
 
 Start designing and customizing your community management system!
 
+
 <h2 align='center'>🚀 Developer quick start 🚀</h2>
 <p align='center'> Development - Build - Production </p>
 
@@ -25,10 +44,10 @@ During development, our data provider is a headless CMS, strapi.
 
 Note that it is used only during development and build time, not during production.
 
-By default, strapi listens on port 1337. If you're using WSL2 on Windows and also running Docker Desktop, port 1337 may not be available on your system. To use port 3000 instead, change this line in `config/server.js` file:
+By default, strapi listens on port 1337. If you're using WSL2 on Windows and also running Docker Desktop, port 1337 may not be available on your system. To use port 3000 instead, set the environment variable `PORT` to 3000.
 
 ```
-  port: env.int('PORT', 3000),
+export PORT=3000
 ```
 
 Start strapi:

app/.env.local.sample

@@ -19,3 +19,27 @@ NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=
 # for cookies signing
 COOKIE_SECRET_CURRENT=
 COOKIE_SECRET_PREVIOUS=
+
+### BEGIN: Environment variables for keycloak
+NEXTAUTH_SECRET="some random string for signing"
+NEXTAUTH_URL="base url of rc4community"
+KEYCLOAK_ID='keycloak client id'
+KEYCLOAK_SECRET='keycloak client secret'
+KEYCLOAK_ISSUER='http://localhost:8080/realms/{Realm Name}'
+### END: Environment variables for keycloak
+
+### BEGIN: Environment variables for RocketChat OAuth legacy
+NEXTAUTH_SECRET="some random string for signing"
+NEXTAUTH_URL="base url of rc4community"
+ROCKETCHAT_CLIENT_ID="client id"
+ROCKETCHAT_CLIENT_SECRET="client secret"
+ROCKETCHAT_URL="base url of rocket chat server"
+### END: Environment variables for RocketChat OAuth legacy
+
+NEXT_PUBLIC_ROCKET_CHAT_GREENROOM_RTMP="rtmp://bkk.contribute.live-video.net/app/{stream_key}"
+
+# STREAM-SOURCE-Environment
+
+NEXT_PUBLIC_IPINFO_TOKEN = "6ea41123456765"
+NEXT_PUBLIC_SERVER_STREAM_LINK0 = "https://{some_url}/hls/stream.m3u8"
+NEXT_PUBLIC_SERVER_STREAM_LINK1 = "https://{some_other_url}/hls/stream.m3u8"

app/.gitignore

@@ -32,3 +32,4 @@ yarn-error.log*
 
 # vercel
 .vercel
+

app/components/animation.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import styles from '../styles/Mainstage.module.css';
+
+function getRandomInt(max) {
+  return Math.floor(Math.random() * Math.floor(max));
+}
+
+const Animation = React.memo(() => {
+  console.log('animation rerendered');
+  return (
+    <span className={styles.track}>
+      {Array.apply(null, { length: 4 }).map(() => (
+        <p
+          className={styles.emojiAnimationContainer}
+          style={{
+            color: 'red',
+            overflow: 'hidden',
+            animationDelay: `${getRandomInt(2000)}ms`,
+            transform: `translate(${getRandomInt(40)}px, ${getRandomInt(0)}px)`,
+          }}
+        >
+          ❤
+        </p>
+      ))}
+      {Array.apply(null, { length: 4 }).map(() => (
+        <p
+          className={styles.emojiAnimationContainer}
+          style={{
+            overflow: 'hidden',
+            animationDelay: `${getRandomInt(2000)}ms`,
+            transform: `translate(${getRandomInt(40)}px, ${getRandomInt(0)}px)`,
+          }}
+        >
+          👍
+        </p>
+      ))}
+    </span>
+  );
+});
+
+export default Animation;

app/components/auth/NoUserAvatar.js

@@ -4,7 +4,7 @@ export function NoUserAvatar({size,name}){
     const char = name ? name.charAt(0) : null;
     return (
         <div 
-            className="d-flex justify-content-center align-items-center"
+            className="d-flex justify-content-center align-items-center text-capitalize"
             style={{
                 width: `${size}px`, 
                 height: `${size}px`, 

app/components/auth/keycloak/README.md

@@ -0,0 +1,79 @@
+
+### Keycloak configuration
+1. Create an openid-connect client in Keycloak with "confidential" as the "Access Type". See [https://www.keycloak.org/docs/latest/server_admin/#_oidc_clients](https://www.keycloak.org/docs/latest/server_admin/#_oidc_clients).
+
+2. To add profile picture attribute received from providers, You will have to create a mapper to set profile picture url into `picture` attribute.
+
+### Set up
+We have used `next-auth` npm package to configure keycloak authentication. Read more about it [here](https://next-auth.js.org/)
+
+1. set up environment variables for firebase config in `.env.local`
+
+```
+### BEGIN: Environment variables for keycloak
+NEXTAUTH_SECRET="some random string for signing"
+NEXTAUTH_URL="http://localhost:3000"
+KEYCLOAK_ID='keycloak client id'
+KEYCLOAK_SECRET='keycloak client secret'
+KEYCLOAK_ISSUER='http://localhost:8080/realms/{Realm Name}'
+### END: Environment variables for keycloak
+```
+
+2. Wrap the app with `SessionProvider` in _app.js in the following way
+```
+import '/styles/globals.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import Layout from '../components/layout';
+import SSRProvider from 'react-bootstrap/SSRProvider';
+import {SessionProvider} from 'next-auth/react';
+
+function MyApp({ Component, pageProps: {session, ...pageProps}}) {
+  return (
+    <SSRProvider>
+      <SessionProvider session={session}>
+        <Layout menu={pageProps}>
+          <Component {...pageProps} />
+        </Layout>
+      </SessionProvider>
+    </SSRProvider>
+  );
+}
+
+export default MyApp;
+
+```
+3. Add `KeycloakAuthMenuButton` in menubar.
+```
+...
+import {KeycloakAuthMenuButton} from './auth/keycloak';
+...
+
+export default function Menubar(props) {
+ ...
+
+  return (
+    <Container fluid className='border-bottom '>
+      <Navbar expand='lg' className=' bg-white mx-4 my-2'>
+        ...
+        <div className="mx-1">
+          <KeycloakAuthMenuButton/>
+        </div>
+      </Navbar>
+    </Container>
+  );
+}
+```
+4. Use `useSession()` webhook to get user data.
+```
+import { useSession } from "next-auth/react";
+...
+...
+export default Component(){
+  const {data:session} = useSession();
+  if(!session)
+    return <div/>;
+  const user = session.user;
+    return <div>Hello ${user.name}</div>
+}
+```
+5. Sign out using custom sign out function `signOutKC()`. This will sign out user from keycloak as well.

app/components/auth/keycloak/index.js

@@ -0,0 +1,7 @@
+import keycloakAuthMenuButtonModule from "./ui/KeycloakAuthMenuButton";
+import keycloakAuthUIModule from "./ui/KeycloakAuthUI";
+import signOutKCModule from './lib/signOutKC';
+
+export const KeycloakAuthMenuButton = keycloakAuthMenuButtonModule;
+export const KeycloakAuthUI = keycloakAuthUIModule;
+export const signOutKC = signOutKCModule;