From 572814cc7cb84a68170c491abf0e849857d6b46d Mon Sep 17 00:00:00 2001
From: Haralan Dobrev <harry@hkdobrev.com>
Date: Sun, 2 Apr 2023 11:06:00 +0300
Subject: [PATCH 1/3] Page for submitted violation

---
 src/components/Election.js         |  4 +-
 src/components/MyViolations.js     |  4 +-
 src/components/ViolationSummary.js | 97 ++++++++++++++++++++++++++++++
 3 files changed, 103 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ViolationSummary.js

diff --git a/src/components/Election.js b/src/components/Election.js
index 723eca1..6a1a530 100644
--- a/src/components/Election.js
+++ b/src/components/Election.js
@@ -13,6 +13,7 @@ import { RightsAndObligations } from './RightsAndObligations'
 import { ROUTES } from './routes.js'
 import { Submit } from './Submit'
 import { ViolationForm } from './ViolationForm'
+import { ViolationSummary } from './ViolationSummary'
 
 export const ElectionContext = React.createContext()
 
@@ -36,10 +37,11 @@ export default () => {
         <Switch>
           <Route path={ROUTES.submit} component={Submit} />
           <Route path={ROUTES.protocolForm} component={ProtocolForm} />
+          <Route path={ROUTES.violationForm} component={ViolationForm} />
           <Route path={ROUTES.myProtocols} exact component={MyProtocols} />
           <Route path={ROUTES.myViolations} exact component={MyViolations} />
           <Route path={ROUTES.protocol} component={ProtocolSummary} />
-          <Route path={ROUTES.violationForm} component={ViolationForm} />
+          <Route path={ROUTES.violation} component={ViolationSummary} />
           <Route
             path={ROUTES.rightsAndObligations}
             component={RightsAndObligations}
diff --git a/src/components/MyViolations.js b/src/components/MyViolations.js
index 714b090..ded56ae 100644
--- a/src/components/MyViolations.js
+++ b/src/components/MyViolations.js
@@ -74,7 +74,9 @@ export const MyViolations = () => {
                 <img src={violation.pictures[0]?.url} alt="" height="200px" />
               </RouterLink>
             )}
-            <LinkButton to={`/violations/${violation.id}`}>
+            <LinkButton
+              to={ROUTES.violation.replace(':violationId', violation.id)}
+            >
               Вижте сигнала
             </LinkButton>
           </div>
diff --git a/src/components/ViolationSummary.js b/src/components/ViolationSummary.js
new file mode 100644
index 0000000..77f4da6
--- /dev/null
+++ b/src/components/ViolationSummary.js
@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from 'react'
+import styled from 'styled-components'
+import api from '../utils/api'
+import { useParams } from 'react-router-dom'
+import { Link } from './components/Link'
+import { ROUTES } from './routes'
+
+export const ViolationSummary = () => {
+  const { violationId } = useParams()
+  const [violationDetails, setViolationDetails] = useState({})
+  const [error, setError] = useState(null)
+  const [ownViolation, setOwnViolation] = useState(false)
+
+  useEffect(async () => {
+    if (!localStorage || !violationId) return
+    let ignore = false
+    const violationsFromStorage =
+      JSON.parse(localStorage.getItem('violations')) || []
+    const violationFromStorage = violationsFromStorage.find(
+      (violation) => violation.id === violationId
+    )
+    let violationUrl = `violations/${violationId}`
+    if (violationFromStorage) {
+      setOwnViolation(true)
+      violationUrl = `${violationUrl}?secret=${encodeURIComponent(
+        violationFromStorage.secret
+      )}`
+    }
+    try {
+      const data = await api.get(violationUrl)
+      if (!ignore) {
+        setViolationDetails(data)
+        setError(null)
+      }
+    } catch (error) {
+      if (error.response?.status === 403 || error.response?.status === 401) {
+        setError('Нямате достъп до този сигнал')
+      } else if (error.response?.status === 404) {
+        setError('Не е намерен сигнал с този номер')
+      } else {
+        setError(
+          'Изникна неочаквана грешка при зареждането на сигнала. Моля опитайте отново по-късно.'
+        )
+      }
+    }
+
+    return () => {
+      ignore = true
+    }
+  }, [violationId])
+
+  if (error) {
+    return <p>{error}</p>
+  }
+
+  const {
+    id,
+    statusLocalized,
+    description,
+    publishedText,
+    pictures,
+    section,
+    createdAt,
+  } = violationDetails
+
+  return (
+    <>
+      {ownViolation && (
+        <Link to={ROUTES.submit}>
+          <small>⟵ обратно</small>
+        </Link>
+      )}
+      <ViolationSummaryStyle>
+        <div>
+          <h1 style={{ wordBreak: 'break-word' }}>Сигнал {id}</h1>
+          {section && <p>Секция: {section.id}</p>}
+          <p>Статус: {statusLocalized}</p>
+          <p>Получен на: {new Date(createdAt).toLocaleString('bg-BG')}</p>
+          <p>{description || publishedText}</p>
+        </div>
+        <div>
+          {pictures?.map((picture, index) => (
+            <img src={picture.url} alt="" key={index} />
+          ))}
+        </div>
+      </ViolationSummaryStyle>
+    </>
+  )
+}
+
+const ViolationSummaryStyle = styled.div`
+  padding: 10px;
+
+  img {
+    max-width: 100%;
+  }
+`

