frontend

Yuna.Tests/Repositories/DeviceRepositoryTests.cs

@@ -20,7 +20,8 @@ namespace Yuna.Tests.Repositories
             {
                 Name = "Test Device",
                 Description = "Test Description",
-                DeviceUrl = "Test Url"
+                DeviceUrl = "Test Url",
+                UserId = 1
             };
             var result = await repo.Create(device);
 
@@ -29,6 +30,7 @@ namespace Yuna.Tests.Repositories
             Assert.Equal(result.Name, device.Name);
             Assert.Equal(result.Description, device.Description);
             Assert.Equal(result.DeviceUrl, device.DeviceUrl);
+            Assert.Equal(result.UserId, device.UserId);
         }
 
         [Fact]
@@ -62,5 +64,21 @@ namespace Yuna.Tests.Repositories
             Assert.NotNull(result);
             Assert.NotEmpty(result);
         }
+
+        [Fact]
+        public async Task GetListForUser_GetsListForUser()
+        {
+            // Arrange
+            Settings.Init();
+            var _context = new DapperContext(true);
+            var repo = new DeviceRepository(_context);
+
+            //Act
+            var result = await repo.GetList(1);
+
+            //Assert
+            Assert.NotNull(result);
+            Assert.True(result.All(x => x.UserId == 1));
+        }
     }
 }

Yuna.Website/Yuna.Website.Server/API/AuthEndpoints.cs

@@ -43,7 +43,7 @@ namespace Yuna.Website.Server.API
             var hashedPassword = Encrypter.HashPassword(request.RawPassword, request.UserName);
             if (!hashedPassword.Equals(userFromDb.HashedPassword)) return Results.Unauthorized();
             await SetAccessToken(context, tokenService, userFromDb);
-            return Results.Ok();
+            return Results.Ok("");
         }
 
 
@@ -54,6 +54,11 @@ namespace Yuna.Website.Server.API
             await context.SignInAsync(CookieAuthenticationDefaults.AuthenticationScheme, new ClaimsPrincipal(identity));
         }
 
+        private static void SetFrontendCookie(User user, HttpContext context)
+        {
+            context.SaveToCookies("user", new CookieUserModel(user));
+        }
+
         public class RegisterUserRequest
         {
             public string username { get; set; } = null!;

Yuna.Website/Yuna.Website.Server/API/DeviceEndpoints.cs

@@ -4,6 +4,8 @@ using System.Text.Json.Serialization;
 using Yuna.Website.Server.Services.DeviceSkillService;
 using Yuna.Website.Server.Services.DeviceService;
 using Yuna.Website.Server.Model;
+using System.Security.Claims;
+using Yuna.Website.Server.Infrastructure;
 
 namespace Yuna.Website.Server.API
 {
@@ -47,13 +49,18 @@ namespace Yuna.Website.Server.API
         }
 
         [Authorize]
-        public async Task<IResult> CreateDevice([FromBody] CreateDeviceResult request, IDeviceService deviceService)
+        public async Task<IResult> CreateDevice([FromBody] CreateDeviceResult request, IDeviceService deviceService, HttpContext context)
         {
+
+            var userId = context.GetUserIdFromCookie();
+            if (userId is null) return Results.Unauthorized();
+
             var device = new Device()
             {
                 Description = request.Description,
                 DeviceUrl = request.DeviceUrl,
-                Name = request.Name
+                Name = request.Name,
+                UserId = (long)userId
             };
 
             var result = await deviceService.Create(device);
@@ -74,9 +81,20 @@ namespace Yuna.Website.Server.API
         }
 
         [Authorize]
-        public async Task<IResult> GetAll(IDeviceService deviceService)
+        public async Task<IResult> GetAll(IDeviceService deviceService, HttpContext context)
         {
-            var result = await deviceService.GetList();
+
+            var isAdmin = context.GetRoleFromCookie();
+            if(isAdmin)
+            {
+                var adminResult = await deviceService.GetList();
+                return Results.Ok(adminResult);
+            }
+
+            var userId = context.GetUserIdFromCookie();
+            if (userId is null) return Results.Unauthorized();
+
+            var result = await deviceService.GetList((long)userId);
             return Results.Ok(result);
         }
 

Yuna.Website/Yuna.Website.Server/Infrastructure/CookieExtensions.cs

@@ -1,4 +1,7 @@
-namespace Yuna.Website.Server.Infrastructure
+using System.Security.Claims;
+using Yuna.Website.Server.Model;
+
+namespace Yuna.Website.Server.Infrastructure
 {
     public static class CookieExtensions
     {
@@ -30,5 +33,21 @@
             context.Response.Cookies.Append(key, dataStr, new CookieOptions() { HttpOnly = true, MaxAge = maxAge ?? TimeSpan.FromDays(365) });
         }
 
+        public static long? GetUserIdFromCookie(this HttpContext context)
+        {
+            var idStr = context.User.FindFirstValue(ClaimTypes.NameIdentifier);
+            var isParsed = long.TryParse(idStr, out var result);
+            return isParsed ? result : null;
+        }
+
+        public static bool GetRoleFromCookie(this HttpContext context)
+        {
+            if (bool.TryParse(context.User.FindFirstValue(ClaimTypes.Role), out var result))
+            {
+                return result;
+            }
+            return false;
+        }
+
     }
 }

