fix(lit): resolve campaign page not updating (#377)

* refactor: various render fixes refactor: minor update * chore: adding comment to modify at a later date
GoogleCloudPlatform · May 13, 2022 · 3271926 · 3271926
1 parent 05879ff
commit 3271926
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 30 deletions.
diff --git a/experimental/client-app/server/proxy.js b/experimental/client-app/server/proxy.js
@@ -22,29 +22,36 @@ const app = express();
 
 const PORT = 3000;
 const HOST = 'localhost';
-const API_SERVICE_URL = 'YOUR API CONTAINER URL HERE';
+// TODO: Remove hardcode & make dynamic
+const API_SERVICE_URL = 'https://api-pwrmtjf4hq-uc.a.run.app';
 
 // Logging
 app.use(morgan('dev'));
 app.use(cors());
 
-app.use('/campaigns', createProxyMiddleware({
-  target: API_SERVICE_URL,
-  headers: {
-    accept: "application/json",
-    method: "GET",
-  },
-  changeOrigin: true
-}));
+app.use(
+  '/campaigns',
+  createProxyMiddleware({
+    target: API_SERVICE_URL,
+    headers: {
+      accept: 'application/json',
+      method: 'GET',
+    },
+    changeOrigin: true,
+  })
+);
 
-app.use('/viewCampaign?campaign_id=:campaignId', createProxyMiddleware({
-  target: API_SERVICE_URL,
-  headers: {
-    accept: "application/json",
-    method: "GET",
-  },
-  changeOrigin: true
-}));
+app.use(
+  '/viewCampaign?campaign_id=:campaignId',
+  createProxyMiddleware({
+    target: API_SERVICE_URL,
+    headers: {
+      accept: 'application/json',
+      method: 'GET',
+    },
+    changeOrigin: true,
+  })
+);
 
 // Start proxy
 app.listen(PORT, HOST, () => {

diff --git a/experimental/client-app/src/components/campaign/campaign-card.js b/experimental/client-app/src/components/campaign/campaign-card.js
@@ -29,16 +29,16 @@ class CampaignCard extends LitElement {
   render() {
     const path = `/campaigns/${this.item.id}`; 
 
-      return html`<div class="card">
+    return html`<div class="card">
       ${this.item && html`
-        <div class="cardImage" style="background-image:url(${this.item.image_url}); background-color: lightgray; background-size: cover; height: 150px;"></div>
+        <div class="cardImage" style="background-image:url(${this.item.imageUrl}); background-color: lightgray; background-size: cover; height: 150px;"></div>
         <div class="cardWrapper">
           <div class="cardContent">
             <div class="title">${this.item.name}</div>
             <div class="description">${this.item.description}</div>
           </div>
           <div class="actionWrapper">
-            <a class="fillButton" href="/donate">Donate</a>
+            <a class="fillButton button" href="/donate">Donate</a>
             <a class="button" href=${path}>Learn more</a>
           </div>
         </div>

diff --git a/experimental/client-app/src/components/campaign/styles/campaignCard.js b/experimental/client-app/src/components/campaign/styles/campaignCard.js
@@ -22,7 +22,8 @@ const campaignStyles =  css`
       margin: 10px;
       border-radius: 10px;
       font-size: 16px;
-      width: 450px;
+      max-width: 450px;
+      min-width: 400px;
       overflow: hidden;
     }
 
@@ -50,6 +51,7 @@ const campaignStyles =  css`
       width: 100%;
     }
 
+    
     .button {
       cursor: pointer;
       background: white;
@@ -58,20 +60,15 @@ const campaignStyles =  css`
       padding: 20px;
       box-shadow: 0 1px 2px #ccc;
       color: #2C67FF;
+      text-decoration: none;
       font-size: 16px;
       font-family: 'Google Sans';
     }
 
     .fillButton {
-      cursor: pointer;
-      color: white;
-      background: #2C67FF;
-      border-radius: 50px;
+      color: #fff !important;
+      background: #2C67FF !important;
       border: 2px solid #2C67FF;
-      padding: 20px;
-      box-shadow: 0 1px 2px #ccc;
-      font-size: 16px;
-      font-family: 'Google Sans';
     }
 `;
 /* stylelint-enable font-family-no-missing-generic-family-keyword */

diff --git a/experimental/client-app/src/containers/campaign/campaign-page.js b/experimental/client-app/src/containers/campaign/campaign-page.js
@@ -36,6 +36,7 @@ class CampaignPage extends connect(store)(LitElement) {
 
   stateChanged(state) {
     this.campaign = state.campaign;
+    this.requestUpdate();
   }
 
   render() {

diff --git a/experimental/client-app/src/containers/campaign/styles/campaignPage.js b/experimental/client-app/src/containers/campaign/styles/campaignPage.js
@@ -18,7 +18,8 @@ import { css } from 'lit';
 const campaignPage =  css`
     .leftPanel,
     .rightPanel {
-      width: 50%;
+      width: inherit;
+      max-width: 50%;
     }
 
     .about,