From 081d56c597f8b8ba289daa12b59429b4279ce0d8 Mon Sep 17 00:00:00 2001
From: cspark <git@cspark.dev>
Date: Mon, 8 Jul 2024 19:26:34 +0100
Subject: [PATCH] Clear changed settings on save, styling improvements on
 Homepage and blog page

---
 src/index.css          | 31 +++++++++++++++++++++-
 src/pages/Blog.tsx     |  3 +--
 src/pages/Home.tsx     |  2 +-
 src/pages/Settings.tsx | 59 +++++++++++++++++++++++-------------------
 4 files changed, 64 insertions(+), 31 deletions(-)

diff --git a/src/index.css b/src/index.css
index e9b6ca6..ab87676 100644
--- a/src/index.css
+++ b/src/index.css
@@ -29,6 +29,11 @@ h1 {
   margin: 0px;
 }
 
+h2 {
+  padding: 0px;
+  margin: 0px;
+}
+
 h4 {
   padding: 0px;
   margin: 0px;
@@ -173,13 +178,36 @@ a {
   flex-grow: 1;
 }
 
+.blogBox h1 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.blogBox h2 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.blogBox h3 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .blogEntryGrid {
+  justify-content: center;
+  align-items: center;
+  max-width: 100%;
+  min-height: 100%;
   display: grid;
   gap: 20px;
   padding: 10px;
-  grid-auto-flow: column;
+  grid-auto-flow: row;
   grid-auto-rows: var(--blog-card-height);
   grid-auto-columns: var(--blog-card-width);
+  grid-template-columns: repeat(auto-fill, var(--blog-card-width));
 }
 
 .blogEntryCard {
@@ -239,6 +267,7 @@ a {
   padding: 0px;
   margin: 0px;
   background: var(--background-image);
+  overflow-y: scroll;
 }
 
 .centeredBoxArea {
diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx
index 73255a1..1e4950b 100644
--- a/src/pages/Blog.tsx
+++ b/src/pages/Blog.tsx
@@ -36,9 +36,8 @@ export default function Home() {
 
   return (
     <>
-      <div className="standardHorizontalTilingGrid">
+      <div className="standardHorizontalTilingGrid blogBox">
         <TilingItem>
-          <h1>Now on blog page!</h1>
           <div
             dangerouslySetInnerHTML={{
               __html: DOMPurify.sanitize(blogContents),
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 063d075..1ae240e 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -7,7 +7,7 @@ export default function Home() {
 
   React.useEffect(() => {
     fetch(
-      "http://127.0.0.1:8000/api/user/blog/cardInfo/range?rangeStart=1&rangeEnd=25&sortByLatest=true",
+      "http://127.0.0.1:8000/api/user/blog/cardInfo/range?rangeStart=1&rangeEnd=50&sortByLatest=true",
       {
         method: "GET",
         headers: {
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 962aa85..867f102 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -13,7 +13,11 @@ interface Props {
 function renderCurrentSetting(setting: string, changedSettingsHook: object) {
   switch (setting) {
     case "Account":
-      return <AccountSetting changedSettingsHook={changedSettingsHook}></AccountSetting>;
+      return (
+        <AccountSetting
+          changedSettingsHook={changedSettingsHook}
+        ></AccountSetting>
+      );
     case "Security":
       return <SecuritySetting></SecuritySetting>;
     default:
@@ -35,7 +39,6 @@ export default function Home({ authTokenStorageHandler }: Props) {
     setChangedSettings,
   };
 
-
   if (!authTokenStorageHandler.authTokenValue) {
     return <Navigate to="/home"></Navigate>;
   }
@@ -43,23 +46,23 @@ export default function Home({ authTokenStorageHandler }: Props) {
   function onSettingsSave(formEvent) {
     formEvent.preventDefault();
 
-
-      for (let [key, value] of Object.entries(changedSettings)) {
-          fetch("http://127.0.0.1:8000/api/user/settings/change/" + key, {
-            method: "PUT",
-            headers: {
-            	"Content-Type": "application/json",
-            },
-	    body: JSON.stringify({
-          	"authToken": authTokenStorageHandler.authTokenValue,
-		"newValue": value,
-	    }),
-          })
-            .then((response) => response.json())
-            .then((responseParsed: Object) => {
-              console.log(responseParsed);
-            });
-      };
+    for (let [key, value] of Object.entries(changedSettings)) {
+      fetch("http://127.0.0.1:8000/api/user/settings/change/" + key, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          authToken: authTokenStorageHandler.authTokenValue,
+          newValue: value,
+        }),
+      })
+        .then((response) => response.json())
+        .then((responseParsed: Object) => {
+          console.log(responseParsed);
+          setChangedSettings({});
+        });
+    }
   }
 
   return (
@@ -80,14 +83,16 @@ export default function Home({ authTokenStorageHandler }: Props) {
               </ul>
             </div>
             <hr></hr>
-	      <form className="currentSettingBox" onSubmit={onSettingsSave}>
-                 <div className="currentSetting">
-	            {renderCurrentSetting(currentSetting, changedSettingsHook)}
-                 </div>
-	         {Object.keys(changedSettings).length > 0 ? ( <button type="submit">Save</button> ) : null }
-		 <p>{JSON.stringify(changedSettings)}</p>
-		 <p>{Object.keys(changedSettings).length}</p>
-	      </form>
+            <form className="currentSettingBox" onSubmit={onSettingsSave}>
+              <div className="currentSetting">
+                {renderCurrentSetting(currentSetting, changedSettingsHook)}
+              </div>
+              {Object.keys(changedSettings).length > 0 ? (
+                <button type="submit">Save</button>
+              ) : null}
+              <p>{JSON.stringify(changedSettings)}</p>
+              <p>{Object.keys(changedSettings).length}</p>
+            </form>
           </div>
         </TilingItem>
       </div>