Yuna.Website/Yuna.Website.Server/Infrastructure/CookieUserModel.cs

@@ -0,0 +1,21 @@
+using System.Text.Json.Serialization;
+using Yuna.Website.Server.Model;
+
+namespace Yuna.Website.Server.Infrastructure
+{
+    public class CookieUserModel
+    {
+        public CookieUserModel(User user)
+        {
+            Id = user.Id;
+            Username = user.UserName;
+        }
+
+
+        [JsonPropertyName("username")]
+        public string Username { get; }
+        
+        [JsonPropertyName("id")]
+        public long Id { get; }
+    }
+}

Yuna.Website/Yuna.Website.Server/Model/Device.cs

@@ -11,7 +11,7 @@
         {
 
         }
-
+        public long UserId { get; set; }
         public long Id { get; set; }
         public string Name { get; set; } = null!;
         public string Description { get; set; } = null!;

Yuna.Website/Yuna.Website.Server/Services/DeviceService/DeviceService.cs

@@ -86,6 +86,7 @@ namespace Yuna.Website.Server.Services.DeviceService
 
                 if(propValue.TryGetDouble(out var value))
                 {
+                    value = Math.Round(value, 2);
                     result.Add(prop.Id, value.ToString());
                     continue;
                 }
@@ -123,5 +124,11 @@ namespace Yuna.Website.Server.Services.DeviceService
             var result = await _deviceRepository.GetList();
             return result ?? [];
         }
+
+        public async Task<IReadOnlyList<Device>> GetList(long userId)
+        {
+            var result = await _deviceRepository.GetList(userId);
+            return result ?? [];
+        }
     }
 }

Yuna.Website/Yuna.Website.Server/Services/DeviceService/IDeviceService.cs

