♻️ Rewrite Ticker View to TypeScript

package.json

@@ -17,7 +17,7 @@
     "react-dom": "^17.0.0",
     "react-hook-form": "^7.32.0",
     "react-image-lightbox": "^5.1.4",
-    "react-leaflet": "^2.6.3",
+    "react-leaflet": "^3.0.0",
     "react-leaflet-draw": "^0.19.0",
     "react-markdown": "^8.0.3",
     "react-moment": "^0.9.7",
@@ -32,6 +32,7 @@
     "@babel/preset-env": "^7.9.5",
     "@babel/preset-react": "^7.9.4",
     "@babel/preset-typescript": "^7.17.12",
+    "@types/leaflet": "^1.7.11",
     "@types/node": "^18.0.0",
     "@types/react-dom": "^17.0.17",
     "@types/react-router-dom": "^5.0.0",

src/App.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { ReactQueryDevtools } from 'react-query/devtools'
-import { BrowserRouter, Route, Switch, useParams } from 'react-router-dom'
+import { BrowserRouter, Route, Switch } from 'react-router-dom'
 import HomeView from './views/HomeView'
 import LoginView from './views/LoginView'
 import SettingsView from './views/SettingsView'
@@ -11,17 +11,6 @@ import 'semantic-ui-css/semantic.min.css'
 import './index.css'
 import '../leaflet.config.js'
 
-interface TickerViewParams {
-  tickerId: string
-}
-
-//TODO: Can be removed if TickerView is rewritten
-const TickerViewWrapper: FC = () => {
-  const { tickerId } = useParams<TickerViewParams>()
-
-  return <TickerView id={tickerId} />
-}
-
 const App: FC = () => {
   const queryClient = new QueryClient()
 
@@ -31,7 +20,7 @@ const App: FC = () => {
         <Switch>
           <Route component={HomeView} exact path="/" />
           <Route component={LoginView} exact path="/login" />
-          <Route component={TickerViewWrapper} path="/ticker/:tickerId" />
+          <Route component={TickerView} path="/ticker/:tickerId" />
           <Route component={UsersView} path="/users" />
           <Route component={SettingsView} path="/settings" />
         </Switch>

src/api/Message.ts

@@ -0,0 +1,56 @@
+import { ApiUrl, Response } from './Api'
+import AuthSingleton from '../components/AuthService'
+
+const Auth = AuthSingleton.getInstance()
+
+interface MessagesResponseData {
+  messages: Array<Message>
+}
+
+interface MessageResponseData {
+  message: Message
+}
+
+export interface Message {
+  id: number
+  ticker: number
+  text: string
+  creation_date: Date
+  tweet_id: string
+  tweet_user: string
+  geo_information: string
+  // TODO
+  attachments: any[]
+}
+
+export function getMessages(
+  ticker: number
+): Promise<Response<MessagesResponseData>> {
+  return Auth.fetch(`${ApiUrl}/admin/tickers/${ticker}/messages`)
+}
+
+// TODO: any
+export function postMessage(
+  ticker: string,
+  text: string,
+  geoInformation: any,
+  attachments: any[]
+): Promise<Response<MessageResponseData>> {
+  return Auth.fetch(`${ApiUrl}/admin/tickers/${ticker}/messages`, {
+    body: JSON.stringify({
+      text: text,
+      geo_information: geoInformation,
+      attachments: attachments,
+    }),
+    method: 'POST',
+  })
+}
+
+export function deleteMessage(
+  ticker: string,
+  message: string
+): Promise<Response<any>> {
+  return Auth.fetch(`${ApiUrl}/admin/tickers/${ticker}/messages/${message}`, {
+    method: 'DELETE',
+  })
+}