Fix CreatedAt/UpdatedAt timezone and missing time [+ v0.13.0 changelog] (#2190)

* Fix CreatedAt/UpdatedAt timezone and missing time
* Create v1.13.0 changelog

ui/v2.5/src/components/Changelog/Changelog.tsx

@@ -15,6 +15,7 @@ import V090 from "./versions/v090.md";
 import V0100 from "./versions/v0100.md";
 import V0110 from "./versions/v0110.md";
 import V0120 from "./versions/v0120.md";
+import V0130 from "./versions/v0130.md";
 import { MarkdownPage } from "../Shared/MarkdownPage";
 
 // to avoid use of explicit any
@@ -53,9 +54,9 @@ const Changelog: React.FC = () => {
   // after new release:
   // add entry to releases, using the current* fields
   // then update the current fields.
-  const currentVersion = stashVersion || "v0.12.0";
+  const currentVersion = stashVersion || "v0.13.0";
   const currentDate = buildDate;
-  const currentPage = V0120;
+  const currentPage = V0130;
 
   const releases: IStashRelease[] = [
     {
@@ -64,9 +65,14 @@ const Changelog: React.FC = () => {
       page: currentPage,
       defaultOpen: true,
     },
+    {
+      version: "v0.12.0",
+      date: "2021-12-29",
+      page: V0120,
+    },
     {
       version: "v0.11.0",
-      date: "2021-11-15",
+      date: "2021-11-16",
       page: V0110,
     },
     {

ui/v2.5/src/components/Changelog/versions/v0130.md

@@ -0,0 +1,2 @@
+### 🐛 Bug fixes
+* Fix timezone issue with Created/Updated dates in scene/image/gallery details pages. ([#2190](https://github.com/stashapp/stash/pull/2190))

ui/v2.5/src/components/Galleries/GalleryDetails/GalleryDetailPanel.tsx

@@ -90,11 +90,11 @@ export const GalleryDetailPanel: React.FC<IGalleryDetailProps> = ({
           )}
           <h6>
             <FormattedMessage id="created_at" />:{" "}
-            {TextUtils.formatDate(intl, gallery.created_at)}{" "}
+            {TextUtils.formatDateTime(intl, gallery.created_at)}{" "}
           </h6>
           <h6>
             <FormattedMessage id="updated_at" />:{" "}
-            {TextUtils.formatDate(intl, gallery.updated_at)}{" "}
+            {TextUtils.formatDateTime(intl, gallery.updated_at)}{" "}
           </h6>
         </div>
         {gallery.studio && (

ui/v2.5/src/components/Images/ImageDetails/ImageDetailPanel.tsx

@@ -98,13 +98,13 @@ export const ImageDetailPanel: React.FC<IImageDetailProps> = (props) => {
             <h6>
               {" "}
               <FormattedMessage id="created_at" />:{" "}
-              {TextUtils.formatDate(intl, props.image.created_at)}{" "}
+              {TextUtils.formatDateTime(intl, props.image.created_at)}{" "}
             </h6>
           }
           {
             <h6>
               <FormattedMessage id="updated_at" />:{" "}
-              {TextUtils.formatDate(intl, props.image.updated_at)}{" "}
+              {TextUtils.formatDateTime(intl, props.image.updated_at)}{" "}
             </h6>
           }
         </div>

ui/v2.5/src/components/Scenes/SceneDetails/SceneDetailPanel.tsx

@@ -116,11 +116,11 @@ export const SceneDetailPanel: React.FC<ISceneDetailProps> = (props) => {
           )}
           <h6>
             <FormattedMessage id="created_at" />:{" "}
-            {TextUtils.formatDate(intl, props.scene.created_at)}{" "}
+            {TextUtils.formatDateTime(intl, props.scene.created_at)}{" "}
           </h6>
           <h6>
             <FormattedMessage id="updated_at" />:{" "}
-            {TextUtils.formatDate(intl, props.scene.updated_at)}{" "}
+            {TextUtils.formatDateTime(intl, props.scene.updated_at)}{" "}
           </h6>
         </div>
         {props.scene.studio && (

ui/v2.5/src/utils/text.ts

@@ -284,14 +284,22 @@ const sanitiseURL = (url?: string, siteURL?: URL) => {
   return `https://${url}`;
 };
 
-const formatDate = (intl: IntlShape, date?: string) => {
+const formatDate = (intl: IntlShape, date?: string, utc = true) => {
   if (!date) {
     return "";
   }
 
-  return intl.formatDate(date, { format: "long", timeZone: "utc" });
+  return intl.formatDate(date, {
+    format: "long",
+    timeZone: utc ? "utc" : undefined,
+  });
 };
 
+const formatDateTime = (intl: IntlShape, dateTime?: string, utc = false) =>
+  `${formatDate(intl, dateTime, utc)} ${intl.formatTime(dateTime, {
+    timeZone: utc ? "utc" : undefined,
+  })}`;
+
 const capitalize = (val: string) =>
   val
     .replace(/^[-_]*(.)/, (_, c) => c.toUpperCase())
@@ -311,6 +319,7 @@ const TextUtils = {
   twitterURL,
   instagramURL,
   formatDate,
+  formatDateTime,
   capitalize,
   secondsAsTimeString,
 };