@@ -6,6 +6,7 @@ namespace Yuna.Website.Server.Services.DeviceService
     {
         public Task<Device?> GetById(long id);
         public Task<IReadOnlyList<Device>> GetList();
+        public Task<IReadOnlyList<Device>> GetList(long userId);
         public Task<Device?> Create(Device device);
         //public Task<User?> Update(User user);
         public Task<Device?> Delete(long id);

Yuna.Website/Yuna.Website.Server/Services/TokenService/TokenService.cs

@@ -19,6 +19,7 @@ namespace Yuna.Website.Server.Services.TokenService
             {
                 new(ClaimTypes.Name, user.UserName),
                 new(ClaimTypes.NameIdentifier, user.Id.ToString()),
+                new(ClaimTypes.Role, user.IsAdmin.ToString())
             };
 
             return new ClaimsIdentity(claims, "Cookies");

Yuna.Website/Yuna.Website.Server/Starter.cs

@@ -144,10 +144,12 @@ namespace Yuna.Website.Server
                 {
                     options.Cookie = new()
                     {
+                        SameSite = SameSiteMode.None,
+                        SecurePolicy = CookieSecurePolicy.Always,
                         HttpOnly = true,
                         IsEssential = true,
                         Name = "access_token",
-                        MaxAge = TimeSpan.FromDays(180)
+                        MaxAge = TimeSpan.FromDays(180),
                     };
                     options.SlidingExpiration = false;
                     options.ExpireTimeSpan = Settings.RefreshTokenLifeTime;
@@ -191,10 +193,34 @@ namespace Yuna.Website.Server
 
         public static void Configure(WebApplication app)
         {
-            app.UseCors(x => x.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
+            if (app.Environment.IsDevelopment())
+            {
+                app.UseCors(x => x.WithOrigins("https://localhost:5173", "http://localhost:5173").AllowAnyMethod().AllowAnyHeader().AllowCredentials());
+            }
+
+            else
+            {
+                app.UseCors(x => x.AllowAnyMethod().AllowAnyHeader().AllowCredentials());
+            }
+            app.UseAuthentication();
+            app.UseAuthorization();
             app.UseDefaultFiles();
             app.UseStaticFiles();
 
+            
+
+            app.Use(async (context, next) =>
+            {
+                var isLoggedIn = context.User?.Identity?.IsAuthenticated ?? false;
+                if(context.Request.Path.StartsWithSegments("/login") && isLoggedIn)
+                {
+                    context.Response.Redirect("/");
+                    return;
+                }
+
+                await next();
+            });
+
             // Configure the HTTP request pipeline.
             if (app.Environment.IsDevelopment())
             {

Yuna.Website/Yuna.Website.Server/Storage/DapperContext.cs

@@ -19,16 +19,11 @@ namespace Yuna.Website.Server.Storage
             _configuration = null!;
         }
 
-        private IDbConnection? _dbConnection;
+        
-        public  IDbConnection Connection
+        public  IDbConnection Connection => new NpgsqlConnection(Settings.DbConnectionStr);
-        {
-            get
-            {
 
-                if (_dbConnection is null) _dbConnection = new NpgsqlConnection(Settings.DbConnectionStr);
-                return _dbConnection;
 
-            }
+            
-        }
+  
     }
 }

Yuna.Website/Yuna.Website.Server/Storage/Repositories/Device/DeviceRepository.cs

@@ -27,9 +27,9 @@ namespace Yuna.Website.Server.Storage.Repositories.Device
         {
             var query =
                 $@"INSERT INTO ""Yuna_Devices""
-                (""Name"", ""Description"", ""DeviceUrl"")
+                (""Name"", ""Description"", ""DeviceUrl"", ""UserId"")
                 VALUES
-                ('{device.Name}', '{device.Description}', '{device.DeviceUrl}')
+                ('{device.Name}', '{device.Description}', '{device.DeviceUrl}', {device.UserId})
                 RETURNING *";
 
             var result = await _context.Connection.QuerySingleAsync<Model.Device?>(query, device);
@@ -49,6 +49,7 @@ namespace Yuna.Website.Server.Storage.Repositories.Device
             d.""Name"" as {nameof(Model.Device.Name)}, 
             d.""Description"" as {nameof(Model.Device.Description)},
             d.""DeviceUrl"" as {nameof(Model.Device.DeviceUrl)},
+            d.""UserId"" as {nameof(Model.Device.UserId)},
             p.""Id"" as {nameof(Model.Prop.Id)}, 
             p.""Name"" as {nameof(Model.Prop.Name)},
             p.""JsonValueName"" as {nameof(Model.Prop.JsonValueName)},
@@ -87,6 +88,7 @@ namespace Yuna.Website.Server.Storage.Repositories.Device
                     d.""Name"" as {nameof(Model.Device.Name)}, 
                     d.""Description"" as {nameof(Model.Device.Description)},
                     d.""DeviceUrl"" as {nameof(Model.Device.DeviceUrl)},
+                    d.""UserId"" as {nameof(Model.Device.UserId)},
                     p.""Id"" as {nameof(Model.Prop.Id)}, 
                     p.""Name"" as {nameof(Model.Prop.Name)},
                     p.""JsonValueName"" as {nameof(Model.Prop.JsonValueName)},
@@ -107,7 +109,46 @@ namespace Yuna.Website.Server.Storage.Repositories.Device
                         currentDevice.Props = new List<Model.Prop>();
                         deviceDict.Add(currentDevice.Id, currentDevice);
                     }
-                    currentDevice.Props.Add(prop);
+                    if(prop is not null) currentDevice.Props.Add(prop);
+                    return currentDevice;
+                },
+                splitOn: $"{nameof(Model.Prop.Id)}" // Specify the column to split the results on
+            );
+
+            return result.Distinct().ToList();
+        }
+
+        public async Task<IReadOnlyList<Model.Device>> GetList(long userId)
+        {
+            var query =
+                $@"SELECT 
+                    d.""Id"" as {nameof(Model.Device.Id)}, 
+                    d.""Name"" as {nameof(Model.Device.Name)}, 
+                    d.""Description"" as {nameof(Model.Device.Description)},
+                    d.""DeviceUrl"" as {nameof(Model.Device.DeviceUrl)},
+                    d.""UserId"" as {nameof(Model.Device.UserId)},
+                    p.""Id"" as {nameof(Model.Prop.Id)}, 
+                    p.""Name"" as {nameof(Model.Prop.Name)},
+                    p.""JsonValueName"" as {nameof(Model.Prop.JsonValueName)},
+                    p.""MeasureName"" as {nameof(Model.Prop.MeasureName)},
+                    p.""Type"" as {nameof(Model.Prop.Type)}
+                    FROM ""Yuna_Devices"" d
+                    LEFT JOIN ""Yuna_Props_In_Devices"" pd ON d.""Id"" = pd.""DeviceId""
+                    LEFT JOIN ""Yuna_Props"" p ON pd.""PropId"" = p.""Id""
+                    WHERE d.""UserId"" = {userId};";
+
+            var deviceDict = new Dictionary<long, Model.Device>();
+            var result = await _context.Connection.QueryAsync<Model.Device, Model.Prop, Model.Device>(
+                query,
+                (device, prop) =>
+                {
+                    if (!deviceDict.TryGetValue(device.Id, out var currentDevice))
+                    {
+                        currentDevice = device;
+                        currentDevice.Props = new List<Model.Prop>();
+                        deviceDict.Add(currentDevice.Id, currentDevice);
+                    }
+                    if (prop is not null) currentDevice.Props.Add(prop);
                     return currentDevice;
                 },
                 splitOn: $"{nameof(Model.Prop.Id)}" // Specify the column to split the results on

Yuna.Website/Yuna.Website.Server/Storage/Repositories/Device/IDeviceRepository.cs

@@ -6,6 +6,7 @@ namespace Yuna.Website.Server.Storage.Repositories.Device
     {
         public Task<Model.Device?> GetById(long id);
         public Task<IReadOnlyList<Model.Device>> GetList();
+        public Task<IReadOnlyList<Model.Device>> GetList(long userId);
         public Task<Model.Device?> Create(Model.Device device);
         //public Task<User?> Update(User user);
         public Task<Model.Device?> Delete(long id);

Yuna.Website/yuna.website.client/.eslintrc.cjs

@@ -10,6 +10,19 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
   rules: {
+    "no-empty": "warn",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "args": "all",
+        "argsIgnorePattern": "^_",
+        "caughtErrors": "all",
+        "caughtErrorsIgnorePattern": "^_",
+        "destructuredArrayIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "ignoreRestSiblings": true
+      }
+    ],
     'react-refresh/only-export-components': [
       'warn',
       { allowConstantExport: true },

Yuna.Website/yuna.website.client/index.html

@@ -1,13 +1,16 @@
 <!doctype html>
-<html lang="en">
+<html lang="ru">
-  <head>
+
-    <meta charset="UTF-8" />
+<head>
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <title>Vite + React + TS</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  </head>
+  <title>Yuna</title>
-  <body>
+</head>
-    <div id="root"></div>
+
-    <script type="module" src="/src/main.tsx"></script>
+<body>
-  </body>
+  <div id="root"></div>
-</html>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>

Yuna.Website/yuna.website.client/package.json

@@ -10,10 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@chakra-ui/react": "^2.8.2",
+    "axios": "^1.7.2",
+    "mobx": "^6.13.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.24.1"
   },
   "devDependencies": {
+    "@types/node": "^20.12.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.13.1",
@@ -22,8 +27,8 @@
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
+    "sass": "^1.77.8",
     "typescript": "^5.2.2",
-    "vite": "^5.3.1",
+    "vite": "^5.3.1"
-    "@types/node": "^20.12.0"
   }
-}
+}

