Reorganize React project structure.

Whatever I was doing was getting out of control :)

client/src/components/flightplan/FlightPlan.tsx

@@ -0,0 +1,33 @@
+import { Flight } from "../../api/flight";
+import { Polyline } from "react-leaflet";
+
+const BLUE_PATH = "#0084ff";
+const RED_PATH = "#c85050";
+
+interface FlightPlanProps {
+  flight: Flight;
+  selected: boolean;
+}
+
+function FlightPlanPath(props: FlightPlanProps) {
+  const color = props.flight.blue ? BLUE_PATH : RED_PATH;
+  const waypoints = props.flight.waypoints;
+  if (waypoints == null) {
+    return <></>;
+  }
+  const points = waypoints.map((waypoint) => waypoint.position);
+  return (
+    <Polyline
+      positions={points}
+      pathOptions={{ color: color, interactive: false }}
+    />
+  );
+}
+
+export default function FlightPlan(props: FlightPlanProps) {
+  return (
+    <>
+      <FlightPlanPath {...props} />
+    </>
+  );
+}

client/src/components/flightplan/index.ts

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