Skip to content

Commit

Permalink
refactor: 린트 적용
Browse files Browse the repository at this point in the history
  • Loading branch information
kangju2000 committed Oct 17, 2023
1 parent f625a7a commit 56b3efd
Show file tree
Hide file tree
Showing 35 changed files with 446 additions and 435 deletions.
38 changes: 19 additions & 19 deletions src/components/domains/ActivityItem/index.tsx
Original file line number Diff line number Diff line change
@@ -1,33 +1,33 @@
import { captureException } from '@sentry/react';
import { captureException } from '@sentry/react'

import type { ActivityType } from '@/types';
import type { ActivityType } from '@/types'

import { ReactComponent as CheckIcon } from '@/assets/circle_check.svg';
import { ReactComponent as XMarkIcon } from '@/assets/circle_x.svg';
import { ReactComponent as StopwatchIcon } from '@/assets/stopwatch.svg';
import ActivityTag from '@/components/domains/ActivityTag';
import { convertDateTime, timeFormat } from '@/utils';
import { ReactComponent as CheckIcon } from '@/assets/circle_check.svg'
import { ReactComponent as XMarkIcon } from '@/assets/circle_x.svg'
import { ReactComponent as StopwatchIcon } from '@/assets/stopwatch.svg'
import ActivityTag from '@/components/domains/ActivityTag'
import { convertDateTime, timeFormat } from '@/utils'

type Props = {
activity: ActivityType;
courseName: string;
};
activity: ActivityType
courseName: string
}

const Icon = ({ type }: { type: 'check' | 'x' | 'stopwatch' }) =>
({
check: <CheckIcon width={38} height={38} />,
x: <XMarkIcon width={38} height={38} />,
stopwatch: <StopwatchIcon width={38} height={38} />,
}[type]);
}[type])

const ActivityItem = ({ activity, courseName }: Props) => {
const { type, title, endAt, id } = activity;
const { type, title, endAt, id } = activity

if (!title) captureException(new Error('[Warning] Activity title is empty'));
if (!endAt) captureException(new Error('[Warning] Activity endAt is empty'));
if (!id) captureException(new Error('[Warning] Activity id is empty'));
if (!title) captureException(new Error('[Warning] Activity title is empty'))
if (!endAt) captureException(new Error('[Warning] Activity endAt is empty'))
if (!id) captureException(new Error('[Warning] Activity id is empty'))

const isAssignment = type === 'assignment';
const isAssignment = type === 'assignment'

return (
<a
Expand Down Expand Up @@ -55,7 +55,7 @@ const ActivityItem = ({ activity, courseName }: Props) => {
<div className="text-[14px]">{timeFormat(endAt)}</div>
</div>
</a>
);
};
)
}

export default ActivityItem;
export default ActivityItem
20 changes: 10 additions & 10 deletions src/components/domains/ActivityList/index.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import type { ActivityType, Course } from '@/types';
import type { ActivityType, Course } from '@/types'

import ActivityItem from '@/components/domains/ActivityItem';
import FlexCenterDiv from '@/components/uis/FlexCenterDiv';
import ActivityItem from '@/components/domains/ActivityItem'
import FlexCenterDiv from '@/components/uis/FlexCenterDiv'

type Props = {
filteredActivityList: ActivityType[];
courseList: Course[];
};
filteredActivityList: ActivityType[]
courseList: Course[]
}

const ActivityList = ({ filteredActivityList, courseList }: Props) => {
if (!filteredActivityList.length)
return (
<FlexCenterDiv className="mt-4 flex-grow p-[5px]">
<p className="text-gray-400">과제가 없습니다.</p>
</FlexCenterDiv>
);
)

return (
<div
Expand All @@ -29,7 +29,7 @@ const ActivityList = ({ filteredActivityList, courseList }: Props) => {
/>
))}
</div>
);
};
)
}

export default ActivityList;
export default ActivityList
10 changes: 5 additions & 5 deletions src/components/domains/ActivityTag/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
interface ActivityTagProps {
type: 'assignment' | 'video';
type: 'assignment' | 'video'
}
const ActivityTag = ({ type }: ActivityTagProps) => {
const status = {
Expand All @@ -11,15 +11,15 @@ const ActivityTag = ({ type }: ActivityTagProps) => {
color: 'bg-black',
text: '녹화강의',
},
}[type];
}[type]

