Refactor "Save" to "Share" which generates a unique shareable link that when requested fetches the project from the DB and loads it to a fresh canvas

[jamesscaggs]

No description provided.

[jamesscaggs]

This approach doesn't enable 'live' sharing where two people can interact with the same canvas at the same time but rather a snapshot of a project shareable via a unique link like rigflo.io/projects/12345

Client

• Save button can be retitled to Share.
• Make get request to api endpoint spec'd below in the server section of this ticket.
• response body should be a url like rigflo.io/projects/12345 where the id is the database id of the project.
• Upon success display the link to the user with 'click to copy' enabled
• Add a loading state and indicator to the button something like this:

<button className={classNames}>
      {loading ? (
        <span className="flex items-center">
          <svg
            className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
          >
            <circle
              className="opacity-25"
              cx="12"
              cy="12"
              r="10"
              stroke="white"
              strokeWidth="4"
            ></circle>
            <path
              className="opacity-75"
              fill="white"
              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
            ></path>
          </svg>
          <span className="ml-2">Loading...</span>
        </span>
      ) : (
        { children }
      )}
    </button>

Server

• Set up POST /api/projects/:id route on server

• Create project in database and return json with shareable link to the client

• Set up GET /api/projects/:id route on server

• Find project by ID in database and if found send stringified project back to client

• Client should then update elements with response body on client which should re-render the canvas