From 96fc2ce011a39ff896630f657f63aaa5180fe8cd Mon Sep 17 00:00:00 2001
From: Haralan Dobrev <harry@hkdobrev.com>
Date: Sun, 2 Apr 2023 12:07:48 +0300
Subject: [PATCH 2/3] Link violation card to individual violation page

---
 src/components/ViolationFeeds.js | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/ViolationFeeds.js b/src/components/ViolationFeeds.js
index 2101b23..28212ab 100644
--- a/src/components/ViolationFeeds.js
+++ b/src/components/ViolationFeeds.js
@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react'
 
 import axios from 'axios'
-import { useParams } from 'react-router-dom'
+import { useParams, useHistory } from 'react-router-dom'
 
 import { Link } from 'react-router-dom'
 import { ElectionContext } from './Election'
@@ -26,6 +26,7 @@ const Violation = styled.div`
   box-shadow: 0 0 10px #ddd;
   border-bottom: 3px solid #bbb;
   color: #333;
+  cursor: pointer;
 
   h4,
   p {
@@ -69,6 +70,8 @@ const defaultRegionName = 'Последни сигнали'
 
 export default (props) => {
   const { meta, parties, dataURL } = useContext(ElectionContext)
+  const history = useHistory()
+  const navigateTo = (path) => history.push(path)
 
   const [violationData, setViolationData] = useState({
     items: null,
@@ -136,7 +139,7 @@ export default (props) => {
 
     return (
       <Fade key={violation.id} clear>
-        <Violation>
+        <Violation onClick={() => navigateTo(`/violation/${violation.id}`)}>
           <h4>
             {violation.town.name}
             {violation.town.municipality
@@ -150,7 +153,10 @@ export default (props) => {
             {!electionRegion ? (
               ''
             ) : (
-              <Link to={`/${electionRegion.code}`}>
+              <Link
+                to={`/${electionRegion.code}`}
+                onClick={(e) => e.stopPropagation()}
+              >
                 МИР {electionRegion.code}. {electionRegion.name}
               </Link>
             )}
@@ -160,7 +166,10 @@ export default (props) => {
             ) : (
               <>
                 Секция{' '}
-                <Link to={`/${violation.section.id}`}>
+                <Link
+                  to={`/${violation.section.id}`}
+                  onClick={(e) => e.stopPropagation()}
+                >
                   {violation.section.id}
                 </Link>
               </>

From 5f41df69fc7d6773929a82a881c12583f6bb9c8b Mon Sep 17 00:00:00 2001
From: Haralan Dobrev <harry@hkdobrev.com>
Date: Sun, 2 Apr 2023 12:08:28 +0300
Subject: [PATCH 3/3] Show location and links on protocol/violation pages

---
 src/components/ProtocolSummary.js  |  6 ++++-
 src/components/ViolationSummary.js | 39 ++++++++++++++++++++++++++++--
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/components/ProtocolSummary.js b/src/components/ProtocolSummary.js
index 9eb67ef..45e5c7b 100644
--- a/src/components/ProtocolSummary.js
+++ b/src/components/ProtocolSummary.js
@@ -65,7 +65,11 @@ export const ProtocolSummary = () => {
       <ProtocolSummaryStyle>
         <div>
           <h1 style={{ wordBreak: 'break-word' }}>Протокол {id}</h1>
-          {section && <p>Секция: {section.id}</p>}
+          {section && (
+            <p>
+              Секция: <Link to={`/${section.id}`}>{section.id}</Link>
+            </p>
+          )}
           <p>Статус: {statusLocalized}</p>
           <p>Получен на: {new Date(createdAt).toLocaleString('bg-BG')}</p>
         </div>
diff --git a/src/components/ViolationSummary.js b/src/components/ViolationSummary.js
index 77f4da6..e49c07d 100644
--- a/src/components/ViolationSummary.js
+++ b/src/components/ViolationSummary.js
@@ -61,6 +61,7 @@ export const ViolationSummary = () => {
     pictures,
     section,
     createdAt,
+    town,
   } = violationDetails
 
   return (
@@ -73,10 +74,44 @@ export const ViolationSummary = () => {
       <ViolationSummaryStyle>
         <div>
           <h1 style={{ wordBreak: 'break-word' }}>Сигнал {id}</h1>
-          {section && <p>Секция: {section.id}</p>}
+          {section && (
+            <p>
+              Секция: <Link to={`/${section.id}`}>{section.id}</Link>
+            </p>
+          )}
+          {town && (
+            <>
+              <p>
+                {town.municipality ? (
+                  <>Община: {town.municipality.name}</>
+                ) : (
+                  <>Държава: {town.country.name}</>
+                )}
+                , Населено място: {town.name}
+              </p>
+              {(section?.electionRegion ||
+                town.municipality?.electionRegions?.length === 1) && (
+                <p>
+                  МИР:{' '}
+                  <Link
+                    to={`/${
+                      section?.electionRegion?.code ||
+                      town.municipality?.electionRegions[0].code
+                    }`}
+                  >
+                    {section?.electionRegion?.name ||
+                      town.municipality?.electionRegions[0].name}
+                  </Link>
+                </p>
+              )}
+            </>
+          )}
           <p>Статус: {statusLocalized}</p>
           <p>Получен на: {new Date(createdAt).toLocaleString('bg-BG')}</p>
-          <p>{description || publishedText}</p>
+          <p>
+            <b>Нарушение:</b>
+            <br /> <br /> {description || publishedText}
+          </p>
         </div>
         <div>
           {pictures?.map((picture, index) => (