return (
<span
className={`absolute -top-8 rounded-full px-2 py-1 text-[6px] text-white ${status.color}`}
>
{status.text}
</span>
);
};
)
}

export default ActivityTag;
export default ActivityTag
46 changes: 23 additions & 23 deletions src/components/domains/ContentModal/hooks/useFetchData.ts
Original file line number Diff line number Diff line change
@@ -1,59 +1,59 @@
import { useState } from 'react';
import { useState } from 'react'

import type { ActivityType, Course } from '@/types';
import type { ActivityType, Course } from '@/types'

import { getActivities, getCourses } from '@/services';
import { allProgress } from '@/utils';
import { getActivities, getCourses } from '@/services'
import { allProgress } from '@/utils'

type dataType = {
courseList: Course[];
activityList: ActivityType[];
updateAt: number;
};
courseList: Course[]
activityList: ActivityType[]
updateAt: number
}

const useFetchData = () => {
const [pos, setPos] = useState(0);
const [pos, setPos] = useState(0)
const [data, setData] = useState<dataType>({
courseList: [{ id: '-1', title: '전체' }],
activityList: [],
updateAt: 0,
});
})

const getData = async () => {
const courses = await getCourses();
const courses = await getCourses()
const activities = await allProgress(
courses.map(course => getActivities(course.id)),
progress => setPos(progress),
).then(activities => activities.flat());
).then(activities => activities.flat())

const updateAt = new Date().getTime();
const updateAt = new Date().getTime()

setData({
courseList: [{ id: '-1', title: '전체' }, ...courses],
activityList: activities,
updateAt,
});
})

setPos(0);
setPos(0)

chrome.storage.local.set({
courses,
activities,
updateAt,
});
};
})
}

const getLocalData = () => {
chrome.storage.local.get(({ updateAt, courses, activities }) => {
setData({
courseList: [{ id: '-1', title: '전체' }, ...courses],
activityList: activities,
updateAt,
});
});
};
})
})
}

return [getData, getLocalData, data, pos] as const;
};
return [getData, getLocalData, data, pos] as const
}

export default useFetchData;
export default useFetchData
90 changes: 45 additions & 45 deletions src/components/domains/ContentModal/index.tsx
Original file line number Diff line number Diff line change
@@ -1,75 +1,75 @@
import { forwardRef, useEffect, useState } from 'react';
import { Tooltip } from 'react-tooltip';
import { forwardRef, useEffect, useState } from 'react'
import { Tooltip } from 'react-tooltip'

import type { Course } from '@/types';
import type { Course } from '@/types'

import { ReactComponent as RefreshIcon } from '@/assets/refresh.svg';
import { ReactComponent as SettingIcon } from '@/assets/setting.svg';
import ActivityList from '@/components/domains/ActivityList';
import useFetchData from '@/components/domains/ContentModal/hooks/useFetchData';
import Filter from '@/components/uis/Filter';
import FlexCenterDiv from '@/components/uis/FlexCenterDiv';
import Modal from '@/components/uis/Modal';
import ProgressBar from '@/components/uis/ProgressBar';
import { REFRESH_TIME } from '@/constants';
import useError from '@/hooks/useError';
import useScrollLock from '@/hooks/useScrollLock';
import filteredActivities from '@/utils/filteredActivityList';
import { ReactComponent as RefreshIcon } from '@/assets/refresh.svg'
import { ReactComponent as SettingIcon } from '@/assets/setting.svg'
import ActivityList from '@/components/domains/ActivityList'
import useFetchData from '@/components/domains/ContentModal/hooks/useFetchData'
import Filter from '@/components/uis/Filter'
import FlexCenterDiv from '@/components/uis/FlexCenterDiv'
import Modal from '@/components/uis/Modal'
import ProgressBar from '@/components/uis/ProgressBar'
import { REFRESH_TIME } from '@/constants'
import useError from '@/hooks/useError'
import useScrollLock from '@/hooks/useScrollLock'
import filteredActivities from '@/utils/filteredActivityList'

const status = [
{ id: 1, title: '진행중인 과제' },
{ id: 2, title: '모든 과제' },
];
]

