🚀 (#17)

* Well let's try this ! (#16)

* typo into release pipeline

* Feat/add username in header (#14)

* feat: add user in redux

* feat: update app and topbar components

* feat: avoid user to autolike his comment (#15)

* feat: add user in redux

* feat: update app and topbar components

* feat: avoid user to autolike his comment

Co-authored-by: Yann RENAUDIN <4748419+emyann@users.noreply.github.com>

.github/workflows/build.yml

@@ -13,7 +13,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Build Docker image
-        env: # Or as an environment variable
+        env:
           FTH_REGISTRY_PASSWORD: ${{ secrets.FTH_REGISTRY_PASSWORD }}
           FTH_REGISTRY_USERNAME: ${{ secrets.FTH_REGISTRY_USERNAME }}
         run: |

.github/workflows/cd-dev.yml

@@ -0,0 +1,39 @@
+on:
+  push:
+    branches:
+      - dev
+jobs:
+  build:
+    name: Releasing
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Build Docker image
+        env: # Or as an environment variable
+          FTH_REGISTRY_PASSWORD: ${{ secrets.FTH_REGISTRY_PASSWORD }}
+          FTH_REGISTRY_USERNAME: ${{ secrets.FTH_REGISTRY_USERNAME }}
+        run: |
+          make build-images
+          make push-images
+      - name: Azure Login
+        uses: Azure/login@v1
+        with:
+          creds: ${{ secrets.AZURE_CREDENTIALS }}
+      - name: Helm tool installer
+        uses: Azure/setup-helm@v1
+      - name: Kubectl tool installer
+        uses: Azure/setup-kubectl@v1
+      - name: Get Kubeconfig
+        env: # Or as an environment variable
+          AKS_CLUSTER_NAME: ${{ secrets.AKS_CLUSTER_NAME }}
+          AKS_CLUSTER_RG_NAME: ${{ secrets.AKS_CLUSTER_RG_NAME }}
+        run: |
+          az aks get-credentials -n $AKS_CLUSTER_NAME -g $AKS_CLUSTER_RG_NAME
+          kubectl get pods --all-namespaces
+      - name: Update Charts
+        run: |
+          make helm-upgrade-dev-publisher
+          make helm-upgrade-dev-worker
+          make helm-upgrade-dev-client
+          kubectl get pods --all-namespaces
+          kubectl apply -f charts/ingress/ingress.yaml

.github/workflows/cd.yml

@@ -28,3 +28,4 @@ jobs:
           make helm-upgrade-worker
           make helm-upgrade-client
           kubectl get pods --all-namespaces
+          kubectl apply -f charts/ingress/ingress.yaml

Makefile

@@ -148,6 +148,12 @@ helm-upgrade-publisher:
 	# Dirty hack to bypass redis auth for demo
 	helm upgrade ihaq-api charts/api --set image.tag=$(IHAQ_VERSION) --set redis.usePassword=false
 
+# Yea.... this can be combined with helm-upgrade-client ! Rush hour !
+.PHONY: helm-upgrade-dev-publisher
+helm-upgrade-dev-publisher:
+	# Well presentation is tonight... hardcoding values but needs to be cleaned !
+	helm upgrade ihaq-dev-api charts/api --set image.tag=$(IHAQ_VERSION) --set redis.usePassword=false --set params.redisSvcName=ihaq-dev-api-redis-master
+
 ###############################################################################
 # WORKER
 ###############################################################################
@@ -178,6 +184,12 @@ push-mutable-worker-image: registry-login
 helm-upgrade-worker:
 	helm upgrade ihaq-worker charts/worker --set image.tag=$(IHAQ_VERSION)
 
+# Yea.... this can be combined with helm-upgrade-client ! Rush hour !
+.PHONY: helm-upgrade-dev-worker
+helm-upgrade-dev-worker:
+	# Well presentation is tonight... hardcoding values but needs to be cleaned !
+	helm upgrade ihaq-dev-worker charts/worker --set image.tag=$(IHAQ_VERSION) --set params.redisSvcName=ihaq-dev-api-redis-master
+
 ###############################################################################
 # CLIENT
 ###############################################################################
@@ -202,3 +214,9 @@ push-mutable-client-image: registry-login
 .PHONY: helm-upgrade-client
 helm-upgrade-client:
 	helm upgrade ihaq-client charts/client --set image.tag=$(IHAQ_VERSION)
+
+# Yea.... this can be combined with helm-upgrade-client ! Rush hour !
+.PHONY: helm-upgrade-dev-client
+helm-upgrade-dev-client:
+	# Well presentation is tonight... hardcoding values but needs to be cleaned !
+	helm upgrade ihaq-dev-client charts/client --set image.tag=$(IHAQ_VERSION) --set params.apiUrl=dev.api.ihaq.juin.me

charts/api/templates/deployment.yaml

@@ -27,7 +27,7 @@ spec:
             {{- toYaml .Values.securityContext | nindent 12 }}
           image: "{{ .Values.image.repository }}:{{ .Values.image.tag }}"
           imagePullPolicy: {{ .Values.image.pullPolicy }}
-          args: ["-redis-server-name", "ihaq-api-redis-master"]
+          args: ["-redis-server-name", "{{ .Values.params.redisSvcName }}"]
           ports:
             - name: http
               containerPort: 8080

charts/api/values.yaml

@@ -9,6 +9,9 @@ image:
   tag: production
   pullPolicy: Always
 
+params:
+  redisSvcName: ihaq-api-redis-master
+
 imagePullSecrets: []
 nameOverride: ""
 fullnameOverride: ""
@@ -35,19 +38,6 @@ service:
   type: NodePort
   port: 8080
 
-ingress:
-  enabled: false
-  annotations: {}
-    # kubernetes.io/ingress.class: nginx
-    # kubernetes.io/tls-acme: "true"
-  hosts:
-    - host: chart-example.local
-      paths: []
-  tls: []
-  #  - secretName: chart-example-tls
-  #    hosts:
-  #      - chart-example.local
-
 resources: {}
   # We usually recommend not to specify default resources and to leave this as a conscious
   # choice for the user. This also increases chances charts run on environments with little

charts/client/templates/deployment.yaml

@@ -27,7 +27,7 @@ spec:
             {{- toYaml .Values.securityContext | nindent 12 }}
           image: "{{ .Values.image.repository }}:{{ .Values.image.tag }}"
           imagePullPolicy: {{ .Values.image.pullPolicy }}
-          args: ["-i", "api.ihaq.juin.me"]
+          args: ["-i", "{{ .Values.params.apiUrl }}"]
           ports:
             - name: http
               containerPort: 80

charts/client/values.yaml

@@ -10,7 +10,7 @@ image:
   pullPolicy: Always
 
 params:
-  API_SVC: publisher-svc
+  apiUrl: api.ihaq.juin.me
 
 imagePullSecrets: []
 nameOverride: ""

charts/ingress/ingress.yaml

@@ -20,3 +20,17 @@ spec:
             backend:
               serviceName: ihaq-client
               servicePort: http
+    - host: dev.api.ihaq.juin.me
+      http:
+        paths:
+          - path: /
+            backend:
+              serviceName: ihaq-dev-api
+              servicePort: 8080
+    - host: dev.ihaq.juin.me
+      http:
+        paths:
+          - path: /
+            backend:
+              serviceName: ihaq-dev-client
+              servicePort: http

charts/worker/templates/deployment.yaml

@@ -27,7 +27,7 @@ spec:
             {{- toYaml .Values.securityContext | nindent 12 }}
           image: "{{ .Values.image.repository }}:{{ .Values.image.tag }}"
           imagePullPolicy: {{ .Values.image.pullPolicy }}
-          args: ["-redis-server-name", "ihaq-api-redis-master"]
+          args: ["-redis-server-name", "{{ .Values.params.redisSvcName }}"]
           resources:
             {{- toYaml .Values.resources | nindent 12 }}
       {{- with .Values.nodeSelector }}

charts/worker/values.yaml

@@ -9,6 +9,9 @@ image:
   tag: production
   pullPolicy: Always
 
+params:
+  redisSvcName: ihaq-api-redis-master
+
 imagePullSecrets: []
 nameOverride: ""
 fullnameOverride: ""

cmd/web/src/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Container from '@material-ui/core/Container';
 
 import ProTip from './ProTip';
@@ -9,17 +9,27 @@ import Questions from './Questions';
 import { userService } from './services/users.service';
 import { configService } from './services/config.service';
 import { Leaderboard } from './Leaderboard';
+import { useDispatch } from 'react-redux';
+import { AppDispatch } from './store/store';
+import { saveUser } from './store/user';
 export const API_SVC = configService.API_URL;
 console.log('API Endpoint =', API_SVC);
 
 export const socket = new WebSocket('ws://' + API_SVC + '/ws');
 
-socket.onopen = () => {
-  userService.saveUsernameLocally();
-  console.log('WS Successfully Connected');
-};
-
 export default function App() {
+  const dispatch = useDispatch<AppDispatch>();
+
+  useEffect(() => {
+    socket.onopen = () => {
+      userService.saveUsernameLocally();
+      const userId = userService.getUsername();
+      console.log('WS Successfully Connected');
+      if (userId) {
+        dispatch(saveUser({ userId }));
+      }
+    };
+  }, []);
   return (
     <Container>
       <TopBar />

cmd/web/src/Questions.tsx

@@ -16,6 +16,7 @@ import { socket } from './App';
 // @ts-ignore
 import { Rings as Identicon } from 'react-identicon-variety-pack';
 import { Button, Grid } from '@material-ui/core';
+import { getUser } from './store/user';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -32,6 +33,8 @@ const useStyles = makeStyles((theme: Theme) =>
 export default function AlignItemsList() {
   const classes = useStyles();
   const dispatch = useDispatch<AppDispatch>();
+  const user = useSelector(getUser);
+
   // Messages is updated everytime the store is updated
   const messages = useSelector(getMessagesWithUser);
   useEffect(() => {
@@ -63,6 +66,7 @@ export default function AlignItemsList() {
                     authorName={item.author.name}
                     likes={item.message.likes}
                     onLike={() => dispatch(likeMessage(item.message.id))}
+                    disableLikeButton={item.author.id === user.id}
                   />
                 </Grid>
               </Grid>
@@ -77,15 +81,16 @@ interface MessageSubtextProps {
   likes: number;
   authorName: string;
   onLike: () => void;
+  disableLikeButton: boolean;
 }
-const MessageSubtext: FC<MessageSubtextProps> = ({ authorName, likes, onLike }) => {
+const MessageSubtext: FC<MessageSubtextProps> = ({ authorName, likes, onLike, disableLikeButton }) => {
   return (
     <Grid container alignItems="center" justify="flex-start">
       <Grid item>
         <Typography variant="body2">- by {authorName}</Typography>
       </Grid>
       <Grid item>
-        <Button variant="text" color="default" onClick={onLike} startIcon={<FavoriteBorder />}>
+        <Button variant="text" color="default" onClick={onLike} startIcon={<FavoriteBorder />} disabled={disableLikeButton}>
           {likes}
         </Button>
       </Grid>