Skip to content

Commit

Permalink
Rename example client
Browse files Browse the repository at this point in the history
  • Loading branch information
Pjotrtje committed Dec 27, 2022
1 parent 33c6ee5 commit 1aa9ed4
Show file tree
Hide file tree
Showing 49 changed files with 146 additions and 179 deletions.
12 changes: 6 additions & 6 deletions Fluxor.Undo.sln
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "tests", "tests", "{562D9D20
EndProject
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Fluxor.Undo.Tests", "tests\Fluxor.Undo.Tests\Fluxor.Undo.Tests.csproj", "{F51D3DC3-CFCB-47F0-9049-A7BEE5DAB2AD}"
EndProject
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "FluxorBlazorWeb.ReduxDevToolsTutorial.Client", "examples\Client\FluxorBlazorWeb.ReduxDevToolsTutorial.Client.csproj", "{4BC2DAAD-F8DC-4756-81AE-449B0BA998D5}"
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorClient", "examples\BlazorClient\BlazorClient.csproj", "{BCE6DF29-A8B6-4B79-BB19-681DC001198B}"
EndProject
Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution
Expand All @@ -47,18 +47,18 @@ Global
{F51D3DC3-CFCB-47F0-9049-A7BEE5DAB2AD}.Debug|Any CPU.Build.0 = Debug|Any CPU
{F51D3DC3-CFCB-47F0-9049-A7BEE5DAB2AD}.Release|Any CPU.ActiveCfg = Release|Any CPU
{F51D3DC3-CFCB-47F0-9049-A7BEE5DAB2AD}.Release|Any CPU.Build.0 = Release|Any CPU
{4BC2DAAD-F8DC-4756-81AE-449B0BA998D5}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{4BC2DAAD-F8DC-4756-81AE-449B0BA998D5}.Debug|Any CPU.Build.0 = Debug|Any CPU
{4BC2DAAD-F8DC-4756-81AE-449B0BA998D5}.Release|Any CPU.ActiveCfg = Release|Any CPU
{4BC2DAAD-F8DC-4756-81AE-449B0BA998D5}.Release|Any CPU.Build.0 = Release|Any CPU
{BCE6DF29-A8B6-4B79-BB19-681DC001198B}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{BCE6DF29-A8B6-4B79-BB19-681DC001198B}.Debug|Any CPU.Build.0 = Debug|Any CPU
{BCE6DF29-A8B6-4B79-BB19-681DC001198B}.Release|Any CPU.ActiveCfg = Release|Any CPU
{BCE6DF29-A8B6-4B79-BB19-681DC001198B}.Release|Any CPU.Build.0 = Release|Any CPU
EndGlobalSection
GlobalSection(SolutionProperties) = preSolution
HideSolutionNode = FALSE
EndGlobalSection
GlobalSection(NestedProjects) = preSolution
{131B8C69-F4BA-46FE-8A30-3BCA8CC9933F} = {FD9FF9B0-970C-4FAE-B327-1D55163E4460}
{F51D3DC3-CFCB-47F0-9049-A7BEE5DAB2AD} = {562D9D20-01A5-4BB3-9D2A-2278CFB882FE}
{4BC2DAAD-F8DC-4756-81AE-449B0BA998D5} = {6D871756-93F4-46B3-BA64-93A04213901B}
{BCE6DF29-A8B6-4B79-BB19-681DC001198B} = {6D871756-93F4-46B3-BA64-93A04213901B}
EndGlobalSection
GlobalSection(ExtensibilityGlobals) = postSolution
SolutionGuid = {47B82755-5CED-4DF8-BAF2-A25F643C3C9F}
Expand Down
79 changes: 59 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,37 @@ Steps to change your regular state to an undoable state:
Change your state with FeatureStateAtrribute

```csharp
[FeatureState(Name = "Counter")]
[FeatureState(Name = "Counter", CreateInitialStateMethodName = nameof(CreateInitialState))]
public record CounterState(int ClickCount)
{
private CounterState() : this(0)
{ }
public static CounterState CreateInitialState()
=> new(0);
}
```

to