type Props = {
isOpen: boolean;
onClick: (event: React.MouseEvent) => void;
};
isOpen: boolean
onClick: (event: React.MouseEvent) => void
}

const ContentModal = ({ isOpen, onClick }: Props, ref: React.Ref<HTMLDivElement>) => {
const [selectedCourse, setSelectedCourse] = useState<Course>({ id: '-1', title: '전체' });
const [statusType, setStatusType] = useState<{ id: number; title: string }>(status[0]);
const [isRefresh, setIsRefresh] = useState(false);
const [isChecked, setIsChecked] = useState(false);
const [selectedCourse, setSelectedCourse] = useState<Course>({ id: '-1', title: '전체' })
const [statusType, setStatusType] = useState<{ id: number; title: string }>(status[0])
const [isRefresh, setIsRefresh] = useState(false)
const [isChecked, setIsChecked] = useState(false)

const { catchAsyncError } = useError();
const { scrollLock, scrollUnlock } = useScrollLock();
const [getData, getLocalData, data, pos] = useFetchData();
const { catchAsyncError } = useError()
const { scrollLock, scrollUnlock } = useScrollLock()
const [getData, getLocalData, data, pos] = useFetchData()

const { courseList, activityList, updateAt } = data;
const { courseList, activityList, updateAt } = data
const filteredActivityList = filteredActivities(
activityList,
selectedCourse.id,
statusType.title,
isChecked,
);
)

useEffect(() => {
if (!isRefresh) return;
if (!isRefresh) return
getData()
.then(() => setIsRefresh(false))
.catch(error => catchAsyncError(error));
}, [isRefresh]);
.catch(error => catchAsyncError(error))
}, [isRefresh])

useEffect(() => {
if (!isOpen) return;
scrollLock();
if (!isOpen) return
scrollLock()
if (!isRefresh)
chrome.storage.local.get(['updateAt'], ({ updateAt }) => {
if (!updateAt) return setIsRefresh(true);
if (!updateAt) return setIsRefresh(true)

const diff = new Date().getTime() - updateAt;
const isOverRefreshTime = diff > REFRESH_TIME;
const diff = new Date().getTime() - updateAt
const isOverRefreshTime = diff > REFRESH_TIME

if (!isOverRefreshTime) {
getLocalData();
getLocalData()
} else {
setIsRefresh(true);
setIsRefresh(true)
}
});
})

return scrollUnlock;
}, [isOpen]);
return scrollUnlock
}, [isOpen])

return (
<Modal.Background
Expand Down Expand Up @@ -100,7 +100,7 @@ const ContentModal = ({ isOpen, onClick }: Props, ref: React.Ref<HTMLDivElement>
checked={isChecked}
onChange={() => setIsChecked(!isChecked)}
/>
<p className="text-[12px]">미제출 과제만 보기</p>
<p className="text-[12px]">미제출 과제만</p>
</label>
<Filter value={statusType} onChange={setStatusType}>
<Filter.Header />
Expand Down Expand Up @@ -144,7 +144,7 @@ const ContentModal = ({ isOpen, onClick }: Props, ref: React.Ref<HTMLDivElement>
</div>
</Modal>
</Modal.Background>
);
};
)
}

export default forwardRef(ContentModal);
export default forwardRef(ContentModal)
18 changes: 9 additions & 9 deletions src/components/domains/OptionItem/index.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
import { useState } from 'react';
import { useState } from 'react'

import Toggle from '@/components/uis/Toggle';
import Toggle from '@/components/uis/Toggle'

interface OptionItemProps {
text: string;
text: string
}

const OptionItem = ({ text }: OptionItemProps) => {
const [isOn, setIsOn] = useState(false);
const [isOn, setIsOn] = useState(false)

const toggleSwitch = () => {
setIsOn(prev => !prev);
setIsOn(prev => !prev)
// TODO: Save the option to the local storage
};
}

return (
<li className="flex items-center">
<p>{text}</p>
<Toggle isOn={isOn} toggleSwitch={toggleSwitch} />
</li>
);
};
)
}

export default OptionItem;
export default OptionItem
Loading

0 comments on commit 56b3efd

Please sign in to comment.