axios http requests

Author: micheleambrosio

.env

@@ -0,0 +1 @@
+VITE_API_URL=https://dummyjson.com

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

App.css

@@ -0,0 +1,6 @@
+@import "tailwindcss";
+
+#root {
+  max-width: 700px;
+  margin: auto;
+}

App.tsx

@@ -0,0 +1,12 @@
+import "./App.css";
+import Login from "./components/Login";
+
+const App: React.FC = () => {
+  return (
+    <div className="container pt-10 mx-auto flex h-full items-center justify-center min-h-screen">
+      <Login />
+    </div>
+  );
+};
+
+export default App;

README.md

@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

components/Login/index.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import axios, { AxiosError } from "axios";
+import Posts from "../Posts";
+
+const Login: React.FC = () => {
+  const API_URL = import.meta.env.VITE_API_URL;
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+  const login = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    try {
+      const res = await axios.post(`${API_URL}/user/login`, {
+        username,
+        password,
+      });
+
+      localStorage.setItem("auth-token", res.data.accessToken);
+      setIsAuthenticated(true);
+    } catch (err) {
+      const error = err as AxiosError;
+
+      if (error.response?.data) {
+        alert(error.response?.data?.message);
+        return;
+      }
+
+      alert("Error to sign in. Please, check your credentials.");
+      console.error(error);
+    }
+  };
+
+  if (isAuthenticated) {
+    return <Posts />;
+  }
+
+  return (
+    <div className="border border-gray-200 p-5 rounded">
+      <h1 className="text-2xl mb-2">Login</h1>
+      <p className="font-light text-sm text-gray-600 mb-5 mt-0">
+        Add your credentials and sign in
+      </p>
+      <form onSubmit={login}>
+        <input
+          className="w-full mb-5 p-2 border rounded border-gray-200"
+          value={username}
+          required
+          onChange={(e) => setUsername(e.target.value)}
+          placeholder="Username"
+        />
+        <input
+          className="w-full mb-5 p-2 border rounded border-gray-200"
+          value={password}
+          required
+          type="password"
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder="Password"
+        />
+        <button
+          type="submit"
+          className="bg-indigo-500 text-white p-2 rounded pl-5 pr-5 w-full cursor-pointer"
+        >
+          Sign in
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default Login;

components/Posts/Post/index.tsx

@@ -0,0 +1,70 @@
+import { useState } from "react";
+
+interface PostProps {
+  id: number;
+  title: string;
+  body: string;
+  onDelete: (id: number) => void;
+  onEdit: (id: number, title: string, body: string) => void;
+}
+
+const Post: React.FC<PostProps> = ({ id, title, body, onDelete, onEdit }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editTitle, setEditTitle] = useState(title);
+  const [editBody, setEditBody] = useState(body);
+
+  const handleSave = () => {
+    onEdit(id, editTitle, editBody);
+    setIsEditing(false);
+  };
+
+  return (
+    <div className="p-4 border rounded mb-4 border-gray-200">
+      {isEditing ? (
+        <>
+          <input
+            className="w-full mb-2 p-2 border rounded border-gray-200"
+            value={editTitle}
+            onChange={(e) => setEditTitle(e.target.value)}
+          />
+          <textarea
+            className="w-full mb-2 p-2 border rounded border-gray-200 min-h-30"
+            value={editBody}
+            onChange={(e) => setEditBody(e.target.value)}
+          />
+          <button
+            onClick={() => setIsEditing(false)}
+            className=" text-indigo-500 p-2 rounded mr-5"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSave}
+            className="bg-indigo-500 p-2 rounded mr-2 text-white pl-5 pr-5"
+          >
+            Save
+          </button>
+        </>
+      ) : (
+        <>
+          <h3 className="text-lg font-bold">{title}</h3>
+          <p className="mb-5">{body}</p>
+          <button
+            onClick={() => setIsEditing(true)}
+            className="p-2 rounded mr-2 text-indigo-500 hover:bg-gray-100 cursor-pointer"
+          >
+            Edit
+          </button>
+          <button
+            onClick={() => onDelete(id)}
+            className="p-2 rounded cursor-pointer text-red-700 hover:bg-gray-100"
+          >
+            Delete
+          </button>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default Post;