diff --git a/src/components/HowToCard/HowToCard.tsx b/src/components/HowToCard/HowToCard.tsx index 4f303663fd..6610bd48bc 100644 --- a/src/components/HowToCard/HowToCard.tsx +++ b/src/components/HowToCard/HowToCard.tsx @@ -4,6 +4,7 @@ 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' @@ -11,7 +12,6 @@ import Heading from 'src/components/Heading' interface IProps { howto: IHowtoDB } - export const HowToCard = (props: IProps) => ( ( {props.howto.title} - By {props.howto._createdBy} + + {props.howto._creatorCountry && ( + + )} + + By {props.howto._createdBy} + + {props.howto.tags && Object.keys(props.howto.tags).map(tag => { diff --git a/src/mocks/howto.mock.tsx b/src/mocks/howto.mock.tsx index 7d6fde09b2..264efb206a 100644 --- 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 index 6901cf8a92..b6f5f584eb 100644 --- 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 index a1c5e45b41..60a61953d7 100644 --- 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 { )} - - By{' '} - - {howto._createdBy} - {' '} - | Published on {this.dateCreatedByText(howto)} - + + {howto._creatorCountry && ( + + )} + + By{' '} + + {howto._createdBy} + {' '} + | Published on {this.dateCreatedByText(howto)} + + {this.dateLastEditText(howto)} diff --git a/src/stores/Howto/howto.store.tsx b/src/stores/Howto/howto.store.tsx index 9a445c2f90..3cfb8d6156 100644 --- 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