```csharp
public record CounterState(int ClickCount);

[FeatureState(Name = "Counter", CreateInitialStateMethodName = nameof(CreateInitialState))]
public record UndoableCounterState : Undoable<UndoableCounterState, CounterState>
{
public static UndoableCounterState CreateInitialState()
=> new() { Present = new(0) };
}

// Or when net6:
public record CounterState(int ClickCount);

[FeatureState(Name = "Counter", CreateInitialStateMethodName = nameof(CreateInitialState))]
public record UndoableCounterState(CounterState Present) : Undoable<UndoableCounterState, CounterState>(Present)
{
public static UndoableCounterState CreateInitialState()
=> new(new CounterState(0));
};
```

or state with generic Feature

```csharp
Expand All @@ -53,14 +76,28 @@ to

```csharp
public record CounterState(int ClickCount);
public record UndoableCounterState : Undoable<UndoableCounterState, CounterState>;

public sealed class UndoableCounterFeature : UndoableFeature<CounterState>
public sealed class UndoableCounterFeature : Feature<UndoableCounterState>
{
public override string GetName()
=> "Counter";
=> "UndoableCounter";

protected override Undoable<CounterState> GetInitialState()
=> Undoable.Create(new CounterState(0));
protected override UndoableCounterState GetInitialState()
=> new() { Present = new(0) };
}

// Or when net6:
public record CounterState(int ClickCount);
public record UndoableCounterState(CounterState Present) : Undoable<UndoableCounterState, CounterState>(Present);

public sealed class UndoableCounterFeature : Feature<UndoableCounterState>
{
public override string GetName()
=> "UndoableCounter";

protected override UndoableCounterState GetInitialState()
=> new(new CounterState(0));
}
```

Expand All @@ -82,10 +119,10 @@ to


```csharp
public class Reducers : UndoableStateReducers<CounterState>
public class Reducers : UndoableStateReducers<UndoableCounterState>
{
[ReducerMethod]
public static Undoable<CounterState> ReduceIncrementCounterAction(Undoable<CounterState> state, IncrementCounterAction action)
public static UndoableCounterState ReduceIncrementCounterAction(UndoableCounterState state, IncrementCounterAction action)
=> state.WithNewPresent(p => p with
{
ClickCount = p.ClickCount + action.Amount,
Expand All @@ -104,32 +141,34 @@ to

```csharp
[Inject]
private IState<Undoable<CounterState>> UndoableCounterState { get; set; } = null!;
private IState<UndoableCounterState> UndoableCounterState { get; set; } = null!;
```

**4) Update usages of your state**
Change usage in your Razor pages from
```cshtml
<p>Current count: @CounterState.Value.ClickCount</p>
<button class="btn btn-primary" @onclick=@(() => Dispatcher.Dispatch(new IncrementCounterAction(1)))>+1</button>
<button class="btn btn-primary" @onclick=@(() => Dispatcher.Dispatch(new IncrementCounterAction(10)))>+10</button>
```

to

```cshtml
<p>Current count: @UndoableCounterState.Value.Present.ClickCount</p>
```

<button class="btn btn-primary" @onclick=@(() => Dispatcher.Dispatch(new IncrementCounterAction(1)))>+1</button>
<button class="btn btn-primary" @onclick=@(() => Dispatcher.Dispatch(new IncrementCounterAction(10)))>+10</button>
<button class="btn btn-primary" @onclick=@(() => Dispatcher.Dispatch(new UndoAllAction<CounterState>())) disabled="@UndoableCounterState.Value.TimeTravelInfo.HasNoPast">&lt;&lt;</button>
<button class="btn btn-primary" @onclick=@(() => Dispatcher.Dispatch(new UndoAction<CounterState>())) disabled="@UndoableCounterState.Value.TimeTravelInfo.HasNoPast">&lt;</button>
<button class="btn btn-primary" @onclick=@(() => Dispatcher.Dispatch(new RedoAction<CounterState>())) disabled="@UndoableCounterState.Value.TimeTravelInfo.HasNoFuture">&gt;</button>
<button class="btn btn-primary" @onclick=@(() => Dispatcher.Dispatch(new RedoAllAction<CounterState>())) disabled="@UndoableCounterState.Value.TimeTravelInfo.HasNoFuture">&gt;&gt;</button>
**5) Add some navigation buttons**
```cshtml
<button class="btn btn-secondary" @onclick=@(() => Dispatcher.Dispatch(new UndoAllAction<UndoableCounterState>())) disabled="@UndoableCounterState.Value.HasNoPast">&lt;&lt;</button>
<button class="btn btn-secondary" @onclick=@(() => Dispatcher.Dispatch(new UndoAction<UndoableCounterState>())) disabled="@UndoableCounterState.Value.HasNoPast">&lt;</button>
<button class="btn btn-secondary" @onclick=@(() => Dispatcher.Dispatch(new RedoAction<UndoableCounterState>())) disabled="@UndoableCounterState.Value.HasNoFuture">&gt;</button>
<button class="btn btn-secondary" @onclick=@(() => Dispatcher.Dispatch(new RedoAllAction<UndoableCounterState>())) disabled="@UndoableCounterState.Value.HasNoFuture">&gt;&gt;</button>
```

Also see example project in solution. Here both the regular counter as the undoable counter are implemented.
Also see example project in solution. Here both the Fluxor counter as Fluxor.Undo counter are implemented.

## Tips
1) When you are allowing undo/redo, the undo/redo is done on the client side. So make sure that user knows that undo-ing does not alter data on server. There is a basic implementation in the example project in solution; page: Fluxor.Undo (Persist). Can be used as inspiration!
2) If you are using net6; upgrade to net7 so you can use the parameterless ctors and use the required properties :).