Yuna.Website/yuna.website.client/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

Yuna.Website/yuna.website.client/src/App.css

@@ -1,19 +0,0 @@
-#root {
-    max-width: 1280px;
-    margin: 0 auto;
-    padding: 2rem;
-    text-align: center;
-}
-
-tr:nth-child(even) {
-    background: #F2F2F2;
-}
-
-tr:nth-child(odd) {
-    background: #FFF;
-}
-
-th, td {
-    padding-left: 1rem;
-    padding-right: 1rem;
-}

Yuna.Website/yuna.website.client/src/App.tsx

@@ -1,56 +0,0 @@
-import { useEffect, useState } from 'react';
-import './App.css';
-
-interface Forecast {
-    date: string;
-    temperatureC: number;
-    temperatureF: number;
-    summary: string;
-}
-
-function App() {
-    const [forecasts, setForecasts] = useState<Forecast[]>();
-
-    useEffect(() => {
-        populateWeatherData();
-    }, []);
-
-    const contents = forecasts === undefined
-        ? <p><em>Loading... Please refresh once the ASP.NET backend has started. See <a href="https://aka.ms/jspsintegrationreact">https://aka.ms/jspsintegrationreact</a> for more details.</em></p>
-        : <table className="table table-striped" aria-labelledby="tabelLabel">
-            <thead>
-                <tr>
-                    <th>Date</th>
-                    <th>Temp. (C)</th>
-                    <th>Temp. (F)</th>
-                    <th>Summary</th>
-                </tr>
-            </thead>
-            <tbody>
-                {forecasts.map(forecast =>
-                    <tr key={forecast.date}>
-                        <td>{forecast.date}</td>
-                        <td>{forecast.temperatureC}</td>
-                        <td>{forecast.temperatureF}</td>
-                        <td>{forecast.summary}</td>
-                    </tr>
-                )}
-            </tbody>
-        </table>;
-
-    return (
-        <div>
-            <h1 id="tabelLabel">Weather forecast</h1>
-            <p>This component demonstrates fetching data from the server.</p>
-            {contents}
-        </div>
-    );
-
-    async function populateWeatherData() {
-        const response = await fetch('weatherforecast');
-        const data = await response.json();
-        setForecasts(data);
-    }
-}
-
-export default App;

