Reorganize React project structure.

Whatever I was doing was getting out of control :)

client/src/components/controlpoints/ControlPoint.tsx

@@ -0,0 +1,32 @@
+import { Icon, Point } from "leaflet";
+import { Marker, Popup } from "react-leaflet";
+
+import { ControlPoint as ControlPointModel } from "../../api/controlpoint";
+import { Symbol as MilSymbol } from "milsymbol";
+
+function iconForControlPoint(cp: ControlPointModel) {
+  const symbol = new MilSymbol(cp.sidc, {
+    size: 24,
+    colorMode: "Dark",
+  });
+
+  return new Icon({
+    iconUrl: symbol.toDataURL(),
+    iconAnchor: new Point(symbol.getAnchor().x, symbol.getAnchor().y),
+  });
+}
+
+interface ControlPointProps {
+  controlPoint: ControlPointModel;
+}
+
+export default function ControlPoint(props: ControlPointProps) {
+  return (
+    <Marker
+      position={props.controlPoint.position}
+      icon={iconForControlPoint(props.controlPoint)}
+    >
+      <Popup>{props.controlPoint.name}</Popup>
+    </Marker>
+  );
+}

client/src/components/controlpoints/index.ts

@@ -0,0 +1 @@
+export { default } from "./ControlPoint";