Better name for app state (#1300)

* Better name for app state

* Snapshot

src/appState.ts

@@ -1,5 +1,6 @@
 import { AppState, FlooredNumber } from "./types";
 import { getDateTime } from "./utils";
+import { t } from "./i18n";
 
 export const DEFAULT_FONT = "20px Virgil";
 
@@ -28,7 +29,7 @@ export function getDefaultAppState(): AppState {
     cursorY: 0,
     cursorButton: "up",
     scrolledOutside: false,
-    name: `excalidraw-${getDateTime()}`,
+    name: `${t("labels.untitled")}-${getDateTime()}`,
     username: "",
     isCollaborating: false,
     isResizing: false,

src/locales/en.json

@@ -46,7 +46,8 @@
     "actions": "Actions",
     "language": "Language",
     "createRoom": "Share a live-collaboration session",
-    "duplicateSelection": "Duplicate"
+    "duplicateSelection": "Duplicate",
+    "untitled": "Untitled"
   },
   "buttons": {
     "clearReset": "Reset the canvas",

src/utils.ts

@@ -10,21 +10,20 @@ export function setDateTimeForTests(dateTime: string) {
   mockDateTime = dateTime;
 }
 
-export function getDateTime() {
+export const getDateTime = () => {
   if (mockDateTime) {
     return mockDateTime;
   }
 
   const date = new Date();
   const year = date.getFullYear();
-  const month = date.getMonth() + 1;
+  const month = `${date.getMonth() + 1}`.padStart(2, "0");
-  const day = date.getDate();
+  const day = `${date.getDate()}`.padStart(2, "0");
-  const hr = date.getHours();
+  const hr = `${date.getHours()}`.padStart(2, "0");
-  const min = date.getMinutes();
+  const min = `${date.getMinutes()}`.padStart(2, "0");
-  const secs = date.getSeconds();
 
-  return `${year}${month}${day}${hr}${min}${secs}`;
+  return `${year}-${month}-${day}-${hr}${min}`;
-}
+};
 
 export function capitalizeString(str: string) {
   return str.charAt(0).toUpperCase() + str.slice(1);