Yuna.Website/yuna.website.client/src/assets/react.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

Yuna.Website/yuna.website.client/src/components/Header.tsx

@@ -0,0 +1,13 @@
+import "../resources/styles/header.scss"
+
+export const Header = () => {
+    return (
+        <div style={{
+            display: 'flex',
+            justifyContent: 'center',
+            paddingTop: 10
+        }}>
+            <header className="header">
+                <h1>Yuna</h1>
+            </header></div>);
+}

Yuna.Website/yuna.website.client/src/components/LoadingGirl.tsx

@@ -0,0 +1,4 @@
+import girl from "../resources/images/loading_flex.webp"
+export const LoadingComponent = () => {
+    return <img src={girl}></img>
+}

Yuna.Website/yuna.website.client/src/index.css

@@ -1,68 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

Yuna.Website/yuna.website.client/src/main.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import { RouterProvider } from 'react-router-dom'
-import './index.css'
+import "./resources/styles/common.scss"
+import { router } from './router'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>,
 )

Yuna.Website/yuna.website.client/src/pages/home/HomePage.tsx

@@ -0,0 +1,11 @@
+import { Header } from "../../components/Header"
+import { DeviceList } from "./components/DeviceList";
+
+export const HomePage = () => {
+    return (
+        <>
+            <Header />
+            <DeviceList />
+        </>
+    );
+}

Yuna.Website/yuna.website.client/src/pages/home/components/DeviceCard.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useMemo } from "react";
+import "../../../resources/styles/home.scss"
+import { IDeviceDto, IPropDto } from "../types";
+import { DeviceCardStore } from "../model/DeviceCardStore";
+import { Button, Center, Skeleton, useInterval } from "@chakra-ui/react";
+import { observer } from "mobx-react";
+
+
+
+
+export const DeviceCard = observer((props: { data: IDeviceDto }) => {
+
+    const deviceCardStore = useMemo(() => new DeviceCardStore(props.data.id), [props.data.id]);
+
+    useInterval(() => { deviceCardStore.loadDeviceMeasurements() }, 5000);
+    useEffect(() => { deviceCardStore.loadDeviceMeasurements() }, [deviceCardStore, props.data])
+
+    const getPropsList = (props: IPropDto[], isLoading: boolean) => {
+        return props.map(x =>
+            <li key={x.id}>
+                <h2>
+                    {x.name}:
+                </h2>
+                {isLoading ?
+                    <Center><Skeleton height={69} width={200} /></Center>
+                    :
+                    <p>
+                        {deviceCardStore.deviceMeasurments![x.id.toString()]}{x.measureName}
+                    </p>}
+            </li>
+        )
+    }
+
+    return (<>
+        <div className="device_card_wrapper">
+            <div className="device_card">
+                <div className="h1_container">
+                    <h1>{props.data.name}</h1>
+                    <Button>sdfs</Button>
+                </div>
+                <p style={{ textAlign: 'center' }}>{props.data.description}</p>
+                <ul>
+                    {getPropsList(props.data.props, deviceCardStore.isLoading)}
+                </ul>
+            </div>
+        </div>
+    </>);
+});

Yuna.Website/yuna.website.client/src/pages/home/components/DeviceList.tsx

@@ -0,0 +1,20 @@
+import { DeviceCard } from "./DeviceCard";
+import "../../../resources/styles/home.scss"
+import { observer } from "mobx-react";
+import { useEffect } from "react";
+import { LoadingComponent } from "../../../components/LoadingGirl";
+import { homePageStore } from "../model/HomePageStore";
+export const DeviceList = observer(() => {
+
+    useEffect(() => {
+        homePageStore.loadDevices();
+    }, [])
+
+    return (
+        < main className="main" >
+            {homePageStore.isLoading ? <LoadingComponent /> :
+                homePageStore.devices.length > 0
+                && homePageStore.devices.map(x => <DeviceCard key={x.id} data={x} />)
+            }
+        </main >);
+});

Yuna.Website/yuna.website.client/src/pages/home/model/DeviceCardStore.ts

