✨ Add FilterHasImage

nest_frontend/LocalizationStrings.js

@@ -9,7 +9,7 @@
  * "{number} km radius"
  * ```
  */
-export default {
+const LOCALIZATION = {
     // 🇮🇹
     it: {
         appName: "N.E.S.T.",
@@ -28,9 +28,10 @@ export default {
         byZone: "area",
         byHashtag: "hashtag",
         byUser: "utente",
+        byHasImage: "immagine",
         byTimePeriod: "arco di tempo",
         byContents: "contenuti",
-        byHasPlace: "localizzazione attiva?",
+        byHasPlace: "punto di interesse",
         timeBefore: "Prima",
         timeAfter: "Dopo",
         conditions: "Condizioni",
@@ -121,9 +122,10 @@ export default {
         byZone: "zone",
         byHashtag: "hashtag",
         byUser: "user",
+        byHasImage: "image",
         byTimePeriod: "time period",
         byContents: "contents",
-        byHasPlace: "is localized?",
+        byHasPlace: "point of interest",
         timeBefore: "Before",
         timeAfter: "After",
         conditions: "Conditions",
@@ -214,9 +216,10 @@ export default {
         byZone: "vyöhykkeen mukaan",
         byHashtag: "hashtagin mukaan",
         byUser: "käyttäjän mukaan",
+        byHasImage: "kuva",
         byTimePeriod: "aikajakson mukaan",
         byContents: "sisältö",
-        byHasPlace: "on paikallistettu?",
+        byHasPlace: "kiinnostuksen kohde",
         timeBefore: "Ennen",
         timeAfter: "Jälkeen",
         conditions: "Ehdot",

nest_frontend/components/interactive/BoxFilterHasImage.js

@@ -0,0 +1,55 @@
+import React from "react"
+import BoxFull from "../base/BoxFull"
+import FormInline from "../base/FormInline"
+import useRepositoryViewer from "../../hooks/useRepositoryViewer"
+import useStrings from "../../hooks/useStrings"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faImage, faPlus } from "@fortawesome/free-solid-svg-icons"
+import { FilterWithImage } from "../../objects/Filter"
+import ButtonIconOnly from "../base/ButtonIconOnly"
+
+
+/**
+ * A {@link BoxFull} that allows the user to add a {@link FilterWithImage} to a RepositoryViewer.
+ *
+ * @param props - Additional props to pass to the box.
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function BoxFilterHasImage({ ...props }) {
+    const strings = useStrings()
+
+    const { appendFilter } = useRepositoryViewer()
+
+    const submit = () => {
+        appendFilter(new FilterWithImage())
+    }
+
+    // TODO: translate this
+
+    return (
+        <BoxFull
+            header={
+                <span>
+                    {strings.searchBy}
+                    &nbsp;
+                    <FontAwesomeIcon icon={faImage}/>
+                    &nbsp;
+                    {strings.byHasImage}
+                </span>
+            }
+            {...props}
+        >
+            <FormInline>
+                <div style={{"flex-grow": 1}}>
+                    {strings.hasImageExplaination}
+                </div>
+                <ButtonIconOnly
+                    icon={faPlus}
+                    color={"Green"}
+                    onClick={submit}
+                />
+            </FormInline>
+        </BoxFull>
+    )
+}

nest_frontend/components/interactive/PickerFilter.js

@@ -4,7 +4,7 @@ import {
     faAt,
     faClock,
     faFont,
-    faHashtag,
+    faHashtag, faImage,
     faLocationArrow,
     faMapMarkerAlt,
     faMapPin,
@@ -43,6 +43,12 @@ export default function PickerFilter({ ...props }) {
                 name={"user"}
                 icon={faAt}
             />
+            <ButtonPicker
+                currentTab={filterTab}
+                setTab={setFilterTab}
+                name={"image"}
+                icon={faImage}
+            />
             <ButtonPicker
                 currentTab={filterTab}
                 setTab={setFilterTab}

nest_frontend/components/interactive/SummaryTweet.js

@@ -1,7 +1,7 @@
 import React from "react"
 import SummaryBase from "../base/summary/SummaryBase"
 import SummaryLeft from "../base/summary/SummaryLeft"
-import { faComment, faLocationArrow, faMapMarkerAlt } from "@fortawesome/free-solid-svg-icons"
+import { faComment, faImage } from "@fortawesome/free-solid-svg-icons"
 import SummaryText from "../base/summary/SummaryText"
 import SummaryRight from "../base/summary/SummaryRight"
 
@@ -16,11 +16,8 @@ import SummaryRight from "../base/summary/SummaryRight"
  */
 export default function SummaryTweet({ tweet, ...props }) {
     let icon
-    if(tweet["location"]) {
+    if(tweet["image_url"]) {
-        icon = faMapMarkerAlt
+        icon = faImage
-    }
-    else if(tweet["place"]) {
-        icon = faLocationArrow
     }
     else {
         icon = faComment

nest_frontend/components/providers/RepositoryViewer.js

@@ -27,6 +27,7 @@ import BoxFilterLocation from "../interactive/BoxFilterLocation"
 import useMapAreaState from "../../hooks/useMapAreaState"
 import BoxFilterDatetime from "../interactive/BoxFilterDatetime"
 import BoxFilterHasPlace from "../interactive/BoxFilterHasPlace"
+import BoxFilterHasImage from "../interactive/BoxFilterHasImage"
 
 
 export default function RepositoryViewer({ id, className, ...props }) {
@@ -123,6 +124,7 @@ export default function RepositoryViewer({ id, className, ...props }) {
             {filterTab === "contains" ? <BoxFilterContains className={Style.AddFilter}/> : null}
             {filterTab === "hashtag" ? <BoxFilterHashtag className={Style.AddFilter}/> : null}
             {filterTab === "user" ? <BoxFilterUser className={Style.AddFilter}/> : null}
+            {filterTab === "image" ? <BoxFilterHasImage className={Style.AddFilter}/> : null}
             {filterTab === "time" ? <BoxFilterDatetime className={Style.AddFilter}/> : null}
             {filterTab === "place" ? <BoxFilterHasPlace className={Style.AddFilter}/> : null}
             {filterTab === "location" ? <BoxFilterLocation className={Style.AddFilter}/> : null}

nest_frontend/objects/Filter.js

@@ -3,7 +3,7 @@ import {
     faClock,
     faFilter,
     faFont,
-    faHashtag,
+    faHashtag, faImage,
     faLocationArrow,
     faMapMarkerAlt,
     faMapPin,
@@ -220,3 +220,25 @@ export class FilterInsideTimeRay extends Filter {
         }
     }
 }
+
+
+/**
+ * Check if a tweet has an associated `image_url`.
+ */
+export class FilterWithImage extends Filter {
+    constructor(negate = false) {
+        super(negate)
+    }
+
+    check(tweet) {
+        return Boolean(tweet["image_url"])
+    }
+
+    display() {
+        return {
+            color: "Grey",
+            icon: faImage,
+            children: ""
+        }
+    }
+}