Skip to content

Commit

Permalink
Merge pull request #5 from arnavrneo/express-backend
Browse files Browse the repository at this point in the history 
feat/docker-integration
  • Loading branch information
@arnavrneo
arnavrneo authored Mar 16, 2024
2 parents 343b9d8 + 7fb1278 commit ebf553f
Show file tree
Hide file tree
Showing 5 changed files with 126 additions and 130 deletions.
224 changes: 112 additions & 112 deletions url-shortener/frontend/app/main/page.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,128 +5,128 @@ import FourOOne from "@/pages/Unauthorized";
import {useRouter} from "next/navigation";

function Main() {
const [userName, setUserName] = useState('');
const [logged, setLogged] = useState(false);
const [url, setUrl] = useState('');
const [visible, setVisible] = useState(false);
const [shortLink, setShortLink] = useState('');

const router = useRouter();

useEffect(() => {
(
async () => {
const response = await fetch(process.env.NEXT_PUBLIC_ENDPOINT + '/user', {
credentials: 'include',
headers: {"Content-Type": "application/json"},
});
const [userName, setUserName] = useState('');
const [logged, setLogged] = useState(false);
const [url, setUrl] = useState('');
const [visible, setVisible] = useState(false);
const [shortLink, setShortLink] = useState('');

const router = useRouter();

useEffect(() => {
(
async () => {
const response = await fetch(process.env.NEXT_PUBLIC_ENDPOINT + '/user', {
credentials: 'include',
headers: {"Content-Type": "application/json"},
});

if (response.ok) {
const content = await response.json();
setUserName(content.username);
setLogged(true)
} else {
setLogged(false)
}
}
)();
}, []);


const handleShorten = async (e) => {
e.preventDefault();

const formData = new FormData();
formData.append("url", url);

try {
const response = await fetch(process.env.NEXT_PUBLIC_ENDPOINT + "/shorten", {
method: "POST",
credentials: "include",
// headers: {"Content-Type": "application/json"},
body: formData,
})

if (response.ok) {
const content = await response.json();
setUserName(content.username);
setLogged(true)
const data = await response.json()
console.log(data)
setShortLink(data.shorten_link)
setVisible(true)
} else {
setLogged(false)
alert("url cannot be sent")
}
} catch (error) {
console.log(error);
}
)();
}, []);


const handleShorten = async (e) => {
e.preventDefault();

const formData = new FormData();
formData.append("url", url);

try {
const response = await fetch(process.env.NEXT_PUBLIC_ENDPOINT + "/shorten", {
method: "POST",
credentials: "include",
// headers: {"Content-Type": "application/json"},
body: formData,
})

if (response.ok) {
const data = await response.json()
console.log(data)
setShortLink(data.shorten_link)
setVisible(true)
} else {
alert("url cannot be sent")
}
} catch (error) {
console.log(error);
}
}

const handleLogout = async () => {
try {
const response = await fetch(process.env.NEXT_PUBLIC_ENDPOINT + "/logout", {
credentials: "include",
method: "POST",
})

if (response.ok) {
console.log("logged out successfully")
router.push("/")
}
} catch (error) {
console.log(error)
}
}

return (
<div>
{logged ? <div className="flex flex-wrap min-h-screen w-full content-center justify-center bg-gray-200 py-10">
<div className="flex shadow-md">
<div className="flex flex-wrap content-center justify-center rounded-l-md bg-white" style={{ width: "24rem", height: "32rem" }}>
<div className="w-72">
<div className="flex flex-wrap content-center justify-center ">
<h1 className="text-xl font-semibold">url-shortener</h1>
</div>
<small className="text-gray-400 mt-4 flex flex-wrap content-center justify-center ">Welcome {userName}</small>
<small className="text-gray-400 mt-4 flex flex-wrap content-center justify-center ">Short your url!</small>


<form onSubmit={handleShorten} className="mt-4">
<div className="mb-3">
<label className="mb-2 block text-xs font-semibold">Your url </label>
<input onChange={(e) => setUrl(e.target.value)} type="url" name="url" placeholder="Enter a URL" className="block w-full rounded-md border border-gray-300 focus:border-purple-700 focus:outline-none focus:ring-1 focus:ring-purple-700 py-1 px-1.5 text-gray-500" required/>
</div>
<div className="mb-3">
<button className="mb-1.5 block w-full text-center text-white bg-purple-700 hover:bg-purple-900 px-2 py-1.5 rounded-md">Make it short!</button>
</div>
</form>

<div className="text-center">
<span className="text-xs text-gray-400 font-semibold"> by </span>
<a href="https://www.github.com/arnavrneo" className="text-xs font-semibold text-purple-700">arnavrneo</a>
</div>
<div className="text-center mt-12">
<div className="flex flex-row justify-center mb-3">
<button onClick={handleLogout} className="mb-1.5 block w-min text-center text-white bg-purple-700 hover:bg-purple-900 px-2 py-1.5 rounded-md">Logout</button>
</div>
</div>
}

{/*LINK VISIBLE HERE*/}
{visible ?
<div className="text-center">
<span className="text-xs text-gray-400 font-semibold"> by </span>
<a href={shortLink} className="text-xs font-semibold text-purple-700">{shortLink}</a>
</div> : ''}
</div>
</div>
const handleLogout = async () => {
try {
const response = await fetch(process.env.NEXT_PUBLIC_ENDPOINT + "/logout", {
credentials: "include",
method: "POST",
})

if (response.ok) {
console.log("logged out successfully")
router.push("/")
}
} catch (error) {
console.log(error)
}
}

return (
<div>
{logged ? <div className="flex flex-wrap min-h-screen w-full content-center justify-center bg-gray-200 py-10">
<div className="flex shadow-md">
<div className="flex flex-wrap content-center justify-center rounded-l-md bg-white" style={{ width: "24rem", height: "32rem" }}>
<div className="w-72">
<div className="flex flex-wrap content-center justify-center ">
<h1 className="text-xl font-semibold">url-shortener</h1>
</div>
<small className="text-gray-400 mt-4 flex flex-wrap content-center justify-center ">Welcome {userName}</small>
<small className="text-gray-400 mt-4 flex flex-wrap content-center justify-center ">Short your url!</small>


<form onSubmit={handleShorten} className="mt-4">
<div className="mb-3">
<label className="mb-2 block text-xs font-semibold">Your url </label>
<input onChange={(e) => setUrl(e.target.value)} type="url" name="url" placeholder="Enter a URL" className="block w-full rounded-md border border-gray-300 focus:border-purple-700 focus:outline-none focus:ring-1 focus:ring-purple-700 py-1 px-1.5 text-gray-500" required/>
</div>
<div className="mb-3">
<button className="mb-1.5 block w-full text-center text-white bg-purple-700 hover:bg-purple-900 px-2 py-1.5 rounded-md">Make it short!</button>
</div>
</form>

<div className="text-center">
<span className="text-xs text-gray-400 font-semibold"> by </span>
<a href="https://www.github.com/arnavrneo" className="text-xs font-semibold text-purple-700">arnavrneo</a>
</div>
<div className="text-center mt-12">
<div className="flex flex-row justify-center mb-3">
<button onClick={handleLogout} className="mb-1.5 block w-min text-center text-white bg-purple-700 hover:bg-purple-900 px-2 py-1.5 rounded-md">Logout</button>
</div>
</div>

{/*LINK VISIBLE HERE*/}
{visible ?
<div className="text-center">
<span className="text-xs text-gray-400 font-semibold"> by </span>
<a href={shortLink} className="text-xs font-semibold text-purple-700">{shortLink}</a>
</div> : ''}
</div>
</div>

</div>

<div className="mt-3 w-full">
<p className="text-center">frontend for <span className="text-purple-700">url-shortener </span>(in nextjs)</p>
</div>

<div className="mt-3 w-full">
<p className="text-center">frontend for <span className="text-purple-700">url-shortener </span>(in nextjs)</p>
</div>
</div> : <FourOOne />}
</div>
</div> : <FourOOne />}
</div>
)
)
}

export default Main;
5 changes: 3 additions & 2 deletions url-shortener/servers/express-js/Dockerfile
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
# TODO: error building; possible: node version
FROM node:21-alpine
FROM node:18
LABEL authors="arnavrneo"

WORKDIR /app
Expand All @@ -8,6 +7,8 @@ COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 5678

CMD [ "node", "index.js" ]
10 changes: 9 additions & 1 deletion url-shortener/servers/express-js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,17 @@ const PORT = process.env.PORT;
const app = express();

const allowedOrigins = ["http://localhost:3000", "http://localhost:3000/signup", "http://localhost:3000/main"]
//const allowedOrigins = ["*"]

app.use(express.json());
app.use(cors({allowedOrigins, credentials: true, origin: true}));
app.use(cors({origin: allowedOrigins, credentials: true})); //This one kills the server after cors error
// app.use(function(req, res, next) {
// res.setHeader('Access-Control-Allow-Origin', '*');
// res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
// res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
// res.setHeader('Access-Control-Allow-Credentials', true);
// next();
// });
app.use(cookieParser());

mongoose.connect(process.env.MONGODB_URI)
Expand Down
4 changes: 2 additions & 2 deletions url-shortener/servers/express-js/rdClient/redisClient.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import {createClient} from "redis";
const client = createClient({
password: process.env.REDIS_PASS,
socket: {
host: 'redis-15391.c326.us-east-1-3.ec2.cloud.redislabs.com',
port: 15391,
host: process.env.REDIS_URI,
port: process.env.REDIS_PORT,
tls: {rejectUnauthorized: false},
}
});
Expand Down
13 changes: 0 additions & 13 deletions url-shortener/servers/go/Dockerfile
View file

This file was deleted.

0 comments on commit ebf553f

Please sign in to comment.