Skip to content

Commit

Permalink
feat: Add lazy loading for images in TalkListContent
Browse files Browse the repository at this point in the history
  • Loading branch information
@tako0614
tako0614 committed Jul 15, 2024
1 parent 81776c2 commit 3a14c5f
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 9 deletions.
48 changes: 39 additions & 9 deletions islands/TalkListContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,9 +140,7 @@ function TalkListContent({ state }: { state: AppStateType }) {
}
}}
/>
{settingPage.value === 2 && (
<OtherSettingPage settingPage={settingPage} />
)}
{settingPage.value === 2 && <OtherSettingPage settingPage={settingPage} />}
{settingPage.value === 1 && (
<>
<div class="fixed z-50 w-full h-full bg-[rgba(75,92,108,0.4)] left-0 top-0 flex justify-center items-center p-3 md:pb-3 pb-[76px]">
Expand Down Expand Up @@ -288,7 +286,7 @@ function OtherSettingPage({ settingPage }: { settingPage: any }) {
const allowOtherServerUsers = useSignal(false);
useEffect(() => {
async function run() {
const res = await fetch("/api/v2/client/users/settings")
const res = await fetch("/api/v2/client/users/settings");
const json = await res.json();
addFriendById.value = json.settings.addFriendById;
allowOtherServerUsers.value = json.settings.allowOtherServerUsers;
Expand Down Expand Up @@ -318,7 +316,11 @@ function OtherSettingPage({ settingPage }: { settingPage: any }) {
</div>
<div class="w-1/2 flex">
<label class="inline-flex items-center cursor-pointer mx-auto">
<input type="checkbox" checked={addFriendById.value} class="sr-only peer" />
<input type="checkbox" checked={addFriendById.value} class="sr-only peer"
onChange={() => {
addFriendById.value = !addFriendById.value;
}}
/>
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600">
</div>
</label>
Expand All @@ -330,20 +332,48 @@ function OtherSettingPage({ settingPage }: { settingPage: any }) {
</div>
<div class="w-1/2 flex">
<label class="inline-flex items-center cursor-pointer mx-auto">
<input type="checkbox" checked={allowOtherServerUsers.value} class="sr-only peer" />
<input type="checkbox" checked={allowOtherServerUsers.value} class="sr-only peer"
onChange={() => {
allowOtherServerUsers.value = !allowOtherServerUsers.value;
}}
/>
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600">
</div>
</label>
</div>
</div>
</div>
<div class="flex">
<button
<button
type="submit"
class="rounded-lg mx-auto text-white bg-[#007AFF] ring-1 ring-[rgba(0,122,255,12%)] shadow-[0_1px_2.5px_rgba(0,122,255,24%)] px-5 py-2 hover:bg-[#1f7adb] focus:outline-none disabled:bg-gray-300 disabled:dark:bg-gray-700"
onClick={async () => {
const csrftokenRes = await fetch("/api/v2/client/csrftoken");
const csrftokenJson = await csrftokenRes.json();
const csrftoken = csrftokenJson.csrftoken;
const res = await fetch("/api/v2/client/settings/privacy", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
setting: {
addFriendById: addFriendById.value,
allowOtherServerUsers: allowOtherServerUsers.value,
},
csrftoken: csrftoken,
}),
});
const json = await res.json();
if(!json.status) {
alert("エラーが発生しました");
return;
}
alert("保存しました");
}}
>
更新
</button>
更新
</button>
</div>
</div>
</div>
Expand Down
38 changes: 38 additions & 0 deletions routes/api/v2/client/settings/privacy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,41 @@
//POST /api/v2/client/settings/privacy
// { setting: { ... }, csrftoken: string }
// -> { status: boolean, message: string }
import takos from "../../../../../util/takos.ts";
import userConfig from "../../../../../models/userConfig.ts";
export const handler = {
async POST(req: Request, ctx: any) {
if (!ctx.state.data.loggedIn) {
return ctx.json({ status: false, message: "You are not logged in" });
}
let body;
try {
body = await req.json();
} catch (e) {
return ctx.json({ status: false, message: "Invalid JSON" });
}
const userid = ctx.state.data.userid;
const setting = body.setting;
const csrftoken = body.csrftoken;
if (await takos.checkCsrfToken(csrftoken, ctx.state.data.sessionid) === false) {
return new Response(JSON.stringify({ status: false, message: "Invalid CSRF Token" }), {
headers: { "Content-Type": "application/json" },
status: 400,
});
}
if (
typeof setting !== "object" || setting === null || setting.addFriendById === undefined || setting.allowOtherServerUsers === undefined || typeof setting.addFriendById !== "boolean" ||
typeof setting.allowOtherServerUsers !== "boolean"
) {
return new Response(JSON.stringify({ status: false, message: "Invalid setting" }), {
headers: { "Content-Type": "application/json" },
status: 400,
});
}
await userConfig.updateOne({ userid: userid }, { addFriendById: setting.addFriendById, allowOtherServerUsers: setting.allowOtherServerUsers });
return new Response(JSON.stringify({ status: true, message: "Success" }), {
headers: { "Content-Type": "application/json" },
status: 200,
});
},
};

0 comments on commit 3a14c5f

Please sign in to comment.