## Release notes
See the [Releases page](https://github.com/Pjotrtje/Fluxor.Undo/releases/).
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

<ItemGroup>
<PropertyGroup>
<TargetFrameworks>net7.0</TargetFrameworks>
</PropertyGroup>

<ItemGroup>
<PackageReference Include="Fluxor.Blazor.Web.ReduxDevTools" Version="5.7.0" />

<PackageReference Condition="'$(TargetFramework)' == 'net7.0'" Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.1" />
<PackageReference Condition="'$(TargetFramework)' == 'net7.0'" Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.1" />

<PackageReference Condition="'$(TargetFramework)' == 'net6.0'" Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.12" />
<PackageReference Condition="'$(TargetFramework)' == 'net6.0'" Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.12" />
</ItemGroup>

<ItemGroup>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@page "/counter"
@using FluxorBlazorWeb.ReduxDevToolsTutorial.Client.Features.Counter.Store
@using BlazorClient.Features.Counter.Store
@inherits Fluxor.Blazor.Web.Components.FluxorComponent

<h1>Counter</h1>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
using Fluxor;

using FluxorBlazorWeb.ReduxDevToolsTutorial.Client.Features.Counter.Store;
using BlazorClient.Features.Counter.Store;

using Microsoft.AspNetCore.Components;

namespace FluxorBlazorWeb.ReduxDevToolsTutorial.Client.Features.Counter;
namespace BlazorClient.Features.Counter;

public partial class Counter
{
Expand Down
10 changes: 10 additions & 0 deletions examples/BlazorClient/Features/Counter/Store/CounterState.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
using Fluxor;

namespace BlazorClient.Features.Counter.Store;

[FeatureState(Name = "Counter", CreateInitialStateMethodName = nameof(CreateInitialState))]
public record CounterState(int ClickCount)
{
public static CounterState CreateInitialState()
=> new(0);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
namespace BlazorClient.Features.Counter.Store;

public record IncrementCounterAction(int Amount);
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
using Fluxor;

namespace FluxorBlazorWeb.ReduxDevToolsTutorial.Client.Features.Counter.Store;
namespace BlazorClient.Features.Counter.Store;

public static class Reducers
{
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
using Fluxor;
using Fluxor.Undo;

namespace BlazorClient.Features.UndoableCounter.Store;

public record CounterState(int ClickCount);

[FeatureState(Name = "UndoableCounter", CreateInitialStateMethodName = nameof(CreateInitialState))]
public record UndoableCounterState : Undoable<UndoableCounterState, CounterState>
{
public static UndoableCounterState CreateInitialState()
=> new() { Present = new(0) };
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
namespace BlazorClient.Features.UndoableCounter.Store;

public record IncrementCounterAction(int Amount);
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
using Fluxor;
using Fluxor.Undo;

namespace FluxorBlazorWeb.ReduxDevToolsTutorial.Client.Features.UndoableCounter.Store;
namespace BlazorClient.Features.UndoableCounter.Store;

public class Reducers : UndoableStateReducers<UndoableCounterState>
{
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@page "/undoablecounter"
@using FluxorBlazorWeb.ReduxDevToolsTutorial.Client.Features.UndoableCounter.Store
@using BlazorClient.Features.UndoableCounter.Store
@using Fluxor.Undo
@inherits Fluxor.Blazor.Web.Components.FluxorComponent

Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
using Fluxor;

using FluxorBlazorWeb.ReduxDevToolsTutorial.Client.Features.UndoableCounter.Store;
using BlazorClient.Features.UndoableCounter.Store;

using Microsoft.AspNetCore.Components;

namespace FluxorBlazorWeb.ReduxDevToolsTutorial.Client.Features.UndoableCounter;
namespace BlazorClient.Features.UndoableCounter;

public partial class UndoableCounter
{
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
using Fluxor;
using Fluxor.Undo;

namespace BlazorClient.Features.UndoableCounterWithPersistence.Store;

public record CounterState(int ClickCount);

[FeatureState(Name = "UndoableCounterWithPersistence", CreateInitialStateMethodName = nameof(CreateInitialState))]
public record UndoableCounterState : Undoable<UndoableCounterState, CounterState>
{
public required CounterState Persisted { get; init; }

public bool IsPersisted => Persisted == Present;

public static UndoableCounterState CreateInitialState()
=> new()
{
Persisted = new(0),
Present = new(0),
};
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
namespace BlazorClient.Features.UndoableCounterWithPersistence.Store;

public record IncrementCounterAction(int Amount);
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
namespace BlazorClient.Features.UndoableCounterWithPersistence.Store;

public record PersistAction;
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
using Fluxor;
using Fluxor.Undo;

namespace FluxorBlazorWeb.ReduxDevToolsTutorial.Client.Features.UndoableCounterWithPersistence.Store;
namespace BlazorClient.Features.UndoableCounterWithPersistence.Store;

public class Reducers : UndoableStateReducers<UndoableCounterState>
{
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@page "/undoablecounterwithpersistence"
@using Fluxor.Undo
@using FluxorBlazorWeb.ReduxDevToolsTutorial.Client.Features.UndoableCounterWithPersistence.Store
@using BlazorClient.Features.UndoableCounterWithPersistence.Store
@inherits Fluxor.Blazor.Web.Components.FluxorComponent

<h1>Counter</h1>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
using Fluxor;

using FluxorBlazorWeb.ReduxDevToolsTutorial.Client.Features.UndoableCounterWithPersistence.Store;
using BlazorClient.Features.UndoableCounterWithPersistence.Store;

using Microsoft.AspNetCore.Components;

namespace FluxorBlazorWeb.ReduxDevToolsTutorial.Client.Features.UndoableCounterWithPersistence;
namespace BlazorClient.Features.UndoableCounterWithPersistence;

public partial class UndoableCounter
{
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Fluxor;

namespace FluxorBlazorWeb.ReduxDevToolsTutorial.Client;
namespace BlazorClient;

public class Program
{
Expand All @@ -10,7 +10,7 @@ public static async Task Main(string[] args)
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddScoped(_ => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddFluxor(o =>
{
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="">ReduxDevToolsTutorial</a>
<a class="navbar-brand" href="">Fluxor.Redo</a>
<button class="navbar-toggler" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
Expand All @@ -14,17 +14,17 @@
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
<span class="oi oi-plus" aria-hidden="true"></span> Fluxor
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="undoablecounter">
<span class="oi oi-plus" aria-hidden="true"></span> Undoable Counter
<span class="oi oi-plus" aria-hidden="true"></span> Fluxor.Undo
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="undoablecounterwithpersistence">
<span class="oi oi-plus" aria-hidden="true"></span> Undoable Counter*
<span class="oi oi-plus" aria-hidden="true"></span> Fluxor.Undo (Persist)
</NavLink>
</li>

Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using FluxorBlazorWeb.ReduxDevToolsTutorial.Client
@using FluxorBlazorWeb.ReduxDevToolsTutorial.Client.Shared
@using BlazorClient
@using BlazorClient.Shared
File renamed without changes.
File renamed without changes.
File renamed without changes.
Loading

0 comments on commit 1aa9ed4

Please sign in to comment.