@@ -0,0 +1,41 @@
+import { makeAutoObservable } from "mobx";
+import { DeviceMeasureDto, IDeviceDto } from "../types";
+import { HomePageService } from "../services/HomePageService";
+import { homePageStore } from "./HomePageStore";
+
+export class DeviceCardStore {
+
+    deviceMeasurments: DeviceMeasureDto | null = null;
+    deviceId: number
+    isLoading = true;
+    isInvalid = false;
+
+    constructor(id: number) {
+        this.deviceId = id;
+        makeAutoObservable(this);
+    }
+
+    setIsLoading(value: boolean) {
+        this.isLoading = value;
+    }
+
+    setMeasurements(value: DeviceMeasureDto) {
+        this.deviceMeasurments = value;
+    }
+
+    async loadDeviceMeasurements() {
+        if (this.isInvalid) return;
+
+        if (this.deviceMeasurments === null) this.setIsLoading(true);
+        const measurements = await HomePageService.fetchDeviceMeasurements(this.deviceId);
+        if (measurements === null) {
+            this.isInvalid = true;
+            return;
+        }
+        this.setMeasurements(measurements);
+
+        this.setIsLoading(false);
+    }
+
+
+}

Yuna.Website/yuna.website.client/src/pages/home/model/HomePageStore.ts

@@ -0,0 +1,26 @@
+import { makeAutoObservable } from "mobx";
+import { IDeviceDto } from "../types";
+import { HomePageService } from "../services/HomePageService";
+
+class HomePageStore {
+    devices: IDeviceDto[] = []
+    isLoading: boolean = false;
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+
+    setDevices(value: IDeviceDto[]) {
+        this.devices = value;
+    }
+
+    async loadDevices() {
+        this.isLoading = true;
+        const result = await HomePageService.getDeviceList();
+        this.setDevices(result);
+        this.isLoading = false;
+    }
+}
+
+export const homePageStore = new HomePageStore();

Yuna.Website/yuna.website.client/src/pages/home/services/HomePageService.tsx

@@ -0,0 +1,24 @@
+import { api } from "../../../services/Api";
+import { DeviceMeasureDto, IDeviceDto } from "../types";
+
+export class HomePageService {
+    public static async getDeviceList(): Promise<IDeviceDto[]> {
+
+        try {
+            const response = await api.get<IDeviceDto[]>("device");
+            if (response.status === 200) return response.data;
+        }
+
+        catch (error) {
+            console.error("Error: ", error);
+        }
+        return [];
+    }
+
+    public static async fetchDeviceMeasurements(deviceId: number)
+        : Promise<DeviceMeasureDto | null> {
+        const response = await api.get<DeviceMeasureDto>(`device/${deviceId}/fetch`)
+        if (response.status === 200) return response.data;
+        return null;
+    }
+}

Yuna.Website/yuna.website.client/src/pages/home/types.ts

@@ -0,0 +1,25 @@
+export interface IDeviceDto {
+    id: number;
+    name: string;
+    description: string;
+    props: IPropDto[]
+    deviceUrl: string;
+}
+
+export enum propType {
+    float = 0,
+    boolean = 1,
+}
+
+export interface IPropDto {
+    id: number;
+    type: propType;
+    name: string;
+    measureName: string;
+    jsonValueName: string;
+}
+
+export type DeviceMeasureDto =
+    {
+        [key: string]: string;
+    }

Yuna.Website/yuna.website.client/src/pages/login/LoginPage.tsx

@@ -0,0 +1,48 @@
+import { Button, Center, Input, Spinner } from "@chakra-ui/react";
+import "../../resources/styles/loginPage.scss"
+import { observer } from "mobx-react"
+import { LoginPageStore } from "./LoginPageStore";
+
+const store = new LoginPageStore();
+export const LoginPage = observer(() => {
+    return (
+        <div className="container_wrapper">
+            <div className="login_container">
+                <h1>Вход</h1>
+                {store.isLoading
+                    ? <>
+                        <div style={{
+                            height: 128,
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center'
+                        }}>
+                            <Spinner size="xl" />
+                        </div>
+                    </>
+                    : <>
+                        <Input
+                            placeholder="Логин"
+                            value={store.login}
+                            onChange={e => store.setLogin(e.target.value)}
+                            marginBottom={5} />
+                        <Input
+                            placeholder="Пароль"
+                            type="password"
+                            marginBottom={7}
+                            value={store.password}
+                            onChange={e => store.setPassword(e.target.value)} />
+                    </>}
+                <Center paddingBottom={7}>
+                    <Button
+                        onClick={() => store.handleLogin()}
+                        isLoading={store.isLoading}
+                        loadingText={"Захожу..."}
+                        variant='outline'
+                        size='md'
+                        width={100}>Войти
+                    </Button>
+                </Center>
+            </div>
+        </div>);
+})

Yuna.Website/yuna.website.client/src/pages/login/LoginPageService.ts

