Merge pull request #9 from thomasrosen/beta

display urls, phone numbers and email addresses under the description
thomasrosen · Sep 25, 2023 · 2a34475 · 2a34475
2 parents 0206277 + 6acbd81
commit 2a34475
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 23 deletions.
diff --git a/backend/data.yml b/backend/data.yml
@@ -2162,7 +2162,8 @@ resources:
 
 - title: Die Ansprechperson der Polizei Berlin für LSBTI
   contact:
-    - phone: 0304664-979444 (auch AB)
+    - phone: +49 0304664-979444
+      note: auch Anrufbeantworter
     - email: lsbti@polizei.berlin.de
   area: Berlin, Germany
   bbox:
@@ -2177,7 +2178,8 @@ resources:
 
 - title: Die Ansprechperson für LSBTI der Staatsanwaltschaft Berlin
   contact:
-    - phone: 9014- 3526 /- 2733
+    - phone: +49 9014 3526
+    - phone: +49 9014 2733
     - email: lsbt@sta.berlin.de
   area: Berlin, Germany
   bbox:
@@ -2193,7 +2195,7 @@ resources:
 - title: Maneo – Schwules Überfalltelefon und Opferhilfe
   link: https://www.maneo.de/
   contact:
-    - phone: 030 2163336
+    - phone: +49 030 2163336
   area: Berlin, Germany
   bbox:
     north: 52.6
@@ -2211,11 +2213,11 @@ resources:
   link: https://www.l-support.net/
   contact:
     - title: Beratung
-      phone: 030 45961865
+      phone: +49 030 45961865
       email: l-support@l-support.net
       opening_hours: Sa-Su 17:00-19:00; PH off
     - title: Büro
-      phone: 030 215 75 54
+      phone: +49 030 215 75 54
       email: office@l-support.net
   address: Potsdamer Str. 139, 10783 Berlin
   area: Berlin, Germany
@@ -2235,7 +2237,7 @@ resources:
 - title: Lesbenberatung e.v.
   link: https://www.lesbenberatung-berlin.de/
   contact:
-    - phone: 030 2152000
+    - phone: +49 030 2152000
   area: Berlin, Germany
   bbox:
     north: 52.6
@@ -2251,7 +2253,7 @@ resources:
   description: "das lesbische, schwule, bisexuelle, trans*, inter* + nichtbinäre projekt!"
   link: https://www.sonntags-club.de/
   contact:
-    - phone: 030 449 75 90
+    - phone: +49 030 449 75 90
       email: info@sonntags-club.de
       opening_hours: Mo-Do 10:00-18:00
   address: Greifenhagener Str. 28, 10437 Berlin
@@ -2272,7 +2274,7 @@ resources:
   description: Beratung von queer lebenden und transidenten Menschen
   link: https://www.schwulenberatungberlin.de/
   contact:
-    - phone: 030 446688111
+    - phone: +49 030 446688111
   area: Berlin, Germany
   bbox:
     north: 52.6
@@ -2290,7 +2292,7 @@ resources:
   description: "Berlins schwuler Checkpoint"
   link: https://www.mann-o-meter.de/
   contact:
-    - phone: 030 - 216 80 08
+    - phone: +49 030 216 80 08
     - email: info@mann-o-meter.de
   area: Berlin, Germany
   address: Bülowstraße 106, 10783 Berlin
@@ -2310,7 +2312,7 @@ resources:
   description: "Das Magnus-Hirschfeld-Centrum (mhc) vereint vielfältige Beratungs- und Begleitungsanbebote für Lesben, Schwule, Bi und Trans* aus jeder Altersgruppe und mit jedem kulturellen Hintergrund und einem Dach."
   link: https://www.mhc-hamburg.de
   contact:
-    - phone: 040.650 551 29
+    - phone: +49 040 650 551 29
     - email: soorum@mhc-hamburg.de
   social:
     facebook: https://www.facebook.com/scoorummhc
@@ -2337,7 +2339,7 @@ resources:
     - https://aid-diversity.de
   contact:
     - title: Büro
-      phone: 030/40753910
+      phone: +49 030 40753910
       email: aid@irg-moschee.de
     - title: Seelsorge
       email: seelsorge@aid-diversity.de
@@ -2362,7 +2364,7 @@ resources:
   description: "Über 1.500 Mitglieder trainieren in 30 Sportatren 7 Tage die Woche."
   link: https://www.vorspiel-berlin.de/
   contact:
-    - phone: (030) 44 05 77 40)
+    - phone: +49 030 44 05 77 40
     - email: mail@vorspiel-berlin.de
   social:
     facebook: https://www.facebook.com/vorspielberlin

diff --git a/frontend/package.json b/frontend/package.json
@@ -8,6 +8,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "libphonenumber-js": "^1.10.44",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-redux": "^8.0.5",

diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
@@ -4,6 +4,8 @@ import './App.css'
 import '../fonts/ubuntu-v15-latin/index.css'
 import '../fonts/ubuntu-mono-v10-latin/index.css'
 
+import parsePhoneNumber from 'libphonenumber-js'
+
 import {
   Outlet,
 } from 'react-router-dom'
