Fix #972 Add country flags at username

Display of flags for HowTos (List and detail) implemented TODO: Create firestore trigger to update when user changes location
ONEARMY · Sep 5, 2020 · dc4ad10 · dc4ad10
1 parent 372b225
commit dc4ad10
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 16 deletions.
diff --git a/src/components/HowToCard/HowToCard.tsx b/src/components/HowToCard/HowToCard.tsx
@@ -4,14 +4,14 @@ import Text from 'src/components/Text'
 import Flex from 'src/components/Flex'
 import ModerationStatusText from 'src/components/ModerationStatusText'
 import { Link } from 'src/components/Links'
+import FlagIconEvents from 'src/components/Icons/FlagIcon/FlagIcon'
 import TagDisplay from 'src/components/Tags/TagDisplay/TagDisplay'
 import { IHowtoDB } from '../../models/howto.models'
 import Heading from 'src/components/Heading'
 
 interface IProps {
   howto: IHowtoDB
 }
-
 export const HowToCard = (props: IProps) => (
   <Flex
     card
@@ -45,7 +45,14 @@ export const HowToCard = (props: IProps) => (
         <Heading small clipped color={'black'}>
           {props.howto.title}
         </Heading>
-        <Text auxiliary>By {props.howto._createdBy}</Text>
+        <Flex alignItems="center">
+          {props.howto._creatorCountry && (
+            <FlagIconEvents code={props.howto._creatorCountry} />
+          )}
+          <Text auxiliary my={2} ml={1}>
+            By {props.howto._createdBy}
+          </Text>
+        </Flex>
         <Flex mt={4}>
           {props.howto.tags &&
             Object.keys(props.howto.tags).map(tag => {

diff --git a/src/mocks/howto.mock.tsx b/src/mocks/howto.mock.tsx
@@ -37,6 +37,7 @@ export const HOWTO_MOCK: IHowto[] = [
     ...MOCK_DB_META('howTo1'),
     _createdBy: 'ExampleUser',
     moderation: 'draft',
+    _creatorCountry: 'nl',
   },
   {
     cover_image: exampleUploadImage,
@@ -62,6 +63,7 @@ export const HOWTO_MOCK: IHowto[] = [
     ...MOCK_DB_META('howTo2'),
     _createdBy: 'ExampleUser',
     moderation: 'awaiting-moderation',
+    _creatorCountry: 'fr',
   },
   {
     cover_image: exampleUploadImage,
@@ -87,5 +89,6 @@ export const HOWTO_MOCK: IHowto[] = [
     ...MOCK_DB_META('howTo3'),
     _createdBy: 'ExampleUser',
     moderation: 'accepted',
+    _creatorCountry: 'es',
   },
 ]
diff --git a/src/models/howto.models.tsx b/src/models/howto.models.tsx
@@ -45,4 +45,6 @@ export interface IHowtoFormInput extends IModerable {
   slug: string
   // note, tags will remain optional as if populated {} will be stripped by db (firestore)
   tags?: ISelectedTags
+  // Added to be able to recover on eddit by admin
+  _creatorCountry?: string
 }
diff --git a/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx b/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx
@@ -16,6 +16,7 @@ import { IUser } from 'src/models/user.models'
 import { isAllowToEditContent, emStringToPx } from 'src/utils/helpers'
 import theme from 'src/themes/styled.theme'
 import ArrowIcon from 'src/assets/icons/icon-arrow-select.svg'
+import FlagIconEvents from 'src/components/Icons/FlagIcon/FlagIcon'
 
 interface IProps {
   howto: IHowtoDB
@@ -105,19 +106,24 @@ export default class HowtoDescription extends React.PureComponent<IProps, any> {
             )}
           </Flex>
           <Box mt={3} mb={2}>
-            <Text inline auxiliary>
-              By{' '}
-              <Link
-                sx={{
-                  textDecoration: 'underline',
-                  color: 'inherit',
-                }}
-                to={'/u/' + howto._createdBy}
-              >
-                {howto._createdBy}
-              </Link>{' '}
-              | Published on {this.dateCreatedByText(howto)}
-            </Text>
+            <Flex alignItems="center">
+              {howto._creatorCountry && (
+                <FlagIconEvents code={howto._creatorCountry} />
+              )}
+              <Text inline auxiliary my={2} ml={1}>
+                By{' '}
+                <Link
+                  sx={{
+                    textDecoration: 'underline',
+                    color: 'inherit',
+                  }}
+                  to={'/u/' + howto._createdBy}
+                >
+                  {howto._createdBy}
+                </Link>{' '}
+                | Published on {this.dateCreatedByText(howto)}
+              </Text>
+            </Flex>
             <Text auxiliary sx={{ color: '#b7b5b5 !important' }} mt={1} mb={2}>
               {this.dateLastEditText(howto)}
             </Text>

diff --git a/src/stores/Howto/howto.store.tsx b/src/stores/Howto/howto.store.tsx
@@ -69,7 +69,8 @@ export class HowtoStore extends ModuleStore {
         activeUser && howto._createdBy === activeUser.userName
       const isAdminAndAccepted =
         isAdmin &&
-        (howto.moderation !== 'draft' && howto.moderation !== 'rejected')
+        howto.moderation !== 'draft' &&
+        howto.moderation !== 'rejected'
 
       return isHowToAccepted || wasCreatedByUser || isAdminAndAccepted
     })
@@ -138,6 +139,18 @@ export class HowtoStore extends ModuleStore {
         moderation: values.moderation
           ? values.moderation
           : 'awaiting-moderation',
+        // Avoid replacing user flag on admin edit
+        _creatorCountry:
+          (values._createdBy && values._createdBy === user.userName) ||
+          !values._createdBy
+            ? user.location
+              ? user.location.countryCode
+              : user.country
+              ? user.country.toLowerCase()
+              : ''
+            : values._creatorCountry
+            ? values._creatorCountry
+            : '',
       }
       console.log('populating database', howTo)
       // set the database document