Support exporting to CSV files

Author: Cody Hoover

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-    "editor.tabSize": 2
+    "editor.tabSize": 2,
+    "typescript.tsdk": "node_modules\\typescript\\lib"
 }

src/components/Settings.tsx

@@ -62,7 +62,7 @@ export function Settings(props: SettingsProps) {
           <label id="download-label">4. Download</label>
           <button className="download-button" aria-labelledby="download-label download-ical-button" id="download-ical-button" onClick={() => onDownload("ical")}>iCal</button>
           <button className="download-button" aria-labelledby="download-label download-json-button" id="download-json-button" onClick={() => onDownload("json")}>json</button>
-          {/* <button className="download-button" aria-labelledby="download-label download-csv-button" id="download-csv-button" onClick={() => onDownload("csv")}>csv</button> */}
+          <button className="download-button" aria-labelledby="download-label download-csv-button" id="download-csv-button" onClick={() => onDownload("csv")}>csv</button>
         </div>
       </div>
     </Card>

src/lib/csvProcessor.ts

@@ -0,0 +1,90 @@
+import {
+  parse as parseCsv,
+  unparse as unparseCsv,
+  UnparseConfig
+} from "papaparse";
+
+import { Plan, Workout, Units } from "./workout";
+
+type PlanInfo = Omit<Plan, "workouts">;
+type PlanHeadings = keyof PlanInfo;
+type WorkoutHeadings = keyof Workout;
+
+const PLAN_HEADINGS: PlanHeadings[] = [
+  "title",
+  "raceType",
+  "raceDistance",
+  "units"
+];
+const NEWLINE = "\r\n";
+const UNPARSE_OPTIONS: UnparseConfig = {
+  header: true,
+  newline: NEWLINE,
+  skipEmptyLines: true
+};
+
+export const planToCsv = (plan: Plan): string => {
+  const { workouts, ...planInfo } = plan;
+
+  const planInfoData = [
+    PLAN_HEADINGS,
+    [planInfo.title, planInfo.raceType, planInfo.raceDistance, planInfo.units]
+  ];
+
+  const csv = [
+    unparseCsv(planInfoData, UNPARSE_OPTIONS),
+    unparseCsv(workouts, UNPARSE_OPTIONS)
+  ].join(NEWLINE);
+
+  return csv;
+};
+
+export const csvToPlan = (file: string): Plan | null => {
+  try {
+    const result = parseCsv(file, { skipEmptyLines: true });
+    const [
+      planHeadings,
+      planValues,
+      workoutHeadings,
+      ...workouts
+    ] = result.data as [
+      PlanHeadings[],
+      string[],
+      WorkoutHeadings[],
+      ...string[][]
+    ];
+
+    // Get column order from the file
+    const titleIndex = planHeadings.indexOf("title");
+    const raceTypeIndex = planHeadings.indexOf("raceType");
+    const raceDistanceIndex = planHeadings.indexOf("raceDistance");
+    const unitsIndex = planHeadings.indexOf("units");
+    const descriptionIndex = workoutHeadings.indexOf("description");
+    const workoutDistanceIndex = workoutHeadings.indexOf("totalDistance");
+
+    // TODO: Validate values
+    const plan: Plan = {
+      title: planValues[titleIndex],
+      raceType: planValues[raceTypeIndex],
+      raceDistance: parseFloat(planValues[raceDistanceIndex]),
+      units: planValues[unitsIndex] as Units,
+      workouts: workouts.reduce(
+        (output, workout) => {
+          if (workout.length === 2) {
+            output.push({
+              description: workout[descriptionIndex],
+              totalDistance: parseFloat(workout[workoutDistanceIndex])
+            });
+          }
+
+          return output;
+        },
+        [] as Workout[]
+      )
+    };
+
+    return plan;
+  } catch (e) {
+    return null;
+  }
+};

src/lib/exporter.ts

@@ -3,15 +3,17 @@ import { ics, saveAs } from "../lib/ics";
 import { ScheduledPlan, Plan } from "./workout";
 import { formatWorkoutFromTemplate } from "./formatter";
 import { chunkArray } from "../lib/utils";
+import { planToCsv } from "./csvProcessor";
 
-export type Filetype = 'ical' | 'json' | 'csv';
+export type Filetype = "ical" | "json" | "csv";
 
 export function downloadPlanTemplate(plan: Plan, filetype: Filetype) {
-  switch(filetype) {
-    case 'json':
+  switch (filetype) {
+    case "json":
       downloadJson(plan);
       return;
-    case 'csv':
+    case "csv":
+      downloadCsv(plan);
       return;
   }
 }
@@ -49,5 +51,13 @@ export function downloadPlanCalendar(plan: ScheduledPlan) {
 }
 
 function downloadJson(plan: Plan) {
-  saveAs!(new Blob([JSON.stringify(plan, null, '  ')]), `${plan.title}.json`);
+  downloadCore(JSON.stringify(plan, null, "  "), `${plan.title}.json`);
+}
+
+function downloadCsv(plan: Plan) {
+  downloadCore(planToCsv(plan), `${plan.title}.csv`);
+}
+
+function downloadCore(file: string, filename: string) {
+  saveAs!(new Blob([file]), filename);
 }

src/lib/importer.ts

@@ -1,21 +1,21 @@
-import { Plan, Workout, Units } from "./workout";
-import { parse as parseCsv } from "papaparse";
+import { Plan } from "./workout";
 import { getFileExtension } from "./utils";
+import { csvToPlan } from "./csvProcessor";
 
 export interface UploadResult {
   plan?: Plan;
   error?: string;
 }
 
-type FileProcessor = (file: string) => Promise<Plan>;
+type FileProcessor = (file: string) => Plan | null;
 
 export const importFile = (file: File): Promise<Plan> => {
   const extension = getFileExtension(file.name);
   switch (extension) {
     case ".json":
       return importCore(file, processJsonFile);
     case ".csv":
-      return importCore(file, processCsvFile);
+      return importCore(file, csvToPlan);
     default:
       return Promise.reject(
         `Could not import file. Filetype is not supported: ${extension}`
@@ -31,9 +31,11 @@ const importCore = (file: File, processFile: FileProcessor): Promise<Plan> => {
       const result =
         typedEvent && typedEvent.target && typedEvent.target.result;
 
-      try {
-        resolve(processFile(result));
-      } catch (e) {
+      const plan = processFile(result);
+
+      if (plan) {
+        resolve(plan);
+      } else {
         reject(`Unable to read ${file.name}. Check the file and try again.`);
       }
     };
@@ -42,72 +44,13 @@ const importCore = (file: File, processFile: FileProcessor): Promise<Plan> => {
   });
 };
 
-const processJsonFile = (file: string): Promise<Plan> => {
+const processJsonFile = (file: string): Plan | null => {
   try {
     const planObject = JSON.parse(file) as Plan;
     // TODO: validate object
-    return Promise.resolve(planObject);
-  } catch (e) {
-    return Promise.reject(
-      `Unable to read the json file. Check the file and try again.`
-    );
-  }
-};
-
-type PlanHeadings = keyof Plan;
-type WorkoutHeadings = keyof Workout;
-type WorkoutValue = [string, string];
-
-const processCsvFile = (file: string): Promise<Plan> => {
-  try {
-    const result = parseCsv(file);
-    const [
-      planHeadings,
-      planValues,
-      workoutHeadings,
-      ...workouts
-    ] = result.data as [
-      PlanHeadings[],
-      string[],
-      WorkoutHeadings[],
-      ...string[][]
-    ];
-
-    const titleIndex = planHeadings.indexOf("title");
-    const raceTypeIndex = planHeadings.indexOf("raceType");
-    const raceDistanceIndex = planHeadings.indexOf("raceDistance");
-    const unitsIndex = planHeadings.indexOf("units");
-
-    const descriptionIndex = workoutHeadings.indexOf("description");
-    const workoutDistanceIndex = workoutHeadings.indexOf("totalDistance");
-
-    // TODO: Validate values
-    const plan: Plan = {
-      // Add some resiliency for the header in case these are in a different order
-      title: planValues[titleIndex],
-      raceType: planValues[raceTypeIndex],
-      raceDistance: parseFloat(planValues[raceDistanceIndex]),
-      units: planValues[unitsIndex] as Units,
-      workouts: workouts.reduce(
-        (output, workout) => {
-          if (workout.length === 2) {
-            output.push({
-              description: workout[descriptionIndex],
-              totalDistance: parseFloat(workout[workoutDistanceIndex])
-            });
-          }
-
-          return output;
-        },
-        [] as Workout[]
-      )
-    };
-
-    return Promise.resolve(plan);
+    return planObject;
   } catch (e) {
-    return Promise.reject(
-      `Unable to read the csv file. Check the file and try again.`
-    );
+    return null;
   }
 };