@@ -13,7 +15,6 @@ import Tag from './Tag.js'
 import { useSelector, useDispatch } from 'react-redux'
 import {
   toggleTag,
-
   selectSelectedTags,
 } from '../redux/slices/filterSlice.js'
 import {
@@ -23,6 +24,19 @@ import {
 
 import Filters from './Filters.js'
 
+function get_smaller_url (url) {
+  // check if url only contains exactly three slashes
+  if (url.split('/').length <= 4) {
+    // url is only a domain
+    const regex = /.*:\/\/(?:www\.)?([^/]*).*/gm
+    const smaller_url = url.replace(regex, `$1`)
+    return smaller_url
+  }
+
+  // url has a path so return full url
+  return url
+}
+
 export default function App() {
 
   const dispatch = useDispatch()
@@ -38,7 +52,7 @@ export default function App() {
   const [showFilters, setShowFilters] = React.useState(false)
 
   const [error, setError] = React.useState(null)
-  
+
   const toggleFilters = () => {
     setShowFilters(showFilters => !showFilters)
   }
@@ -58,7 +72,7 @@ export default function App() {
       }
 
       <h1>🏳️‍🌈 QR</h1>
-      
+
       <a href="https://github.com/thomasrosen/queer" target="_blank" rel="noreferrer">Sourcecode</a>
     </header>
 
@@ -67,7 +81,7 @@ export default function App() {
         onError={setError}
         />
     </nav>
-    
+
     <main>
       <h1>🏳️‍🌈 Queer Resources</h1>
 
@@ -100,17 +114,80 @@ export default function App() {
       {
         resources &&
         resources.map(resource => {
+          const links = []
+
+          let main_link = null
+          if (resource.hasOwnProperty('link')) {
+            if (Array.isArray(resource.link) && resource.link.length > 0) {
+              main_link = resource.link[0]
+              links.push(...resource.link.map(link => ({
+                url: link,
+                title: get_smaller_url(link),
+              })))
+            } else if (typeof resource.link === 'string') {
+              main_link = resource.link
+              links.push({
+                url: resource.link,
+                title: get_smaller_url(resource.link),
+              })
+            }
+          }
+
+          if (
+            resource.hasOwnProperty('contact')
+            && Array.isArray(resource.contact)
+            && resource.contact.length > 0
+          ) {
+            for (const contact of resource.contact) {
+              if (contact.hasOwnProperty('phone')) {
+                const phoneNumber = parsePhoneNumber(contact.phone)
+                links.push({
+                  url: phoneNumber.getURI(),
+                  title: phoneNumber.formatInternational(), // phoneNumber.formatNational() 
+                })
+              }
+              if (contact.hasOwnProperty('email')) {
+                links.push({
+                  url: `mailto:${contact.email}`,
+                  title: contact.email,
+                })
+              }
+            }
+          }
+
           return <div key={JSON.stringify(resource)}>
             <h3>
-              <a href={resource.link} target="_blank" rel="noreferrer">
-                {resource.title}
-              </a>
+              {
+                main_link !== null
+                  ? <a href={main_link} target="_blank" rel="noreferrer">
+                    {resource.title}
+                  </a>
+                  : resource.title
+              }
             </h3>
             {
               !!resource.description && resource.description.length > 0
                 ? <p>{resource.description}</p>
                 : null
             }
+
+            <div className="tag_row small">
+              {
+                links.map(({title, url}) => {
+                  return <a key={url} href={url}>
+                    <Tag
+                      className="small"
+                      tag={title}
+                      style={{
+                        cursor: 'pointer'
+                      }}
+                      data-selected="false"
+                    />
+                  </a>
+                })
+              }
+            </div>
+
             <div className="tag_row small">
               {
                 resource.tags.map(tag => {

diff --git a/frontend/src/components/Tag.js b/frontend/src/components/Tag.js
@@ -5,17 +5,21 @@ import {
   string2color,
 } from '../functions.js'
 
-export default function Tag({ tag, style, ...props }) {
+export default function Tag({
+  tag,
+  style,
+  ...props
+}) {
   const color = string2color(tag) // TODO make sure to only run this once
   // TODO define the colors instead of generating them
   const textColor = getContrastingColorFromHex(color) // TODO make sure to only run this once
 
   return <button
     {...props}
     style={{
-      ...style,
       backgroundColor: color,
       color: textColor,
+      ...style,
     }}
   >
     {tag}

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -14,7 +14,7 @@ body {
   --primary-color: #007ed9;
 
   --content-box-width: 620px;
-  
+
   --font-family-headline: "Ubuntu Mono", Ubuntu, sans-serif;
   --font-family-text: Ubuntu, sans-serif;
   --font-family-code: Ubuntu Mono, source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
@@ -106,14 +106,16 @@ input[type="search"] {
   /* text-transform: uppercase; */
   border: 0;
   font-weight: bold;
+  text-align: start;
 
 	padding: 10px 20px;
-	border-radius: 100px;
 	color: var(--background-color);
 	fill: var(--background-color);
 	background: var(--text-color);
 	font-weight: bold;
 	transition: box-shadow 0.2s ease;
+
+  border-radius: 32px;
 }
 input[type="search"] {
   width: 100%;
@@ -124,6 +126,7 @@ button {
 button.small {
   padding: 5px 10px;
   font-size: 14px;
+  border-radius: 16px;
 }
 button[data-selected="true"] {
   box-shadow: 0 0 0 5px var(--text-color);

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -7248,6 +7248,11 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+libphonenumber-js@^1.10.44:
+  version "1.10.44"
+  resolved "https://registry.yarnpkg.com/libphonenumber-js/-/libphonenumber-js-1.10.44.tgz#6709722461173e744190494aaaec9c1c690d8ca8"
+  integrity sha512-svlRdNBI5WgBjRC20GrCfbFiclbF0Cx+sCcQob/C1r57nsoq0xg8r65QbTyVyweQIlB33P+Uahyho6EMYgcOyQ==
+
 lines-and-columns@^1.1.6:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"