rushilwiz/wheelshare-frontend
1
0
Fork 0
mirror of https://github.com/myfatemi04/wheelshare-frontend.git synced 2025-04-03 19:20:16 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

convert to Typescript

Browse Source
This commit is contained in:
Michael Fatemi 2021-04-10 13:57:07 -04:00
parent d257ef52ec
commit 7d8601c23c
16 changed files with 152 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
package-lock.json generated
View File

@ -1950,6 +1950,11 @@
"@types/node": "*"
}
},
"@types/history": {
"version": "4.7.8",
"resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz",
"integrity": "sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA=="
},
"@types/html-minifier-terser": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
@ -2014,9 +2019,9 @@
"integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA=="
},
"@types/node": {
"version": "14.14.31",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.31.tgz",
"integrity": "sha512-vFHy/ezP5qI0rFgJ7aQnjDXwAMrG0KqqIH7tQG5PPv3BWBayOPIQNBjVc/P6hhdZfMx51REc6tfDNXHUio893g=="
"version": "14.14.37",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.37.tgz",
"integrity": "sha512-XYmBiy+ohOR4Lh5jE379fV2IU+6Jn4g5qASinhitfyO71b/sCo6MKsMLF5tc7Zf2CE8hViVQyYSobJNke8OvUw=="
},
"@types/normalize-package-data": {
"version": "2.4.0",
@ -2053,6 +2058,25 @@
"csstype": "^3.0.2"
}
},
"@types/react-router": {
"version": "5.1.13",
"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.13.tgz",
"integrity": "sha512-ZIuaO9Yrln54X6elg8q2Ivp6iK6p4syPsefEYAhRDAoqNh48C8VYUmB9RkXjKSQAJSJV0mbIFCX7I4vZDcHrjg==",
"requires": {
"@types/history": "*",
"@types/react": "*"
}
},
"@types/react-router-dom": {
"version": "5.1.7",
"resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.7.tgz",
"integrity": "sha512-D5mHD6TbdV/DNHYsnwBTv+y73ei+mMjrkGrla86HthE4/PVvL1J94Bu3qABU+COXzpL23T1EZapVVpwHuBXiUg==",
"requires": {
"@types/history": "*",
"@types/react": "*",
"@types/react-router": "*"
}
},
"@types/react-transition-group": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
@ -14097,6 +14121,11 @@
"is-typedarray": "^1.0.0"
}
},
"typescript": {
"version": "4.2.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.4.tgz",
"integrity": "sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg=="
},
"uncontrollable": {
"version": "7.2.1",
"resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",

4
package.json
View File

@ -7,6 +7,9 @@
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/bootstrap": "^5.0.12",
"@types/node": "^14.14.37",
"@types/react": "^17.0.3",
"@types/react-router-dom": "^5.1.7",
"bootstrap": "^4.6.0",
"jquery": "^3.6.0",
"popper.js": "^1.16.1",
@ -15,6 +18,7 @@
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"typescript": "^4.2.4",
"web-vitals": "^1.0.1"
},
"scripts": {

0
src/App.js → src/App.tsx
View File

2
src/api.js
View File

@ -1,2 +0,0 @@
const dev = process.env.NODE_ENV === 'development';
export const API_ENDPOINT = 'http://localhost/api';

4
src/api.ts Normal file
View File

@ -0,0 +1,4 @@
const dev = process.env.NODE_ENV === 'development';
export const API_ENDPOINT = 'http://localhost/api';
export const ION_AUTHORIZATION_ENDPOINT =
'https://ion.tjhsst.edu/oauth/authorize?response_type=code&client_id=ScL9QdZ9m3iGmHG11uznwABg4ZSkabQJan05ZYsk&scope=read&redirect_uri=http%3A%2F%2Flocalhost%3A5000%2Fauth%2Fion%2Fsuccess;';

19
src/components/CreatePool.js → src/components/CreatePool.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { FormEventHandler } from 'react';
const CreatePool = (props) => {
const onSubmit = (e) => {
const CreatePool = () => {
const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {
e.preventDefault();
fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`)
@ -24,7 +24,7 @@ const CreatePool = (props) => {
<h1 className="form-title" style={{ fontFamily: 'Impact' }}>
Create Pool
</h1>
<label className="" for="title">
<label className="" htmlFor="title">
Pool Title:{' '}
</label>
<input
@ -36,7 +36,7 @@ const CreatePool = (props) => {
></input>
</div>
<div className="form-group">
<label className="" for="capacity">
<label className="" htmlFor="capacity">
Pool Capacity:
</label>
<input
@ -48,7 +48,7 @@ const CreatePool = (props) => {
></input>
</div>
<div className="form-group">
<label className="" for="pool_start">
<label className="" htmlFor="pool_start">
Start Time:
</label>
<input
@ -60,7 +60,7 @@ const CreatePool = (props) => {
></input>
</div>
<div className="form-group">
<label className="" for="pool_end">
<label className="" htmlFor="pool_end">
End Time:
</label>
<input
@ -72,17 +72,16 @@ const CreatePool = (props) => {
></input>
</div>
<div className="form-group">
<label className="" for="title">
<label className="" htmlFor="title">
Pool Description:
</label>
<textarea
type="text"
id="Pool-text"
name="Pool-text"
style={{ height: '200px' }}
className="form-control"
placeholder="Enter text here..."
></textarea>
/>
</div>
<input

0
src/components/Home.js → src/components/Home.tsx
View File

0
src/components/Main.js → src/components/Main.tsx
View File

4
src/components/Nav.js → src/components/Nav.tsx
View File

@ -1,6 +1,4 @@
import React from 'react';
const Nav = (props) => {
const Nav = () => {
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<button

10
src/components/Pool.js → src/components/Pool.tsx
View File

@ -1,7 +1,8 @@
import React, { useState, useEffect } from 'react';
import { useState, useEffect, FormEventHandler } from 'react';
import { useParams } from 'react-router';
const Pool = (props) => {
const id = props.match.params.id;
const Pool = () => {
const id = useParams<{ id: string }>().id;
const [state, setState] = useState({
pool_title: 'TJ Carpool',
id: 1,
@ -22,7 +23,7 @@ const Pool = (props) => {
}
});
};
const onComment = (e) => {
const onComment: FormEventHandler<HTMLFormElement> = (e) => {
e.preventDefault();
fetch(`${process.env.REACT_APP_API_ENDPOINT}/pool/comments`)
@ -57,7 +58,6 @@ const Pool = (props) => {
<textarea
className="form-control"
id="comment"
type="text"
placeholder="Enter comment here..."
/>
<input className="btn btn-primary" type="submit" value="Submit" />

15
src/components/Pools.js → src/components/Pools.tsx
View File

@ -1,8 +1,11 @@
import React, { useState, useEffect } from 'react';
import { useState, useEffect } from 'react';
import { API_ENDPOINT } from '../api';
const Pools = (props) => {
const [pools, setPools] = useState([
const maybePluralize = (count: number, noun: string, suffix = 's') =>
`${count} ${noun}${count !== 1 ? suffix : ''}`;
const Pools = () => {
const [pools, setPools] = useState<Carpool.Pool[]>([
/*
{
id: 1,
@ -65,8 +68,6 @@ const Pools = (props) => {
});
}, []);
const maybePluralize = (count, noun, suffix = 's') =>
`${count} ${noun}${count !== 1 ? suffix : ''}`;
return (
<div className="bg-dark" style={{ minHeight: '100vh' }}>
<h1
@ -97,10 +98,10 @@ const Pools = (props) => {
style={{ backgroundColor: background }}
>
<a href={'/Pool/' + pool.id} className="card-title">
{pool.pool_title}
{pool.title}
</a>
<p className="text-left">
Capacity: {pool.participants.length} / {pool.capacity}
Capacity: {pool.participant_ids.length} / {pool.capacity}
</p>
<p className="text-left">Start Time: {pool.start_time}</p>
<p className="text-left">End Time: {pool.end_time}</p>

20
src/components/Profile.js → src/components/Profile.tsx
View File

@ -1,12 +1,14 @@
import React, { useState, useEffect } from 'react';
const Profile = (props) => {
const Profile = () => {
const [state, setState] = useState({
user: { username: 'HyperionLegion' },
user: {
username: 'HyperionLegion',
},
pools: [
{
pool_title: 'TJ Carpool',
pool_text: 'Carpool from TJ track to homes',
title: 'TJ Carpool',
description: 'Carpool from TJ track to homes',
start_time: '4/10/2021 3:00 PM',
id: 1,
end_time: '4/10/2021 4:00 PM',
@ -17,8 +19,8 @@ const Profile = (props) => {
],
},
{
pool_title: 'TJ Carpool',
pool_text: 'Carpool from TJ track to homes',
title: 'TJ Carpool',
description: 'Carpool from TJ track to homes',
start_time: '4/10/2021 3:00 PM',
id: 2,
end_time: '4/10/2021 4:00 PM',
@ -29,8 +31,8 @@ const Profile = (props) => {
],
},
{
pool_title: 'TJ Carpool',
pool_text: 'Carpool from TJ track to homes',
title: 'TJ Carpool',
description: 'Carpool from TJ track to homes',
start_time: '4/10/2021 3:00 PM',
id: 3,
end_time: '4/10/2021 4:00 PM',
@ -75,7 +77,7 @@ const Profile = (props) => {
className="text-left m-2 p-1"
style={{ backgroundColor: '#D6D1D0' }}
>
<a href={'pool/' + pool.id}>{pool.pool_title}</a>
<a href={'pool/' + pool.id}>{pool.title}</a>
</div>
);
})}

25
src/components/UpdatePool.js → src/components/UpdatePool.tsx
View File

@ -1,7 +1,13 @@
import React, { useState, useEffect, useCallback } from 'react';
import React, {
useState,
useEffect,
useCallback,
FormEventHandler,
} from 'react';
import { useParams } from 'react-router-dom';
const UpdatePool = (props) => {
const id = props.match.params.id;
const UpdatePool = () => {
const id = useParams<{ id: string }>().id;
// eslint-disable-next-line
const [pool, setPool] = useState({
@ -24,7 +30,7 @@ const UpdatePool = (props) => {
}
});
}, [id]);
const onSubmit = (e) => {
const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {
e.preventDefault();
fetch(`${process.env.REACT_APP_API_ENDPOINT}/create_pool`)
.then((response) => response.json())
@ -49,7 +55,7 @@ const UpdatePool = (props) => {
<h1 className="form-title" style={{ fontFamily: 'Impact' }}>
Update Pool
</h1>
<label className="" for="title">
<label className="" htmlFor="title">
Pool Title:{' '}
</label>
<input
@ -61,7 +67,7 @@ const UpdatePool = (props) => {
></input>
</div>
<div className="form-group">
<label className="" for="capacity">
<label className="" htmlFor="capacity">
Pool Capacity:
</label>
<input
@ -73,7 +79,7 @@ const UpdatePool = (props) => {
></input>
</div>
<div className="form-group">
<label className="" for="pool_start">
<label className="" htmlFor="pool_start">
Start Time:
</label>
<input
@ -85,7 +91,7 @@ const UpdatePool = (props) => {
></input>
</div>
<div className="form-group">
<label className="" for="pool_end">
<label className="" htmlFor="pool_end">
End Time:
</label>
<input
@ -97,11 +103,10 @@ const UpdatePool = (props) => {
></input>
</div>
<div className="form-group">
<label className="" for="title">
<label className="" htmlFor="title">
Pool Description:
</label>
<textarea
type="text"
id="Pool-text"
name="Pool-text"
style={{ height: '200px' }}

1
src/react-app-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="react-scripts" />

41
src/types.d.ts vendored Normal file
View File

@ -0,0 +1,41 @@
declare namespace Carpool {
export interface Group {
id: string;
member_ids: string[];
}
export interface User {
id: string;
email: string;
username: string;
first_name: string;
last_name: string;
}
export interface Comment {
id: string;
body: string;
author_id: string;
}
export type Status = 'pending' | 'cancelled' | 'completed' | 'interrupted';
export interface Pool {
id: string;
title: string;
description: string;
participant_ids: string[];
driver_id: string;
create_time: string;
update_time: string;
comments: Comment[];
group_id: string;
status: Status;
capacity: number;
direction: 'pickup' | 'dropoff';
author_id: string;
type: 'request' | 'offer';
start_time: string;
end_time: string;
}
}

21
tsconfig.json Normal file
View File

@ -0,0 +1,21 @@
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"],
"files": ["src/types.d.ts"]
}