Migrate radial-maths components to TypeScript

3 files changed, 20 insertions, 23 deletions

diff --git a/frontend/src/components/lobby/radial-list/RadialList.jsx b/frontend/src/components/lobby/radial-list/RadialList.tsx
index 2b17dff2..806cdd08 100644
--- a/frontend/src/components/lobby/radial-list/RadialList.jsx
+++ b/frontend/src/components/lobby/radial-list/RadialList.tsx
@@ -1,13 +1,12 @@
-//@flow
-import * as React from 'react';
-import type { CartesianCoords, RadialConfig } from './radial-math';
+import React, { ReactNode } from 'react';
+import { CartesianCoords, RadialConfig } from './radial-math';
 import { offsetsFromCenter, CLOCKWISE, COUNTERCLOCKWISE } from './radial-math';
 import './RadialList.css';
 import { RadialListItem } from './RadialListItem';
 
 type RadialListProps = {
-  items: Array<React.Node>,
-  centerElement?: React.Node,
+  items: Array<ReactNode>,
+  centerElement?: ReactNode,
   radius?: number, // 120px by default
   offsetDegrees?: number, // defaults to 0 = 12 o'clock
   arc?: number, // defaults to 360 (full circle)
@@ -32,7 +31,7 @@ export const RadialList = ({items, centerElement, radius = 120, offsetDegrees =
 };
 
 type RadialListItemsProps = {
-  items: Array<React.Node>,
+  items: Array<React.ReactNode>,
   radialConfig: RadialConfig,
 };
 
@@ -54,7 +53,7 @@ const RadialListItems = ({items, radialConfig}: RadialListItemsProps) => {
 };
 
 type RadialListCenterProps = {
-  centerElement?: React.Node,
+  centerElement?: ReactNode,
 };
 
 const RadialListCenter = ({centerElement}: RadialListCenterProps) => {
diff --git a/frontend/src/components/lobby/radial-list/RadialListItem.jsx b/frontend/src/components/lobby/radial-list/RadialListItem.tsx
index 1d5df7f5..19a27638 100644
--- a/frontend/src/components/lobby/radial-list/RadialListItem.jsx
+++ b/frontend/src/components/lobby/radial-list/RadialListItem.tsx
@@ -1,10 +1,10 @@
-//@flow
 import * as React from 'react';
-import type { CartesianCoords } from './radial-math';
+import { ReactNode } from 'react';
+import { CartesianCoords } from './radial-math';
 import './RadialListItem.css';
 
 type RadialListItemProps = {
-  item: React.Node,
+  item: ReactNode,
   offsets: CartesianCoords,
 };
 
diff --git a/frontend/src/components/lobby/radial-list/radial-math.js b/frontend/src/components/lobby/radial-list/radial-math.ts
index 94b87157..f0f411f5 100644
--- a/frontend/src/components/lobby/radial-list/radial-math.js
+++ b/frontend/src/components/lobby/radial-list/radial-math.ts
@@ -1,34 +1,32 @@
-//@flow
-
 export type CartesianCoords = {
   x: number,
   y: number,
 }
 type PolarCoords = {
   radius: number,
-  angle: number,
+  angleDeg: number,
 }
 
-const toRad = (deg) => deg * (Math.PI / 180);
-const roundedProjection = (radius, theta, trigFn) => Math.round(radius * trigFn(theta));
-const xProjection = (radius, theta) => roundedProjection(radius, theta, Math.cos);
-const yProjection = (radius, theta) => roundedProjection(radius, theta, Math.sin);
+const toRad = (deg: number) => deg * (Math.PI / 180);
+const roundedProjection = (radius: number, thetaRad: number, trigFn: (angle: number) => number) => Math.round(radius * trigFn(thetaRad));
+const xProjection = (radius: number, thetaRad: number) => roundedProjection(radius, thetaRad, Math.cos);
+const yProjection = (radius: number, thetaRad: number) => roundedProjection(radius, thetaRad, Math.sin);
 
-const toCartesian = ({radius, angle}: PolarCoords): CartesianCoords => ({
-  x: xProjection(radius, toRad(angle)),
-  y: yProjection(radius, toRad(angle)),
+const toCartesian = ({radius, angleDeg}: PolarCoords): CartesianCoords => ({
+  x: xProjection(radius, toRad(angleDeg)),
+  y: yProjection(radius, toRad(angleDeg)),
 });
 
 export type Direction = -1 | 1;
 export const CLOCKWISE: Direction = -1;
 export const COUNTERCLOCKWISE: Direction = 1;
 
-export type RadialConfig = {|
+export type RadialConfig = {
   radius: number,
   arc: number,
   offsetDegrees: number,
   direction: Direction,
-|}
+}
 const DEFAULT_CONFIG: RadialConfig = {
   radius: 120,
   arc: 360,
@@ -46,5 +44,5 @@ function itemCartesianOffsets(index: number, nbItems: number, {radius, arc, dire
   const startAngle = DEFAULT_START + direction * offsetDegrees;
   const angleStep = arc / nbItems;
   const itemAngle = startAngle + direction * angleStep * index;
-  return toCartesian({radius, angle: itemAngle});
+  return toCartesian({radius, angleDeg: itemAngle});
 }