Single page app - react routing

Photoshop UXP Plugin API
,
1

I’m trying to make a react SPA, but I can’t handle the routing.

Screenshot 2023-06-21 at 12.27.47
Screenshot 2023-06-21 at 12.27.47598×526 2.87 KB

I have three buttons and I’m trying to create logic for each button to render specific page/context. I’m new to react and I’ve tried several ways to complete routing, but I always get the result.

Can someone improve my code or to give me some hint how to complete this issue?

Screenshot 2023-06-17 at 14.05.02
Screenshot 2023-06-17 at 14.05.021942×170 26.2 KB

INDEX.JS

import App from "./App";
import {entrypoints} from "uxp";
import PanelController from "./controllers/PanelController"
import flyout from "./flyout/controllerpanel"
import React from 'react';
import ReactDOM from 'react-dom'; 
import { BrowserRouter } from 'react-router-dom';

entrypoints.setup({
  panels:{
    controllerpanel: PanelController(<App />, { ...flyout })
  }
});

const root = ReactDOM.createRoot( document.getElementById('root') );

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

APP.JS

import "./style.css"
import "./photoshop/scripts"
import Tools from "./components/Tools"
import { Routes, Route } from 'react-router-dom';
import Home from './contexts/Home';
import Layers from './contexts/Layers';
import Colors from './contexts/Colors';

const App = () => {
  return (

      <div className="plugin">
        <div className="tools"><Tools></Tools></div>
          <div className="container">
            {/* Here i need to render eache page/context on click */}
            <Routes>
              <Route path='/home' element={ <Home /> } />
              <Route path='/layers' element={ <Layers /> } />
              <Route path='/colors' element={ <Colors /> }/>
            </Routes>
          </div>
      </div>

  );
};

export default App;

TOOLS.JS

const Tools = () =>{
    return (
        <>
            <div to="home" className="btn">
            <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
            <title>HOME</title>
            <rect id="Canvas" fill="#ff13dc" opacity="0" width="18" height="18" /><path className="fill" d="M17.666,10.125,9.375,1.834a.53151.53151,0,0,0-.75,0L.334,10.125a.53051.53051,0,0,0,0,.75l.979.9785A.5.5,0,0,0,1.6665,12H2v4.5a.5.5,0,0,0,.5.5h4a.5.5,0,0,0,.5-.5v-5a.5.5,0,0,1,.5-.5h3a.5.5,0,0,1,.5.5v5a.5.5,0,0,0,.5.5h4a.5.5,0,0,0,.5-.5V12h.3335a.5.5,0,0,0,.3535-.1465l.979-.9785A.53051.53051,0,0,0,17.666,10.125Z" />
            </svg>
            </div>

            <div to="layers" className="btn">
            <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
            <title>LAYERS</title>
            <rect id="Canvas" fill="#ff13dc" opacity="0" width="18" height="18" /><path className="fill" d="M8.7875,8.915,1.4435,5.1755c-.1205-.0615-.1205-.1615,0-.223l7.344-3.74a.47149.47149,0,0,1,.425,0L16.5565,4.95c.1205.0615.1205.1615,0,.223L9.2125,8.915A.468.468,0,0,1,8.7875,8.915Z" />
            <path className="fill" d="M16.557,12.9525l-2.3-1.1705L9,14.459,3.742,11.782l-2.3,1.1705c-.1205.0615-.1205.1615,0,.223L8.7875,16.915a.468.468,0,0,0,.425,0l7.3445-3.7395C16.677,13.114,16.677,13.014,16.557,12.9525Z" />
            <path className="fill" d="M16.557,8.9525l-2.3-1.1705L9,10.459,3.742,7.782l-2.3,1.1705c-.1205.0615-.1205.1615,0,.223L8.7875,12.915a.468.468,0,0,0,.425,0L16.557,9.1755C16.677,9.114,16.677,9.014,16.557,8.9525Z" />
            </svg>
            </div>
    
            <div to="colors" className="btn">
            <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
            <title>COLORS</title>
            <rect id="Canvas" fill="#ff13dc" opacity="0" width="18" height="18" /><path className="fill" d="M16.8635,11.836a32.17369,32.17369,0,0,0-.653-3.316c-.312-1.218-1.4595-1.49-2.67-1.654L9.487,2.8125a.5.5,0,0,0-.70711-.00039L8.7795,2.8125l-1.212,1.215,2.436,2.436A.75.75,0,0,1,8.96142,7.54242L8.943,7.524,6.507,5.088.928,10.667a.5.5,0,0,0-.00039.70711L.928,11.3745,6.3045,16.744a.5.5,0,0,0,.707,0L14.797,8.947a.5.5,0,0,0,.0075-.7.19.19,0,0,1,.283.0745,3.32249,3.32249,0,0,1-.264,2.787,4.74244,4.74244,0,0,0-.694,1.628,1.258,1.258,0,0,0,1.3895,1.4C16.34,14.137,17.0165,13.3665,16.8635,11.836Z" />
            <path className="fill" d="M7.5655,4.025,4.7,1.1585A.75042.75042,0,0,0,3.638,2.219L6.5045,5.0855Z" />
            </svg>
            </div>
        </>
    )
}

export default Tools;
2

Did you see the answer to your other post?

In any case, I don’t see a point in using the Router lib on UXP. The main benefit Router provides, is direct linking, which makes absolutely no sense for the plugin, as you can’t open Ps with a URL. Just set some state when clicking the buttons and change your content based on that state. Simple and robust

1 Like
3

:point_up_2:t2: Agreed, I’ve always used state + conditional rendering and it has always worked fine. Unless you need routing to match a UXP plugin with some web app, I can’t see any upside.

4

Ok, I’ll change my approach. Thank you for your interest, I’m not familiar with state rendering so I’ll google it, or if you have a good link that would help me I’d appreciate it.

5

But React is all about state rendering. If you’re not using it, React is a huge overkill. The main purpose of React is to render only parts of which state changed.

1 Like
6

Something along these lines

const ConditionalRendered = () => {
  // or any other bit of state passed to the component
  const [isOn, setIsOn] = useState(true);
  return isOn ?
    <SomeComponent /> :
    < SomeOtherComponent />
}

React is nice but definitely overkill if you need a “simple” app; “simple” is as relative as it gets :slight_smile: It really depends on you.
I’m already used to it, but I still can get trapped in the rabbit hole: that syndrome where you keep doing things “properly” when it doesn’t really matter, e.g., "oh, let’s use a custom hook here, it’ll be nice in case I need to reuse it somewhere " (which you already know it’ll never happen ever again).

2 Likes
7

Thanks guys, for your patience and dedication. I definitely need to work on my react skills gap, that’s the only way to succeed :nerd_face:

8

Shameless plug:

:blush:

2 Likes
9

Great book, great job :clap:I reading this book right now, but I have to combine it with additional books about react, maybe I rushed too quickly into the story about UXP

10

I learned React with UXP. My first React project was a UXP plugin :smiley: Davides book was a great jump starter and after that just Googling what I needed to achieve

2 Likes