Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor to use Remix #65

Draft
wants to merge 13 commits into
base: master
Choose a base branch
from
Next Next commit
Started refactoring to remix
eurunuela committed Nov 6, 2022
commit 86a900cb77a466b310a6c6ba4374ab580f33fab1
34,023 changes: 34,023 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -11,6 +11,7 @@
"@fortawesome/react-fontawesome": "^0.1.15",
"@reach/rect": "^0.16.0",
"@reach/tabs": "^0.16.4",
"@remix-run/react": "^1.7.5",
"chart.js": "3.5.0",
"chartjs-plugin-datalabels": "2.0.0",
"chartjs-plugin-zoom": "1.1.1",
4 changes: 4 additions & 0 deletions rica_remix/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/** @type {import('eslint').Linter.Config} */
module.exports = {
extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
};
6 changes: 6 additions & 0 deletions rica_remix/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
node_modules

/.cache
/public/build
/.netlify
.env
62 changes: 62 additions & 0 deletions rica_remix/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
# Welcome to Remix!

- [Remix Docs](https://remix.run/docs)
- [Netlify Functions](https://www.netlify.com/products/functions/)

## Netlify Setup

1. Install the [Netlify CLI](https://www.netlify.com/products/dev/):

```sh
npm i -g netlify-cli
```

If you have previously installed the Netlify CLI, you should update it to the latest version:

```sh
npm i -g netlify-cli@latest
```

2. Sign up and log in to Netlify:

```sh
netlify login
```

3. Create a new site:

```sh
netlify init
```

## Development

The Remix dev server starts your app in development mode, rebuilding assets on file changes. To start the Remix dev server:

```sh
npm run dev
```

Open up [http://localhost:3000](http://localhost:3000), and you should be ready to go!

The Netlify CLI builds a production version of your Remix App Server and splits it into Netlify Functions that run locally. This includes any custom Netlify functions you've developed. The Netlify CLI runs all of this in its development mode.

```sh
netlify dev
```

Open up [http://localhost:3000](http://localhost:3000), and you should be ready to go!

Note: When running the Netlify CLI, file changes will rebuild assets, but you will not see the changes to the page you are on unless you do a browser refresh of the page. Due to how the Netlify CLI builds the Remix App Server, it does not support hot module reloading.

## Deployment

There are two ways to deploy your app to Netlify, you can either link your app to your git repo and have it auto deploy changes to Netlify, or you can deploy your app manually. If you've followed the setup instructions already, all you need to do is run this:

```sh
# preview deployment
netlify deploy --build

# production deployment
netlify deploy --build --prod
```
22 changes: 22 additions & 0 deletions rica_remix/app/entry.client.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";

function hydrate() {
startTransition(() => {
hydrateRoot(
document,
<StrictMode>
<RemixBrowser />
</StrictMode>
);
});
}

if (window.requestIdleCallback) {
window.requestIdleCallback(hydrate);
} else {
// Safari doesn't support requestIdleCallback
// https://caniuse.com/requestidlecallback
window.setTimeout(hydrate, 1);
}
20 changes: 20 additions & 0 deletions rica_remix/app/entry.server.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { RemixServer } from "@remix-run/react";
import { renderToString } from "react-dom/server";

export default function handleRequest(
request,
responseStatusCode,
responseHeaders,
remixContext
) {
const markup = renderToString(
<RemixServer context={remixContext} url={request.url} />
);

responseHeaders.set("Content-Type", "text/html");

return new Response("<!DOCTYPE html>" + markup, {
headers: responseHeaders,
status: responseStatusCode,
});
}
31 changes: 31 additions & 0 deletions rica_remix/app/root.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";

export const meta = () => ({
charset: "utf-8",
title: "New Remix App",
viewport: "width=device-width,initial-scale=1",
});

export default function App() {
return (
<html lang="en">
<head>
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
}
11 changes: 11 additions & 0 deletions rica_remix/app/routes/Carpets/CarpetOption.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from "react";

export default class CarpetOption extends React.Component {
render() {
return (
<option className="dd-option" value={this.props.img}>
{this.props.name}
</option>
);
}
}
38 changes: 38 additions & 0 deletions rica_remix/app/routes/Carpets/Carpets.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from "react";
import CarpetOption from "./CarpetOption";

class Carpets extends React.Component {
constructor(props) {
super(props);
this.state = {
carpetPlot: this.props.images[0]["img"],
};
}

onChange = (e) => {
this.setState({ carpetPlot: e.target.value });
};

render() {
const images = this.props.images;

return (
<center>
<select className="dd-menu" onChange={this.onChange}>
{images.map((carpet) => (
<CarpetOption
key={carpet.name}
name={carpet.name}
img={carpet.img}
/>
))}
</select>
<div className="carpet-plots-image">
<img id="imgCarpetPlot" alt="" src={this.state.carpetPlot} />
</div>
</center>
);
}
}

export default Carpets;
20 changes: 20 additions & 0 deletions rica_remix/app/routes/Info/Info.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from "react";

class Info extends React.Component {
constructor(props) {
super(props);
this.state = {
info: this.props.info,
};
}

render() {
return (
<div className="mt-16 text-base text-justify whitespace-pre-wrap mx-80 ">
<p>{this.state.info}</p>
</div>
);
}
}

export default Info;
35 changes: 35 additions & 0 deletions rica_remix/app/routes/Mobile.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React, { Component } from "react";

class MobileMain extends Component {
render() {
return (
<div className="h-screen bg-gradient-to-tr from-indigo-200 via-red-200 to-yellow-100">
<div className="fixed z-10 flex items-center justify-center w-full h-full">
<div className="px-6 m-auto">
<h1 className="mb-8 text-3xl font-extrabold">
Hi, this is Rica{" "}
<span role="img" aria-label="wave">
👋
</span>
</h1>
<div className="my-8">
<p className="text-base">
It looks like you're visiting from a small screen. Bookmark me
and visit me again from your computer.
</p>
</div>
<div className="my-8">
<a href="https://www.github.com/ME-ICA/rica" target="_blank">
<div className="inline-block w-auto px-4 py-2 font-bold text-white bg-indigo-400 rounded hover:bg-indigo-700">
Learn more
</div>
</a>
</div>
</div>
</div>
</div>
);
}
}

export default MobileMain;
Loading