@@ -0,0 +1,21 @@
+
+import { api } from "../../services/Api";
+import { ILoginRequest, ILoginResult } from "./types";
+
+
+export class LoginPageService {
+    public static async login(request: ILoginRequest): Promise<ILoginResult> {
+
+        try {
+            const response = await api.post("auth/login", request);
+            if (response.status === 200) return { loggedIn: true, isError: false };
+
+            return { loggedIn: false, isError: false };
+        }
+
+        catch (error) {
+            console.error("Error: ", error);
+            return { loggedIn: false, isError: true };
+        }
+    }
+}

Yuna.Website/yuna.website.client/src/pages/login/LoginPageStore.ts

@@ -0,0 +1,51 @@
+import { makeAutoObservable } from "mobx";
+import { LoginPageService } from "./LoginPageService";
+import { createStandaloneToast } from "@chakra-ui/react";
+import { error } from "../../utils/ToastHelper";
+
+
+
+export class LoginPageStore {
+    toast = createStandaloneToast();
+    login: string = "";
+    password: string = "";
+    isLoading: boolean = false;
+
+
+    setLogin(value: string) {
+        this.login = value;
+    }
+
+    setPassword(value: string) {
+        this.password = value;
+        LoginPageService.login
+    }
+
+    async handleLogin() {
+        this.isLoading = true;
+        const result = await LoginPageService.login({ password: this.password, username: this.login })
+        this.isLoading = false;
+
+        if (result.isError) {
+            error("Ошибка", "Запрос не был выполнен")
+            return;
+        }
+
+        if (!result.loggedIn) {
+            error("Неверный логин или пароль", "Проверьте еще раз")
+            return;
+        }
+
+        window.location.replace("https://localhost:5173");
+    }
+
+
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+
+}
+
+

Yuna.Website/yuna.website.client/src/pages/login/types.ts

@@ -0,0 +1,9 @@
+export interface ILoginResult {
+    loggedIn: boolean;
+    isError: boolean;
+}
+
+export interface ILoginRequest {
+    password: string;
+    username: string;
+}

Yuna.Website/yuna.website.client/src/resources/styles/common.scss

@@ -0,0 +1,18 @@
+* {
+    font-family: 'Montserrat';
+}
+
+.container_wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100vh;
+}
+
+@font-face {
+    font-display: block;
+    font-family: 'Montserrat';
+    src: url(../fonts/Montserrat-VariableFont_wght.ttf);
+}

Yuna.Website/yuna.website.client/src/resources/styles/header.scss

@@ -0,0 +1,18 @@
+.header {
+    position: fixed;
+    background: #4FD1C5;
+    border-radius: 10px;
+    //border-bottom: solid black 1px;
+    width: 80%;
+    height: 70px;
+    box-shadow: 5px 5px 0px #319795;
+    /* x-offset y-offset blur-radius color */
+
+    h1 {
+        padding-top: 10px;
+        font-size: 30px;
+        padding-left: 30px;
+    }
+
+
+}

Yuna.Website/yuna.website.client/src/resources/styles/home.scss

@@ -0,0 +1,79 @@
+.main {
+    padding-top: 100px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    gap: 30px;
+    flex-wrap: wrap;
+}
+
+
+.device_card {
+    width: 450px;
+    border-radius: 22px;
+    background-color: #319795;
+    display: flex;
+    flex-direction: column;
+
+    padding: 0px 50px;
+
+    .h1_container {
+        overflow: hidden;
+        height: 80px;
+
+        h1 {}
+
+        button {
+            position: relative;
+            top: -50px;
+            width: 10px;
+            float: right;
+        }
+    }
+
+    h1 {
+        text-align: center;
+        margin: 0;
+        padding-top: 10px;
+        color: white;
+        font-weight: 600;
+        font-size: 40px;
+    }
+
+    p {
+        color: white;
+    }
+
+    ul {
+        padding-bottom: 40px;
+        padding-top: 30px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        list-style-type: none;
+
+        li {
+
+            padding-bottom: 10px;
+
+            h2 {
+                color: white;
+                text-align: center;
+                font-size: 22px;
+                font-weight: 300;
+                margin: 0;
+            }
+
+            p {
+                color: white;
+                padding: 0;
+                margin: 0;
+                text-align: center;
+                font-size: 46px;
+                font-weight: 800;
+            }
+        }
+    }
+
+}

Yuna.Website/yuna.website.client/src/resources/styles/loginPage.scss

@@ -0,0 +1,17 @@
+.login_container {
+    border-radius: 10px;
+    border: 1px solid black;
+    width: 400px;
+    display: flex;
+    flex-direction: column;
+    padding-left: 30px;
+    padding-right: 30px;
+
+    h1 {
+        font-size: 20px;
+        font-weight: 400;
+        padding-top: 10px;
+        padding-bottom: 20px;
+        text-align: center;
+    }
+}

