+
- ❌
- {state.error}
+ ❌
+
+ Error:
+ {state.error}
+
)}
diff --git a/src/index.tsx b/src/index.tsx
index e190da2..41f200a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -13,22 +13,31 @@ app.use(renderer);
// Main page
app.get("/", (c) => {
return c.render(
-
+
-
-
- URL Shortener
-
-
- Shorten your long URLs instantly
-
-
-
-
+
+
+ URL Shortener
+ Shorten your long URLs instantly
+
+
+
+
+
+
,
+
);
});
@@ -41,7 +50,7 @@ app.get("/:code", async (c) => {
- ,
+
);
});
diff --git a/src/lib/formReducer.ts b/src/lib/formReducer.ts
new file mode 100644
index 0000000..9991985
--- /dev/null
+++ b/src/lib/formReducer.ts
@@ -0,0 +1,87 @@
+// Define the state shape
+export interface FormState {
+ url: string;
+ shortCodeInput: string;
+ loading: boolean;
+ result: {
+ id: string;
+ url: string;
+ shortCode: string;
+ createdAt: string;
+ updatedAt: string;
+ count: number;
+ warning?: string;
+ } | null;
+ error: string;
+ warning: string;
+ copied: boolean;
+}
+
+// Define action types
+export type FormAction =
+ | { type: "SET_URL"; payload: string }
+ | { type: "SET_SHORT_CODE"; payload: string }
+ | { type: "SUBMIT_START" }
+ | { type: "SUBMIT_SUCCESS"; payload: { result: FormState["result"]; warning?: string } }
+ | { type: "SUBMIT_ERROR"; payload: string }
+ | { type: "COPY_SUCCESS" }
+ | { type: "COPY_RESET" }
+ | { type: "RESET_MESSAGES" };
+
+// Initial state
+export const initialFormState: FormState = {
+ url: "",
+ shortCodeInput: "",
+ loading: false,
+ result: null,
+ error: "",
+ warning: "",
+ copied: false,
+};
+
+// Reducer function
+export function formReducer(state: FormState, action: FormAction): FormState {
+ switch (action.type) {
+ case "SET_URL":
+ return { ...state, url: action.payload };
+
+ case "SET_SHORT_CODE":
+ return { ...state, shortCodeInput: action.payload };
+
+ case "SUBMIT_START":
+ return {
+ ...state,
+ loading: true,
+ result: null,
+ error: "",
+ warning: "",
+ };
+
+ case "SUBMIT_SUCCESS":
+ return {
+ ...state,
+ loading: false,
+ result: action.payload.result,
+ warning: action.payload.warning || "",
+ };
+
+ case "SUBMIT_ERROR":
+ return {
+ ...state,
+ loading: false,
+ error: action.payload,
+ };
+
+ case "COPY_SUCCESS":
+ return { ...state, copied: true };
+
+ case "COPY_RESET":
+ return { ...state, copied: false };
+
+ case "RESET_MESSAGES":
+ return { ...state, error: "", warning: "" };
+
+ default:
+ return state;
+ }
+}
diff --git a/src/renderer.tsx b/src/renderer.tsx
index edd545d..38758a4 100644
--- a/src/renderer.tsx
+++ b/src/renderer.tsx
@@ -7,12 +7,24 @@ export const renderer = jsxRenderer(({ children }) => {
+
Shortin - URL Shortener
-
+
+
+
- {children}
+
+ {/* Skip to main content link for keyboard navigation */}
+
+ Skip to main content
+
+ {children}
+