Merge pull request #911 from ONEARMY/master

v1.0.3

README.md

@@ -26,7 +26,9 @@ Society and the environment are kind of screwed 💩 in many ways. We think free
 ## 🤝   Contributions
 
 Contributions, issues and feature requests are very welcome.
-Please make sure to read the [Contributing Guide](/CONTRIBUTING.md) before making a pull request.
+Please make sure to read the [Contributing Guide](/CONTRIBUTING.md) before making a pull request. 
+
+It also covers lots of handy additional information such as setting up a local server, or finding [good first issues](https://github.com/ONEARMY/community-platform/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%22++label%3A%22Help+wanted%22+) to work on
 
 ## 🌟   Core Team
 

cypress/integration/common.spec.ts

@@ -23,41 +23,41 @@ describe('[Common]', () => {
 
   it('[Page Navigation]', () => {
     cy.visit('/how-to')
-    cy.step('Feedback button opens the survey in a new tab')
-    cy.get('a[data-cy=feedback][target=_blank]')
-      .should('have.attr', 'href')
-      .and(
-        'eq',
-        'https://docs.google.com/forms/d/e/1FAIpQLSd3nevXb6iewap1lkFPWQxyerLsndcRkocv4QXIL3iLIyzazA/viewform?usp=pp_url&entry.1856170488=',
-      )
+    // cy.step('Feedback button opens the survey in a new tab')
+    // cy.get('a[data-cy=feedback][target=_blank]')
+    //   .should('have.attr', 'href')
+    //   .and(
+    //     'eq',
+    //     'https://docs.google.com/forms/d/e/1FAIpQLSd3nevXb6iewap1lkFPWQxyerLsndcRkocv4QXIL3iLIyzazA/viewform?usp=pp_url&entry.1856170488=',
+    //   )
 
     cy.step('Go to Events page')
     cy.get('[data-cy=page-link]')
       .contains('Events')
       .click()
     cy.url().should('include', '/events')
-    cy.get('[data-cy=feedback] > button').should('be.visible')
+    // cy.get('[data-cy=feedback] > button').should('be.visible')
 
     cy.step('Go to Map page')
     cy.get('[data-cy=page-link]')
       .contains('Map')
       .click()
     cy.url().should('include', '/map')
-    cy.get('[data-cy=feedback] > button').should('be.visible')
+    // cy.get('[data-cy=feedback] > button').should('be.visible')
 
     cy.step('Go to Academy page')
     cy.get('[data-cy=page-link]')
       .contains('Academy')
       .click()
     cy.url().should('include', '/academy')
-    cy.get('[data-cy=feedback] > button').should('be.visible')
+    // cy.get('[data-cy=feedback] > button').should('be.visible')
 
     cy.step('Go to How-to page')
     cy.get('[data-cy=page-link]')
       .contains('How-to')
       .click()
     cy.url().should('include', '/how-to')
-    cy.get('[data-cy=feedback] > button').should('be.visible')
+    // cy.get('[data-cy=feedback] > button').should('be.visible')
   })
 
   describe('[User Menu]', () => {

cypress/integration/howto/read.spec.ts

@@ -116,6 +116,7 @@ describe('[How To]', () => {
         cy.step('How-to has basic info')
         cy.get('[data-cy=how-to-basis]').then($summary => {
           expect($summary).to.contain('By howto_creator', 'Author')
+          expect($summary).to.contain('Last edit:', 'Edit')
           expect($summary).to.contain('Make an interlocking brick', 'Title')
           expect($summary).to.contain(
             'show you how to make a brick using the injection machine',

firestore.rules.WiP

@@ -0,0 +1,31 @@
+// WiP - CC - 2020-02-24
+// As part of future security update will make better use of firestore rules, as stubbed out below
+
+service cloud.firestore {
+	// rules will apply to all docs in database
+  match /databases/{database}/documents {
+    // Function to check whether request user has specific permission set in user database
+    function hasUserRole(username,role){
+      // TODO - look up a profile to see if the user has specific role (e.g. admin)
+      // NOTE - this is not currently possible as the username is not sent with a request
+      // but could be made possible by setting the firebase auth name to the username
+      // and ensuring all users had a userRoles property
+      // NOTE 2 - possible code below but would need testing (https://firebase.google.com/docs/reference/rules/rules.List)
+      // return role in get(/databases/$(database)/documents/v3_users/$(username)).data.userRoles
+      return true
+    }
+		// Function to check if request to modify a document is by the auth owner
+    function isSameUser(username){
+      return get(/databases/$(database)/documents/v3_users/$(username)).data._authID==request.auth.uid
+    }
+    match /v3_users/{username} {
+    allow read, write: if hasUserRole('admin')
+    allow read,write
+    }
+		// users can read/write their own user docs    
+    match /v3_users/{username} {
+    allow read, write: if isSameUser(username)
+    }
+	}
+}
+

functions/src/Integrations/firebase-email.ts

@@ -0,0 +1,29 @@
+import * as functions from 'firebase-functions'
+import { IDBEndpoint } from '../models'
+import { db } from '..//Firebase/firestoreDB'
+
+const USER_ENDPOINT: IDBEndpoint = 'v3_users'
+
+/**
+ * Example function to show how an automated email can be triggered
+ * In this case it is being used temporarily to help debug
+ * https://github.com/ONEARMY/community-platform/issues/883
+ */
+export const notifyEmailDemo = functions.firestore
+  .document(`${USER_ENDPOINT}/precious-plastic`)
+  .onWrite(async (change, context) => {
+    return db.collection('mail').add({
+      to: 'chris.m.clarke@live.co.uk',
+      message: {
+        subject: 'PP Profile Edited',
+        html: `
+          <p>Just thought you should know that an edit has been made to your profile</p>
+          <h2>Before</h2>
+          <code>${JSON.stringify(change.before.data())}</code>
+          <h2>After</h2>
+          <code>${JSON.stringify(change.after.data())}</code>
+          <p>To see a clear breakdown of differences you could copy-paste each section into http://www.jsondiff.com</p>
+        `,
+      },
+    })
+  })

functions/src/Integrations/firebase-userBackup.ts

@@ -0,0 +1,22 @@
+import * as functions from 'firebase-functions'
+import { DBDoc, IDBEndpoint } from '../models'
+const USERS_ENDPOINT: IDBEndpoint = 'v3_users'
+
+/**
+ * Automatically create user revision on update
+ * Nests revision as subcollection of original document,
+ * labeled by previous _modified timestamp
+ */
+export const FirebaseUserBackup = functions.firestore
+  .document(`${USERS_ENDPOINT}/{username}`)
+  .onUpdate((change, context) => {
+    const { before, after } = change
+    const rev = before.data() as DBDoc
+    if (rev && rev._modified) {
+      return before.ref
+        .collection('revisions')
+        .doc(rev._modified)
+        .set(rev)
+    }
+    return null
+  })

functions/src/index.ts

@@ -3,6 +3,8 @@ import { weeklyTasks, dailyTasks } from './exports/tasks'
 import { DH_Exports } from './DaveHakkensNL'
 import * as IntegrationsSlack from './Integrations/firebase-slack'
 import * as IntegrationsDiscord from './Integrations/firebase-discord'
+import { FirebaseUserBackup } from './Integrations/firebase-userBackup'
+import * as IntegrationsEmail from './Integrations/firebase-email'
 
 // the following endpoints are exposed for use by various triggers
 // see individual files for more informaiton
@@ -18,3 +20,5 @@ exports.notifyNewEvent = IntegrationsSlack.notifyNewEvent
 exports.notifyPinAccepted = IntegrationsDiscord.notifyPinAccepted
 exports.notifyHowToAccepted = IntegrationsDiscord.notifyHowToAccepted
 exports.notifyEventAccepted = IntegrationsDiscord.notifyEventAccepted
+exports.firebaseUserBackup = FirebaseUserBackup
+exports.emailNotificationDemo = IntegrationsEmail.notifyEmailDemo

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "precious-plastic-community-plateform",
-  "version": "1.0.1",
+  "name": "precious-plastic-community-platform",
+  "version": "1.0.3",
   "private": true,
   "scripts": {
     "start": "node scripts/start.js",

src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import TagDisplay from 'src/components/Tags/TagDisplay/TagDisplay'
-import differenceInDays from 'date-fns/difference_in_days'
+import { format } from 'date-fns'
 import { IHowtoDB } from 'src/models/howto.models'
 import Heading from 'src/components/Heading'
 import Text from 'src/components/Text'
@@ -29,15 +29,17 @@ export default class HowtoDescription extends React.PureComponent<IProps, any> {
     super(props)
   }
 
-  public durationSincePosted(postDate: Date) {
-    const daysSince: number = differenceInDays(new Date(), new Date(postDate))
-    switch (daysSince) {
-      case 0:
-        return 'today'
-      case 1:
-        return `${daysSince} day ago`
-      default:
-        return `${daysSince} days ago`
+  private dateCreatedByText(howto: IHowtoDB): string {
+    return format(new Date(howto._created), 'DD-MM-YYYY')
+  }
+
+  private dateLastEditText(howto: IHowtoDB): string {
+    const lastModifiedDate = format(new Date(howto._modified), 'DD-MM-YYYY')
+    const creationDate = format(new Date(howto._created), 'DD-MM-YYYY')
+    if (lastModifiedDate !== creationDate) {
+      return 'Last edit: ' + format(new Date(howto._modified), 'DD-MM-YYYY')
+    } else {
+      return ''
     }
   }
 
@@ -95,17 +97,26 @@ export default class HowtoDescription extends React.PureComponent<IProps, any> {
               ))}
           </Flex>
           <Text auxiliary mt={3} mb={2}>
-            By {howto._createdBy}
-            &nbsp;|&nbsp;
-            <Text inline color={'grey'}>
-              {this.durationSincePosted(new Date(howto._created))}
+            By{' '}
+            <Link
+              sx={{
+                textDecoration: 'underline',
+                color: 'inherit',
+              }}
+              to={'/u/' + howto._createdBy}
+            >
+              {howto._createdBy}
+            </Link>{' '}
+            <Text inline> {this.dateCreatedByText(howto)}</Text>
+            <Text auxiliary sx={{ color: '#b7b5b5 !important' }} mt={1} mb={2}>
+              {this.dateLastEditText(howto)}
+            </Text>
+            <Heading medium mt={2} mb={1}>
+              {howto.title}
+            </Heading>
+            <Text preLine paragraph>
+              {howto.description}
             </Text>
-          </Text>
-          <Heading medium mt={2} mb={1}>
-            {howto.title}
-          </Heading>
-          <Text preLine paragraph>
-            {howto.description}
           </Text>
 
           <Flex mt={4} mb={2}>
@@ -143,7 +154,11 @@ export default class HowtoDescription extends React.PureComponent<IProps, any> {
           sx={{ position: 'relative' }}
         >
           <Image
-            sx={{ objectFit: 'cover', width: '100%', height: '450px' }}
+            sx={{
+              objectFit: 'cover',
+              width: '100%',
+              height: '450px',
+            }}
             src={howto.cover_image.downloadUrl}
             alt="how-to cover"
           />

src/pages/Howto/Content/Howto/Step/ImageGallery.tsx

@@ -39,7 +39,6 @@ const ImageWithPointer = styled(Image)`
   width: 100%;
   height: 450px;
   object-fit: cover;
-  border-radius: 0px 8px 0px 5px;
 `
 
 export default class ImageGallery extends React.PureComponent<IProps, IState> {

src/pages/Howto/Content/Howto/Step/Step.tsx

@@ -52,6 +52,7 @@ export default class Step extends React.PureComponent<IProps> {
             flex={9}
             width={1}
             flexDirection={['column', 'column', 'row']}
+            overflow={'hidden'}
           >
             <Flex width={[1, 1, 4 / 9]} py={4} px={4} flexDirection={'column'}>
               <Heading medium mb={0}>

src/pages/PageList.tsx

@@ -61,7 +61,11 @@ const academy = {
   ),
   title: 'Academy',
   description: 'Demo external page embed',
-  customStyles: { position: 'absolute', height: '100%', width: '100%' },
+  customStyles: {
+    position: 'absolute',
+    height: 'calc(100% - 85px)',
+    width: '100%',
+  },
   fullPageWidth: true,
 }
 const events = {