Yuna.Website/yuna.website.client/src/router.tsx

@@ -0,0 +1,31 @@
+import { ChakraProvider } from "@chakra-ui/react";
+import { Outlet, createBrowserRouter } from "react-router-dom";
+import { LoginPage } from "./pages/login/LoginPage";
+import { YunaTheme } from "./theme";
+import { HomePage } from "./pages/home/HomePage";
+
+
+
+export const router = createBrowserRouter([
+    {
+        path: "/",
+        element: <><ChakraProvider theme={YunaTheme}><Outlet /></ChakraProvider></>,
+        errorElement: <h1>Something gone wrong</h1>,
+        children:
+            [
+                {
+                    path: "home",
+                    element: <HomePage />
+                },
+                {
+                    path: "settings",
+                    element: <>set</>
+                },
+                {
+                    path: "login",
+                    element: <LoginPage />
+                }
+
+            ]
+    }
+]);

Yuna.Website/yuna.website.client/src/services/Api.ts

@@ -0,0 +1,16 @@
+import axios from "axios";
+
+export const api = axios.create({
+    baseURL: "http://localhost:5227/api/",
+    validateStatus: (status) => status < 500,
+    withCredentials: true,
+    headers: { 'Accept': 'application/json' }
+});
+
+api.interceptors.response.use(response => {
+    response.status === 401
+    if (response.status === 401) {
+        window.location.replace("/login");
+    }
+    return response;
+})

Yuna.Website/yuna.website.client/src/theme.ts

@@ -0,0 +1,4 @@
+import { extendTheme, withDefaultColorScheme } from "@chakra-ui/react";
+
+export const YunaTheme = extendTheme(withDefaultColorScheme({ colorScheme: 'cyan' })
+)

Yuna.Website/yuna.website.client/src/utils/ToastHelper.ts

@@ -0,0 +1,41 @@
+
+
+
+const utilizeAlert = async () => {
+    const { createStandaloneToast } = await import("@chakra-ui/react");
+    const { toast } = createStandaloneToast();
+
+
+    const info = (title: string, message: string, id: number = 0) => {
+        toast({
+            id,
+            title,
+            description: message,
+            colorScheme: "blue",
+            status: "info",
+            position: "top-right",
+            isClosable: false,
+            duration: 3000,
+        });
+    };
+
+    const error = (title: string, message: string, id: number = 0) => {
+        toast({
+            id,
+            title,
+            description: message,
+            colorScheme: "red",
+            status: "error",
+            position: "top-right",
+            isClosable: false,
+            duration: 3000,
+        });
+    };
+
+    return {
+        info,
+        error,
+    };
+};
+
+export const { info, error } = await utilizeAlert();

Yuna.Website/yuna.website.client/src/utils/UseInterval.ts

@@ -0,0 +1,8 @@
+import { useEffect } from "react"
+
+export const useInterval = (callback: () => void, delayMs: number) => {
+    useEffect(() => {
+        const intervalId = setInterval(callback, delayMs);
+        return () => clearInterval(intervalId);
+    }, [callback, delayMs])
+}

package-lock.json

@@ -0,0 +1,108 @@
+{
+  "name": "Yuna",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "mobx-react": "^9.1.1"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "peer": true
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "peer": true,
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/mobx": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.13.0.tgz",
+      "integrity": "sha512-1laWODrBWmB7mDJ8EClCjUQTyLwJ0ydJgE4FtK7t9r3JnjXgc9OhmYs2P4RtHrY1co5+4T6cKP2UswX2SU29mA==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mobx"
+      }
+    },
+    "node_modules/mobx-react": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-9.1.1.tgz",
+      "integrity": "sha512-gVV7AdSrAAxqXOJ2bAbGa5TkPqvITSzaPiiEkzpW4rRsMhSec7C2NBCJYILADHKp2tzOAIETGRsIY0UaCV5aEw==",
+      "dependencies": {
+        "mobx-react-lite": "^4.0.7"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mobx"
+      },
+      "peerDependencies": {
+        "mobx": "^6.9.0",
+        "react": "^16.8.0 || ^17 || ^18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/mobx-react-lite": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-4.0.7.tgz",
+      "integrity": "sha512-RjwdseshK9Mg8On5tyJZHtGD+J78ZnCnRaxeQDSiciKVQDUbfZcXhmld0VMxAwvcTnPEHZySGGewm467Fcpreg==",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mobx"
+      },
+      "peerDependencies": {
+        "mobx": "^6.9.0",
+        "react": "^16.8.0 || ^17 || ^18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "mobx-react": "^9.1.1"
+  }
+}